HTML5
1 html5新增语义化标签
1. 1 新增页面结构标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|
| header | 页面头部 | | 双标签 | | footer | 页面脚部 | | 双标签 | | nav | 导航条 | | 双标签 | | section | 页面或文章中的一节 | | 双标签 | | aside | 侧边栏 | | 双标签 | | article | 文章，博客，帖子，新闻 | | 双标签 | | main | 页面主要内容 | | 双标签 |
总结：
1.section无法代替div，article和aside被认为是具体的section
2.main标签whatwg标准中没有定义，ie浏览器不支持
3.以上标签本质上就是带有语义的div
1.2 新增状态标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|
| meter | 表示静态的度量 | max,min,value,high,low,optim | 双标签 | | progress | 表示动态的进度 | max,value | 双标签 |
meter和progress的区别
1.meter表示静态的度量，如温度，磁盘容量，电池容量
2.progress表示动态的进度，如进度条
1.3 新增列表标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|
| datalist | 实现搜索框下拉提示 | | 双标签 | | details | 关键字和对关键字的展开解释 | open：无需给值 | 双标签 | | summary | 定义关键字或文字 | | 双标签 |
<input type="text" list="searchList">
<datalist id="searchList">
<option value="abb"></option>
<option value="aaa"></option>
<option value="aac"></option>
<option value="abhelo"></option>
<option value="hellodd"></option>
<option value="a10"></option>
</datalist>
<details>
<summary>如何一夜暴富？</summary>
<p>畴而极受的领鼓孔就后的希服陈洪帮谋我到，方这是气有人情回问，死看下五乏整普联和收的量我事婵是年而安，降人严人死徒的责为够予订在不他着不，人从恼久使杨轻了胆丐禀爻感召预国是一艳，亓措有非准词的后赐是一同尹学，云一别也老航都少二韦杨叹，始归云王贤只落当了觉后。</p>
</details>
1.4 新增注释标签（注音标签）
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|
| ruby | 添加注音 | | 双标签 | | rt | 包裹在ruby的里面，选中注释的内容 | | 双标签 |
欢迎来享受这场<ruby>饕餮<rt>taotie</rt></ruby>盛宴！
1.5 新增文本标签
| 标签名 | 语义和功能 | 属性 | 单标签还是双标签 |
|---|
| mark | 标记标签 | 标记搜索结果 | 双标签 |
2 html5 表单新增功能
2.1 表单控件新增属性
placeholder 用于可输入的表单控件，设置输入前的文字提示
required 用于所有类型表单控件，设置该表单控件必填或必选
autofocus 用于所有类型表单控件，设置自动获取焦点
autocomplete 用于可输入的表单控件，设置浏览器是否显示输入值记录
pattern 用于可输入的表单控件（textarea不可以），设置正则检测输入内容是否满足格式
2.2 input标签type属性新增的值
1 文本输入框类
email,
number(有效属性max，min，step)
url
tel
search
2 范围选择框
range(max min step)
3 颜色选择框
color
4 时间日期选择框
date,month,week,time
2.3 form标签新增属性
novalidate 设置该属性，表单不验证
3 HTML5音视频
3.1 音视频标签
| 标签 | 功能和语义 | 属性 | 单标签还是双标签 |
|---|
| video | 视频 | src：设置视频文件地址
width：设置视频高度
height：设置视频高度
controls：显示控制条
muted：设置默认静音
autoplay：自动播放，无需设置值
loop：循环播放，无需设置值
preload：预先加载，无需加载
poster：设置视频封面 | 双标签 | | audio | 音频 | src：设置视频文件地址
width：设置视频高度
height：设置视频高度
controls：显示控制条
muted：设置默认静音
autoplay：自动播放，无需设置值
loop：循环播放，无需设置值
preload：预先加载，无需加载
| 双标签 | | source | 引入资源（音频或视频） | src：设置音频或视频地址
type：设置音频或视频的类型 | 双标签 |
总结：
1.chrome 规定，音频，视频只有在静音前提下，才能实现自动播放。
2.视频只设置宽或高，另一个自动计算
兼容方案：
<video controls>
<source src="../sources/video/movie.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="../sources/video/movie.ogg" type='video/ogg; codecs="theora, vorbis"'>
<source src="../sources/video/movie.webm" type='video/webm; codecs="vp8, vorbis"'>
您的破浏览器不支持视频播放，请下载最新版的 Chrome
</video>
3.2 浏览器支持的音视频格式
1 视频格式
MP4，webm，ogg
2 音频格式
mp3,wav,ogg
4 HTML5 新增全局属性
hidden 设置该属性元素隐藏，无需设置值
5 HTML5兼容方案
5.1 设置元信息
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="renderer" content="webkit">
5.2 html5shiv.js让IE8以及以下的浏览器支持H5新标签
|