HTML5

1 HTML5 新增标签

1.1 新增页面布局标签（最重要）

标签名	语义和功能	属性	单标签还是双标签
header	页头		双标签
footer	页脚		双标签
nav	导航条		双标签
section	页面中一部分或者文章一小节		双标签
aside	侧边栏		双标签
article	文章、新闻、博客、评论等		双标签
main	页面主要内容区域		双标签

注意： IE 浏览器不支持 main 标签！

1.2 新增状态标签（了解）

标签名	语义和功能	属性	单标签还是双标签
meter	表示静态地度量	max、min、value、low、high 等	双标签
progress	表示动态地进度	max、value	双标签

meter 和 progress 什么区别：

1. meter 表示静态地度量，如温度、湿度、磁盘容量、电池电量等
2. progess 表示动态地进度，如进度条

1.3 新增注音标签

标签名	语义和功能	属性	单标签还是双标签
ruby	注音包裹元素		双标签
rt	写具体的注音		双标签

<ruby>
    饕餮
    <rt>taotie</rt>
</ruby>

**注意：**如果真的需要大量的注音内容，可以使用 JavaScript 库来实现注音效果，例如 Pinyin.js 或者 Zhuyin.js。这些库可以将文本转换为注音，然后将注音插入到 HTML 中。个别少量生字可以使用’‘ruby’'解决。

1.4 新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	标记		双标签

mark 标签可以用于对搜索结果列表进行标记

2 HTML5 表单新增功能

2.1 表单控件新增属性

旧标准存在的表单控件属性：

name
value
disabled

新标准增加的表单控件属性：

placeholder		输入框、文本域的提示文字
required		必填或者必选，否则表单无法提交
autofocus		自动获取焦点
autocomplete	是否显示输入记录，值:on（默认值）、off
pattern			值是正则表达式，对文本框或文本域进行验证，表单提交的时候验证			
form			该属性的值可以指定form标签的id，与form标签关联，表单控件可以写在form标签的外面

2.2 input 标签的 type 属性新增的值(新增的表单控件类型)

旧标准 input 标签 type 属性的值：

text、password、radio、checkbox、submit、reset、button

① 输入框类（5个）

<!-- 邮箱 提交表单验证 -->
<input type="email" placeholder="请输入邮箱">

<!-- URL 提交表单验证-->
<input type="url" placeholder="请输入网址">

<!-- 数字 非数字无法输入，提交表单验证数字范围 -->
<input type="number" placeholder="请输入数字">
<input type="number" max="16" min="-10" placeholder="请输入数字">
<input type="number" step=".1" min=".1" placeholder="小数">

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

<!-- 搜索框 没有验证功能-->
<input type="search" placeholder="搜索框">

② 范围选择框（1个）

<input type="range" name="num01">
<input type="range" max="1000" min="-1000" name="num02" value="-1000">
<input type="range" max="10" min="0" step="2" name="num03">

③ 颜色选择框（1个）

<input type="color">

④ 日期时间选择框类（5个）

<!-- 选择年月日 -->
<input type="date">
<!-- 选择年月 -->
<input type="month">
<!-- 选择年周 -->
<input type="week">
<!-- 选择时间 -->
<input type="time">
<!-- 选择日期和时间 -->
<input type="datetime-local">

2.3 form 标签新增属性

novalidate		让表单不进行验证，该属性不要值

2.4 输入框的搜索提示

<input type="search" list="searchData">
<datalist id="searchData">
    <option value="hello world"></option>
    <option value="hello xiaole"></option>
    <option value="nihao"></option>
    <option value="ab"></option>
    <option value="aaa"></option>
    <option value="abc"></option>
    <option value="abb"></option>
</datalist>

3 HTML5 音视频

3.1 音视频标签

标签名	功能和语义	属性	单标签还是双标签
video	引入视频	src：设置视频地址。 width：设置视频宽度。 height：设置视频高度。 controls：显示控制条，不需要值 muted：静音，不需要值 autoplay：自动播放，不需要值 loop：循环播放，不需要值 preload：预先加载，不需要值 poster：设置视频封面图片地址。	双标签
audio	引入音频	scr：设置音频地址。 constrols：显示控制条，不需要值 muted：静音，不需要值 autoplay：自动播放，不需要值 loop：循环播放，不需要值 preload：预先加载，不需要值	双标签
source	引入音频或视频	src：设置音频或视频文件的地址。 type：设置音频或视频文件的类型	单标签

<video controls>
  <source src="foo.webm" type="video/webm">
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mov" type="video/quicktime">
  很抱歉，您的浏览器不支持HTML5 视频
</video>

注意：

1. 视频自动播放生效的前提是，设置静音。
2. 音频不允许自动播放。

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

① 视频格式

mp4
webm
ogg

② 音频格式

mp3
wav
ogg

4 HTML5 新增全局属性

旧标准中的全局属性：

title
lang
id
class
style

HTML5 标准新增的全局属性

hidden		隐藏元素，该属性不要值

a 标签新增的属性：

download	如果设置了该属性，不论目标文件浏览器是否能打开，点击超链接都会下载。该属性不需要值。

注意： 目标文件与当前文件在同一服务器下，才能实现点击下载！

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新标签

<!--[if lt ie 9]>
	<script src="../js/html5shiv.js"></script>
<![endif]-->