12.HTML5新特性

HTML5新特性

1.介绍

它是万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改。用于取代 HTML4 与 XHTML 的新一代标准版本，所以叫HTML5

HTML5 在狭义上是指新一代的 HTML 标准，在广义上是指：整个前端

2.H5的目的

HTML5的设计目的是为了在移动设备上支持多媒体

3.新特性总览

语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3 特性

4.H5优势与劣势

优势

• 提高可用性和改进用户的友好体验
• 更好的语义化标签
• 可以给站点带来更多的多媒体元素（视频和音频）
• 可以很好的替代FLASH和Silverlight
• 当涉及到网站的抓取和索引的时候，对于SEO很友好
• 可移植性好
• 将被大量应用于移动应用程序和游戏

劣势

• 该标准并未能很好的被PC端浏览器所支持
• IE9以下的浏览器几乎都不兼容

5.新的语义化标签

div的问题

以前制作网页布局，我们基本用 div 来做。div 就是一个普通的块级标签，对于搜索引擎来说，是没有语义的

图示

注意事项

• 这种语义化标准主要针对搜索引擎的
• 这些新标签页面中可以使用多次的
• 在IE9中，需要把这些元素转换为块级元素
• 其实，我们移动端更喜欢使用这些标签

关于article和section

• artical 里面可以有多个 section
• section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用 section 元素
• article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素

6.新的多媒体标签

注意

都是双标签，音频还是 audio 标签，视频还是 video 标签

video属性

audio属性

7.新的表单标签

新增的表单标签

表单控件新增属性

datalist

form标签新增属性

属性名	功能
novalidate	如果给 form 标签设置了该属性，表单提交的时候不再进行验证

8.H5新增全局属性

9.H5兼容性处理

方式一

添加元信息，让浏览器处于最优渲染模式

<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">

方式二

使用 html5shiv 让低版本浏览器认识 H5 的语义化标签

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

扩展

<!--[if IE 8]>仅IE8可见<![endif]-->
<!--[if gt IE 8]>仅IE8以上可见<![endif]—>
<!--[if lt IE 8]>仅IE8以下可见<![endif]—>
<!--[if gte IE 8]>IE8及以上可见<![endif]—>
<!--[if lte IE 8]>IE8及以下可见<![endif]—>
<!--[if !IE 8]>非IE8的IE可见<![endif]-->