HTML5新增加

新增语义化标签

新增布局标签

<header>整个页面，或部分区域的头部

<footer>整个页面，或部分区域的尾部

<nav>导航

<article>文章、帖子、杂志、新闻、博客、评论等

<section>页面中的某段文字，或文章中的某段文字（里面文字通常会包含标题）

<aside>侧边栏

<main>文档主要内容（IE不支持）几乎不用

<hgroup>包裹连续标题（W3C将其删除）

article和section：

article里面可以有多个section;section强调分段或分块，如果想将一块内容分成几段，可使用section元素；article比section更强调独立性，一块内容如果比较独立、比较完整，应该使用article

新增状态标签

<meter> 定义已知范围内的标量测量，如电量、磁盘用量等

属性：high 规定高值

low 规定低值

max 最大值

min 最小值

optimum 最优值

value 当前值

<progress> 显示某个任务完成的进度指示器，一般用于表示进度条、、双标签

属性：max 规定目标值

value当前值

新增列表标签

<datalist>用于搜索框的关键字提示

<inpput type="text" list="mydata">

<datalist id="mydata">

      <option value="xx">xx</option>

</datalist>

<details>用于展示问题和答案，或对专有名词进行解释

<summary>写在details里边，用于指定问题或专有名词

<details>

    <summary>如何走上人生巅峰？</summary>

    <p>一步步走</p>

</details>

新增文本标签

<ruby>需要注音的文字<rt>注音</rt></ruby>文本注音

<mark></mark>文本标记

表单相关的新增

新增表单控件属性

placeholder 提示文字，不是默认值，value是默认值，适用于文字输入类的表单控件

required 表示该项是必填项，适用于除按扭外其他表单控件

autofocus 自动获取焦点，适用于所有表单控件

autocomplete 自动完成，可以设置为on或offer，适用于文字输入类的表单控件，保留之前提交过的信息，后边可直接选择

pattern 填写正则表达式，适用于文本输入类表单控件，多行输入不可用，且空的输入框不会验证，往往与required配合。提交前判断输入是否符合正则表达式的要求，若不符合无法提交。

 input新增的type属性

email 邮箱类型的输入框，表单提交时验证格式，输入为空则不验证

url  url类型的输入框，表单提交时验证格式，输入为空则不验证

number  数字类型的输入框，表单提交时验证格式，输入为空则不验证

search  搜索类型的输入框，表单提交时不会验证格式

tel 电话类型的输入框，移动端使用时，会唤起数字键盘

range 范围选择框，默认值为50，提交时不验证

color 颜色选择框，默认黑色，提交时不验证

date 日期选择框，默认空，提交时不验证

month 月份选择框，默认空，提交时不验证

week 周选择框，默认空，提交时不验证

time 时间选择框，默认空，提交时不验证

datetime-local 日期+时间选择框，默认空，提交时不验证

新增多媒体标签

新增视频标签

<video>双标签

属性：src：URL地址 视频地址

width、height:像素值

controls  向用户显示视频控件（播放、暂停按钮）

muted 视频静音

autoplay 视频自动播放

loop 循环播放

poster:URL地址 视频封面

preload:auto/metadata/none 视频预加载

音频标签

<audio>

属性：src：URL地址 视频地址

controls  向用户显示音频控件（播放、暂停按钮）

muted 静音

autoplay 音频自动播放

loop 循环播放

preload:auto/metadata/none 音频预加载

H5兼容性处理

法一：添加元信息，让浏览器处于最优渲染模式

<!--设置IE总是使用最新的文档模式进行渲染-->

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

<!--优先使用webkit内核进行渲染，针对360等双核浏览器-->

<meta name="renderer" content="webkit">

法二：使用html5shiv让低版本浏览器认识H5语义化标签

<!--[if lt ie 9]>

<script src="html5shiv.js"></script>

<![endif]-->