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]-->