美文网首页
HTML5_CSS3

HTML5_CSS3

作者: 小囧兔 | 来源:发表于2017-08-29 16:45 被阅读0次

    HTML5是什么?有哪些新特性?有哪些新增标签?如何让低版本的 IE 支持 HTML5新标签

    HTML5是最新的HTML标准,2014年10月29日标准规范制定完成。
    新特性:

    • 语义特性
      HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序、对用户都更有价值的数据驱动的Web。

    • 本地存储特性
      基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5 APP Cache,以及本地存储功能。Indexed DB(html5本地存储最重要的技术之一)和API说明文档。

    • 设备兼容特性
      从Geolocation功能的API文档公开以来,HTML5为网页应用开发者们提供了更多功能上的优化选择,带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连,例如视频影音可直接与microphones及摄像头相联。

    • 连接特性
      更有效的连接工作效率,使得基于页面的实时聊天,更快速的网页游戏体验,更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术,Server-Sent Event和WebSockets就是其中的两个特性,这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。

    • 网页多媒体特性
      支持网页端的Audio、Video等多媒体功能, 与网站自带的APPS,摄像头,影音功能相得益彰。
      三维、图形及特效特性(Class: 3D, Graphics & Effects)
      基于SVG、Canvas、WebGL及CSS3的3D功能,用户会惊叹于在浏览器中,所呈现的惊人视觉效果。

    • 性能与集成特性
      没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术,解决以前的跨域等问题,帮助您的Web应用和网站在多样化的环境中更快速的工作。

    • CSS3特性
      在不牺牲性能和语义结构的前提下,CSS3中提供了更多的风格和更强的效果。此外,较之以前的Web排版,Web的开放字体格式(WOFF)也提供了更高的灵活性和控制性。

    新增的标签:

    • <article></article>
      标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
    • <aside></aside>
      标签定义 article 以外的内容。aside 的内容应该与 article 的内容相关
    • <audio></audio>
      标签定义声音,比如音乐或其他音频流
    • <canvas></canvas>
      标签定义图形,比如图表和其他图像。这个 HTML 元素是为了客户端矢量图形而设计的。它自己没有行为,但却把一个绘图 API 展现给客户端 JavaScript 以使脚本能够把想绘制的东西都绘制到一块画布上。
    • <command>
      标签定义命令按钮,比如单选按钮、复选框或按钮。
    • <datalist> </datalist>
      标签定义可选数据的列表。与 input 元素配合使用,就可以制作出输入值的下拉列表。
    • <details></details>
      标签定义元素的细节,用户可进行查看,或通过点击进行隐藏。与 <legend> 一起使用,来制作 detail 的标题。该标题对用户是可见的,当在其上点击时可打开或关闭 detail。
    若水GIF截图_2017年8月27日10点13分29秒.gif
    • <figcaption></figcaption>
      <figcaption> 是与其相关联的图片的说明/标题,用�于描述其父节点 元素里的其他数据, figcaption 元素应该被置于 figure元素的第一个或最后一个子元素的位置。。同时 figcaption 元素是可选的;如果没有该元素,这个父节点的图片只是会没有说明/标题。
    • <figure></figure>
      标签用于对元素进行组合。使用 <figcaption> 元素为元素组添加标题。
    • <footer></footer>
      标签定义 section 或 document 的页脚。典型地,它会包含创作者的姓名、文档的创作日期以及/或者联系信息。
    • <header></header>
      标签定义 section 或 document 的页眉。
    • <nav></nav>
      标签定义导航链接的部分。
    • <progress></progress>
      标签运行中的进程。可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进程。

    让低版本的 IE 支持 HTML5新标签:
    HTML5 Shiv是JavaScript的一种备选方案,该方案在IE9版本中优先启用HTML5元素样式,但不允许使用没有由JavaScript定义过的元素样式。html5shiv.js用于在IE9以下的浏览器模拟html5的标签。
    当使用IE9以下版本的浏览器时,加载html5shiv.js文件,其它的不加载。

    <!--[if lt IE 9 ]><script src="js/html5shiv.js"></script><![endif]-->
    

    input 有哪些新增类型?

    • email
      类型用于验证email的格式,当提交表单时会自动验证email域的值
    • url
      类型用于验证 URL 地址的格式,当提交表单时会自动验证url域的值
    • number
      类型会根据你的设置提供选择数字的功能,min属性设置最小值、max属性设置最大值,value属性设置当前值,step属性设定每次增长的值,某些浏览器还不支持
    • range
      类型用于应该包含一定范围内数字值的输入域,其会以一个滑块的形式展现,min属性设置最小值、max属性设置最大值,value属性设置当前值,如果没有设置,则其默认值的范围是1-100
      日期和时间类型:HTML5 拥有多个可供选取日期和时间的新输入类型:
    • date
      选取日、月、年
    • month
      选取月、年
    • week
      选取周和年
    • time
      选取时间(小时和分钟)
    • datetime
      选取时间、日、月、年(UTC 时间)
    • datetime-local
      选取时间、日、月、年(本地时间)
    • search
      类型用于搜索域,比如站点搜索或 Google 搜索,为其加上results="s"属性,则会在搜索框前面加上一个搜索图标
    • tel
      类型用于验证输入的是否是电话格式的内容,此元素现在还没有浏览器支持
    • color
      类型会提供一个颜色拾取器,供用户选择颜色,并将用户选择的颜色填充到此元素中

    浏览器本地存储中 cookie 和 localStorage 有什么区别? localStorage 如何存储删除数据。

    cookie
    cookie是指浏览器存储的少量数据,同时它是与具体的web页面或者站点相关的。cookie的数据会自动在web浏览器和web服务器之间传输的,因此服务端的脚本就可以读、写存储在客户端的cookie的值。在javascript中,cookie用于保存状态以及能够为web浏览器提供一种身份识别机制,因此它们是不安全的。

    localStorage
    实现了web存储草案标准的浏览器在window对象上定义了两个属性:localStorage 和sectionStorage,这两个属性都代表同一个对象Storage,
    都是一个持久化关联的数组,数组使用字符串来索引,存储的值也都是字符串形式的。Storage对象设置它的属性为字符串值,浏览器会将该值存储起来。localStorage保存的数据长期存在,下一次访问该网站的时候,网页可以直接读取以前保存的数据。除了保存期限的长短不同,这两个对象的属性和方法完全一样。

    cookie 和 localStorage 的区别:
    localStorage拥有setItem getItem RemoveItem clear等方法,其容量有10M,用于持久化的存储。cookie一般由服务器生成,可设置失效时间。如果在浏览器端生成Cookie,默认是关闭浏览器后失效,每个 Cookie 的大小一般不能超过4KB。

    localStorage 存储删除数据
    localStorage保存的数据,以“键值对”的形式存在,每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。存入数据使用setItem方法。它接受两个参数,第一个是键名,第二个是保存的数据。
    存储数据:

    localStorage.setItem("x",1);//以x的名字存储一个变量1
    或者
    localStorage.x= 1;//设置x为"1"
    
    

    删除数据:

    localStorage.removeItem("x");//删除x项
    localStorage.clear();//全部删除
    
    

    写出如下 CSS3效果的简单事例

        1. 圆角, 圆形
        2. div 阴影
        3. 2D 转换:放大、缩小、偏移、旋转
        4. 3D 转换:移动、旋转
        5. 背景色渐变
        6. 过渡效果
        7. 动画
    

    demo
    代码

    实现如下全屏图加过渡色的效果(具体效果随意)

    demo
    代码

    写出如下 loading 动画效果

    demo1
    代码
    demo2
    代码

    相关文章

      网友评论

          本文标题:HTML5_CSS3

          本文链接:https://www.haomeiwen.com/subject/dguvdxtx.html