1 HTML5简介
1.1 什么是 HTML5？
1.2 为何有HTML5？
- 针对
JavaScript，新增了很多可操作的接口。 - 新增了一些语义化标签、全局属性。
- 新增了多媒体标签，可以很好的
替代flash。 - 更加侧重语义化，对于
SEO更友好。 - 可移植性好，可以大量应用在移动设备上。
⚠ 注意
- HTML存在兼容性问题（HTML5适用于
Chrome 、 Safari 、 Opera 、 Firefox等主流浏览器。IE浏览器必须是 9 及以上版本才支持 HTML5 ，且IE9仅支持部分HTML5新特性。）- 书写
HTML5属性时，如果属性名和属性值相同，可以简写为一个单词。
2 新增语义化标签
2.1 新增布局标签
2.2 新增状态标签
meter标签
备注：
optimum值所在数值区间为正常区间，除此之外，均是异常区间。
progress标签
2.3 新增列表标签
示例代码，如下所示：
<form action="#">
<input type="text" list="mydata">
</form>
<datalist id="mydata">
<option value="周冬雨">周冬雨</option>
<option value="周杰伦">周杰伦</option>
<option value="温兆伦">温兆伦</option>
<option value="马冬梅">马冬梅</option>
</datalist>
<details>
<summary>如何走上人生巅峰？</summary>
<p>一步一步走呗</p>
</details>
2.4 新增文本标签
- 文本注音标签
示例代码，如下所示：
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
- 文本标记标签
3 新增表单功能
3.1 表单控件新增属性
3.2 input的type属性新增属性值
注意
<input type="file" multiple>默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
3.3 form标签新增属性
4 新增多媒体属性
4.1 视频标签
<video> 标签用来定义视频，它是双标签。
注意
chrome浏览器出于为用户屏蔽广告的观念，只有Chroml浏览器媒体参与度达到合适值或者静音情况下才能让视频的autoplay。- 视频格式支持
MP4、WebM、ogg。
4.2 音频标签
<audio> 标签用来定义音频，它是双标签。
注意
- 音频的自动播放需要通过
JavaScript才能实现。- 视频的宽度或高度其中一个设置了，另外一个就会自适应，所以实际开发中，给视频要么只指定一个宽度，要么只指定一个高度，若同时设置宽高，浏览器会挤出些空白来做装饰。
5 新增全局属性（了解）
6 HTML5兼容性处理
6.1 元信息处理
添加元信息，让浏览器处于最优渲染模式。 具体代码，如下所示：
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">
6.2 html5shiv 处理
使用 html5shiv 让低版本浏览器认识 H5 的语义化标签。 具体代码，如下所示：
<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script>
<![endif]-->
6.3 xml语法扩展
- 语法
lt小于lte小于等于gt大于gte大于等于!逻辑非
- 示例代码：
<!--[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]-->
