HTML5新特性总结（一）-新标签

一. 语义化标签

1. 使用语义化标签的原因/优点

根据内容的结构化使用语义化标签，能够使开发者更好的阅读和理解以及浏览器爬虫与搜索引擎解析。

2. 新标签

新block标签：header,footer,main,aside,article,section,nav,hgroup （主要8个）。
新表单标签，calendar、date、time、email、url、search 
媒介标签： video 和 audio 
绘画标签： canvas 

3.详细语义（兼容性好的标签）www

1. header:页眉（网页（部分区域）的头部 顶部 导航区域等等）;
2. footer:页脚（网页（部分区域）的底部|版权区域等等）;
3. section 标签定义网页中的区域（部分）；
4. article 内容是引用其他地方的；
5. aside 跟 article 是一起使用；是辅助 article 区域的内容;
6. nav 导航链接部分;
7. hgroup 给标题分组，不能就一个标题;
8. figure 对多个元素进行组合。通常与figcaption联合使用;

4.新表单标签

新增 date、time、email、url、search 等类型

具体地址: http://www.w3school.com.cn/html5/att_input_type.asp

5.video标签

• controls：设置或返回音频/视频是否显示控件（比如播放/暂停等）
• autoplay：视频在就绪后马上播放
• muted：设置值后，，音频会初始化为静音
• poster：一个海波帧的url,用于用于在视频或者调帧之前展示
• webkit-playsinline=”true” playsinline=”true” 视频初始化播放是否全屏播放

注意: MP4要 h264格式才可以。否则没有画面。

二. 兼容性

新标签不兼容 ie6/7/8

HTML5浏览器兼容性解决方案

1：创建js+css

     //或者下载下来

3 : respond.js

作用：使ie9及以下兼容@media与ie6兼容max-width;

• 需要启动本地服务器（localhost），不能使用普通本地的url地址（file://开头）；
• 需要外部引入CSS文件，将CSS样式书写在style中是无效的；
• 由于respond插件是查找CSS文件，再进行处理，所以respond文件一定要放置在CSS文件的后面
• 另外，虽然把respond放置在head里还是在body后面都能够实现，但是建议放置在head中；
• 最好不要为CSS设置utf-8的编码，使用默认；