HTML5新增标签

main标签

语义化标签

结构性标签

<details>（块元素）

关于文档的细节：

目前只有 Chrome 和 Safari 6 支持 <details> 标签。

<details>

<summary （概要概述简要 标题）>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

效果：

<figure>（块元素）（进度条）

标签规定独立的流内容（图像、图表、照片、代码等等）。

figure 元素的内容应该与主内容不相关，但如果被删除，则不应对文档流产生影响。

<figure>

  <p>黄浦江上的的卢浦大桥</p>

  <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />

</figure>

用作文档中插图的图像，带有一个标题：

<figure>

  <figcaption>黄浦江上的的卢浦大桥</figcaption>

  <img src="shanghai_lupu_bridge.jpg" width="350" eight="234" />

</figure>

<progress> 标签（行内块元素）

<progress> 标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）

<meter> 标签（度量衡）

Value  如果标签内没有数字，那么标量的实际值就是0

Max

Min

可以加；low(低于多少)=”” high(高于多少)=””

<p>

       Christmas is in

       <meter value ="30" min="1" max="366" title="days">

       30 days!

</p>

<meter>标签中的内容可以不包含任何数字，这时最大值会被认为是1；

<meter value="0.25">

<time> 标签（行内元素）

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>

<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

表单标签

Datalist

datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。在ie只能兼容IE10及以上版本

<input list="browsers">
<datalist id="browsers">
         <option value="Safari"> </option>
         <option value="Internet Explorer"> </option>
         <option value="Opera"> </option>
         <option value="Firefox"> </option>
</datalist>

Value的值必须填写

表单域

Input 类型 - email

email 类型用于应该包含 e-mail 地址的输入域。

在提交表单时，会自动验证 email 域的值。

E-mail: <input type="email" name="user_email" />

提示：iPhone 中的 Safari 浏览器支持 email 输入类型，并通过改变触摸屏键盘来配合它（添加 @ 和 .com 选项）。

Input 类型 - URL

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

Homepage: <input type="url" name="user_url" />

提示：iPhone 中的 Safari 浏览器支持 url 输入类型，并通过改变触摸屏键盘来配合它（添加 .com 选项）。

即使不被支持，仍然可以显示为常规的文本域。

Input 类型 -  number

number 类型用于应该包含数值的输入域。

您还能够设定对所接受的数字的限定：

加入step并赋予值可以调整加减的数字

<input type="number" name="points" min="1" max="10" />

提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。

即使不被支持，仍然可以显示为常规的文本域。

Input 类型 - search（搜索）

search 类型用于搜索域，比如站点搜索或 Google 搜索。

search 域显示为常规的文本域。

input 类型 ---tel（电话号码) telphone加入pattern（格式 模式）属性

     定义用于输入电话号码的字段

Input 类型 -  range

在IE浏览器中只有10及10以上版本兼容

range 类型用于应该包含一定范围内数字值的滑动条。

range 类型显示为滑动条。

<input type="range" name="points" min="1" max="10" />

提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。

     即使不被支持，仍然可以显示为常规的文本域。

Input 类型 - color（颜色）IE浏览器不兼容

默认颜色    value=“#ff0000（只能填写16进制全写颜色）

Input 类型 - Date Pickers（日期选择器）IE不兼容

date - 选取日、月、年

month - 选取月、年（火狐不兼容）

week - 选取周和年（火狐不兼容）

time - 选取时间（小时和分钟）（火狐兼容）

datetime - 选取时间、日、月、年（UTC 时间）（谷歌，火狐不兼容）

datetime-local - 选取时间、日、月、年（本地时间）

即使不被支持，仍然可以显示为常规的文本域。

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。

注释：autofocus 属性适用于所有 <input> 标签的类型。

User name: <input type="text" name="user_name"

 autofocus="autofocus" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。

Name: <input type="text" name="usr_name" required="required" />

即使不被支持，仍然可以显示为常规的文本域

多媒体

音频和视频 (Audio + Video)

Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件   加autoplay自动播放 加入muted静音

<audio src="sound.mp3" controls></audio>

<video src="movie.webm" autoplay controls></video>

<video> 标签的属性