【HTML5新特性】

一、语义标签

1. hearder，文档的头部区域
2. footer，文档的尾部区域
3. nav，文档导航区域
4. section，文档中的节
5. article，文章
6. aside，页面意外的内容，类似于右下角工具栏、滑倒顶部按钮
7. details，用户可以看到或隐藏的额外内容
8. summary，标签包含details元素的标题

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

10. dialog，对话框或窗口
11. figure，规定独立的流内容（图像、图表、照片、代码等等）
12. main，文档主内容
13. mark，带有记号的文本

<p>mark是带有<mark>记号</mark>的文本.</p>

14. time，日期/时间，主要针对机器对日期和时间进行编码

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

二、增强型表单

1. input特性

1.1 color

<input type="color" name="" id=""> // 用于选取颜色，拾色器

1.2 date

<input type="date" name="" id=""> // 日期选择器

1.3 datetime

<time datetime="YYYY-MM-DDThh:mm:ssTZD"> // 目前所有主流浏览器都不支持

1.4 datetime-local

选取日期（无时区）.不是W3C推荐的控件

1.5 month

<input type="month" name="" id=""> // 月份选择器

1.6 week

<input type="week" name="" id=""> // 周选择器

1.7 time

<input type="time" name="" id=""> // 时间选择器

1.8 email

<form>
  <input type="email">
  <input type="submit" value="提交">
</form> // e-mail地址的输入域，自动验证email格式

1.9 number

<input type="number" name="" id=""> 
// 数字输入框，仅能输入数字、e
// 解决办法。在input上加入
// onKeypress=”return (/[\d]/.test(String.fromCharCode(event.keyCode)))” 

1.10 url

<input type="url" name="" id=""> // url输入框

1.11 tel

<input type="tel" name="" id=""> // 电话号码输入框，最明显的是可以在移动端提供优化后的自定义键盘

1.12 search

<input type="search" name="" id=""> // 搜索框，可以关联回车

1.13 range

<input type="range" name="" id=""> // 滑块控件,可获取具体值

2. 五个表单元素

2.1 datalist

// 标签定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值
<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

2.2 progress

// 标示任务的进度（进程）
<progress value="22" max="100"></progress> 

2.3 meter

// 已知范围或分数值内的标量测量。也被称为 gauge（尺度）
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
// Internet Explorer 不支持

2.4 keygen

// 规定用于表单的密钥对生成器字段
// 当提交表单时，私钥存储在本地，公钥发送到服务器。
<form action="/example/html5/demo_form.asp" method="get">
	用户名：<input type="text" name="usr_name" />
	加密：<keygen name="security" />
	<input type="submit" />
</form>
// 所有主流浏览器都支持 <keygen> 标签，除了 Internet Explorer 和 Safari。

2.5 output

// 不同类型的输出，比如脚本的输出
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
	<input type="range" id="a" value="50">
	<input type="number" id="b" value="50">
	<output name="x" for="a b"></output>
</form>

3. 表单属性

3.1 placehoder

// 输入框默认提示文字
<input type="text" placeholder="你好我的老八" name="" id="">
// 在CSS中通过 ::placeholder进行样式控制,可能存在css hack

3.2 required

// 要求输入的内容是否可为空
<form action="demo_form.asp" method="get">
  Name: <input type="text" name="usr_name" required="required" />
  <input type="submit" />
</form>
// required 属性适用于以下 <input> 类型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

3.3 pattern

// 规定输入字段的值的模式或格式
// 只能包含三个字母的文本字段（数字或特殊字符）：
<input type="text" name="country_code" pattern="[A-z]{3}"
  title="pattern" />
// pattern 属性适用于以下 <input> 类型：text, search, url, telephone, email 以及 password 

3.4 min/max

// 属性规定输入字段所允许的最小值/最大值
<input type="number" name="points" min="0" max="10" />
// max 和 min 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

3.5 step

// 输入字段的合法数字间隔,（假如 step="3"，则合法数字应该是 -3、0、3、6，以此类推）
<form action="" method="get">
  <input type="number" name="points" step="3" />
  <input type="submit" />
</form>
// step 属性适用于以下 <input> 类型：number, range, date, datetime, datetime-local, month, time 以及 week。

3.6 height/wdith

3.7 autofocus

// 自动获得焦点
<input type="text" name="fname" autofocus="autofocus" />

3.8 multiple

// 可选择多个值
<input type="file" name="img" multiple="multiple" />
// multiple 属性使用欧冠与以下 <input> 类型：email 和 file。

三、音频和视频

音频：audio

<audio src="/i/horse.ogg" controls="controls">
   	你的浏览器不支持此标签
</audio>

视频：video

<video src="/i/movie.ogg" controls="controls">
	你的浏览器不支持此标签
</video>

四、canvas

w3school
菜鸟

五、SVG

w3school

六、地理位置

参考

七、拖放API

菜鸟教程

八、web Worker

阮一峰 Web Worker 使用教程

九、web Storage

阮一峰 浏览器端数据储存机制

十、websocket

阮一峰 WebSocket 教程