页面结构状态-列表-表单-音视频-全局兼容

1 HTML5 新增语义化标签

1.1 新增页面结构标签

总结： HTML5新增的这些结构标签就是具有语义的 div。

1.2 新增状态标签

meter 和 progress 什么区别？

meter 表示静态的度量，如用量、磁盘容量、温度等； progress 表示进度，如完成多少、进行多少等

1.3 新增列表标签

① datalist 的用法

<input type="text" list="inputData">
<datalist id="inputData">
    <option value="abc"></option>
    <option value="ab"></option>
    <option value="aaab"></option>
    <option value="abcd"></option>
    <option value="bcd"></option>
    <option value="ddd"></option>
</datalist>

② details 的用法

<details>
    <summary>如何一夜暴富？</summary>
    <p>我们大家要学习他毫无自私自利之心的精神。从这点出发，就可以变为大有利于人民的人。一个人能力有大小，但只要有这点精神，就是一个高尚的人，一个纯粹的人，一个有道德的人，一个脱离了低级趣味的人，一个有益于人民的人。</p>
    <p>我们大家要学习他毫无自私自利之心的精神。从这点出发，就可以变为大有利于人民的人。一个人能力有大小，但只要有这点精神，就是一个高尚的人，一个纯粹的人，一个有道德的人，一个脱离了低级趣味的人，一个有益于人民的人。</p>
</details>

1.4 新增注释标签（注音标签）

<p>
    今天学了一个成语
    <ruby>魑<rt>chi</rt></ruby>
    <ruby>魅<rt>mei</rt></ruby>
    <ruby>魍<rt>wang</rt></ruby>
    <ruby>魉<rt>liang</rt></ruby>
</p>

1.5 新增文本标签

注意： mark 推荐用于在搜索结果中标记关键字。

2 HTML5 表单新增功能

2.1 表单控件新增属性

placeholder： 给可以输入的表单控件指定文字提示。 用于文本框、密码框、文本域等。

required： 设置该表单控件必填，否则表单无法提交； 该属性使用的时候无需给值； 适用于所有的表单控件。

autofocus： 设置该表单控件自动获取焦点； 该属性使用的时候无需给值；适用于所有的表单控件。

autocomplete： 设置浏览器是否记录输入框的历史输入； 属性的值可以设置为 on（默认值） 或者 off（不记录）。

pattern： 设置该表单控件的验证规则，值要指定正则表达式，适用于可以输入的表单控件。

2.2 input 标签的 type 属性新增的值

之前学过的 type 属性的值： text、password、radio、checkbox、submit、reset、button 。

HTML 5 新增的 type 属性的值： email、url、number、search、tel、range、color、date、month、week、time、datetime-local

① 文本输入类

<!-- 邮箱输入框 -->
<input type="email" placeholder="请输入邮箱">
<br>
<br>

<!-- URL 输入框 -->
<input type="url" placeholder="请输入网址">
<br>
<br>

<!-- 数字输入框 -->
<input type="number">
<br>
<input type="number" min="10" max="40">
<br>
<input type="number" min="0" max="100" step=".1">
<br>
<br>

<!-- 搜索框 重要的是语义，表现形式与 text 相同-->
<input type="search" placeholder="请输入关键字">
<br>
<br>

<!-- 电话号码输入框  不会进行验证，在移动端会自动弹出数字键盘-->
<input type="tel" placeholder="请输入电话号码">

② 范围选择框

<!--范围选择框 使用 max、min 属性指定最大最小值， value 指定默认值-->
<input type="range" value="0">
<input type="range" max="100" min="0" value="20">

③ 颜色选择框

<input type="color">

④ 时间日期选择类

 <!-- 日期选择器（年月日） -->
<input type="date">
<br>

<!-- 月选择框（年月） -->
<input type="month">
<br>

<!-- 星期选择框（选择哪一年的第几周） -->
<input type="week">
<br>

<!-- 时间选择器（几点几分） -->
<input type="time">
<br>

<!-- 日期时间选择器（年月日 时分） -->
<input type="datetime-local">

2.3 form 标签新增属性

novalidate： 用于设置表单不需要验证；该属性无需给值。

3 HTML5 音视频

3.1 音视频标签

注意：

1. 视频或音频能够自动播放的前提是，设置静音；这是浏览器做出的规定。
2. 默认情况下，点击播放按钮的时候，才会下载视频或音频文件，如果设置了 preload 属性，页面一打开就开始下载视频或音频文件。

3.2 浏览器支持的音视频格式

① 视频格式

mp4	所有浏览器都支持，推荐
webm
ogg

② 音频格式

mp3	所有的浏览器都支持，推荐
wav
ogg

4 HTML5 新增全局属性

contenteditable 属性： 设置元素中文本内容可以编辑；值：yes 或者 no。

hidden 属性： 隐藏元素，无需给值。

5 HTML5 兼容性方案

5.1 设置元信息

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

5.2 html5shiv.js 让IE8以及以下的浏览器支持H5新标签

<!-- 导入js文件，让IE8以下以下的浏览器支持H5新标签 -->
<!--[if lt ie 9]>
<script src="js/html5shiv.min.js"></script>
<![endif]-->