一. 语义化标签
1. 使用语义化标签的原因/优点
根据内容的结构化使用语义化标签，能够使开发者更好的阅读和理解以及浏览器爬虫与搜索引擎解析。
2. 新标签
新block标签：header,footer,main,aside,article,section,nav,hgroup （主要8个）。
新表单标签，calendar、date、time、email、url、search
媒介标签： video 和 audio
绘画标签： canvas
3.详细语义（兼容性好的标签）www
- header:页眉（网页（部分区域）的头部 顶部 导航区域等等）;
- footer:页脚（网页（部分区域）的底部|版权区域等等）;
- section 标签定义网页中的区域（部分）；
- article 内容是引用其他地方的；
- aside 跟 article 是一起使用；是辅助 article 区域的内容;
- nav 导航链接部分;
- hgroup 给标题分组，不能就一个标题;
- figure 对多个元素进行组合。通常与figcaption联合使用;
4.新表单标签
新增 date、time、email、url、search 等类型
具体地址: http://www.w3school.com.cn/html5/att_input_type.asp
5.video标签
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持 HTML5 video 标签。
</video>- controls：设置或返回音频/视频是否显示控件（比如播放/暂停等）
- autoplay：视频在就绪后马上播放
- muted：设置值后，，音频会初始化为静音
- poster：一个海波帧的url,用于用于在视频或者调帧之前展示
- webkit-playsinline=”true” playsinline=”true” 视频初始化播放是否全屏播放
注意: MP4要 h264格式才可以。否则没有画面。
二. 兼容性
新标签不兼容 ie6/7/8
HTML5浏览器兼容性解决方案
1：创建js+css
<header>
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('article');
document.createElement('aside');
document.createElement('main');
document.createElement('section');
document.createElement('nav');
document.createElement('hgroup');
<script>
<style>
header,footer,main.aside,article,section,nav,hgroup{
display:block;
}
</style>
</header>2：html5shiv
<!-- if lt IE 9 -->
<script src="https://cdn.bootcss.com/html5shiv/r29/html5.js"></script> //或者下载下来
<!-- endif -->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的编码，使用默认；
<!-- if lt IE 9 -->
<script src="https://cdn.bootcss.com/response.js/0.10.0/response.js"></script>
<!-- 或者下载下来 -->
<!-- endif -->