HTML5规范于2014年10月29日由万维网联盟正式宣布，HTML是万维网最核心的超文本标记语言。万维网不等同于互联网，但它是依靠互联网运行的服务之一，万维网又简写为www，它可以实现在互联网的帮助下，访问由许多互相链接的超文本组成的系统。现代的浏览器都支持 HTML5。

目录

1.视频（video）

1.1 使用方法

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>

<video> 元素提供了播放、暂停和音量控件来控制视频。

同时 <video> 元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。

<video> 与 </video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。

<video> 元素支持多个 <video> 元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。

1.2 使用DOM控制

HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。

<video> 和 <audio> 元素的方法、属性和事件可以使用JavaScript进行控制.

其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。

1.3 video标签

标签	描述
&lt:video>	定义一个视频
<source>	定义多种媒体资源,比如<video> 和<audio>
<track>	定义在媒体播放器文本轨迹

2.音频（Audio）

通过使用HTML5中的audio功能，可以实现与flash相同的功能，即回放、跳转、缓冲等。

2.1 使用方法

<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

control 属性供添加播放、暂停和音量控件。
在<audio> 与 </audio> 之间你需要插入浏览器不支持的<audio>元素的提示文本 。
<audio> 元素允许使用多个 <source> 元素. <source> 元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。

2.2 audio标签

标签	描述
<audio>	定义了声音内容
<source>	规定了多媒体资源，可以是多个，在<video>与<audio>标签中使用

3. Input（类型）

注意：并不是所有的主流浏览器都支持新的input类型，不过已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。

3.1 color

color 类型用在input字段主要用于用户选取颜色。

选择你喜欢的颜色: <input type="color" name="favcolor">

3.2 date

date 类型允许用户从一个日期选择器选择一个日期。

生日: <input type="date" name="bday">

3.3 datetime

datetime 类型允许用户选择一个日期（UTC 时间）。

生日 (日期和时间): <input type="datetime" name="bdaytime">

3.4 datetime-local

datetime-local 类型允许用户选择一个日期和时间 (无时区)。

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

3.5 email

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值是否合法有效。

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

3.6 month

month 类型允许用户选择一个月份。

生日 (月和年): <input type="month" name="bdaymonth">

3.7 number

number 类型用于应该包含数值的输入域。用户还能够设定对所接受的数字的限定。

数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

使用属性来规定对数字类型的限定：

• max- 规定允许的最大值
• min - 规定允许的最小值
• step - 规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等）
• value - 规定默认值

3.8 range

range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

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

使用属性来规定对数字类型的限定：

• max - 规定允许的最大值
• min - 规定允许的最小值
• step - 规定合法的数字间隔
• value - 规定默认值

3.9 search

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

Search Google: <input type="search" name="googlesearch">

3.10 tel

定义输入电话号码字段。

电话号码: <input type="tel" name="usrtel">

3.11 time

time 类型允许你选择一个时间。

选择时间: <input type="time" name="usr_time">

3.12 url

url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

添加您的URL: <input type="url" name="homepage">

3.13 week

week 类型允许你选择周和年。

选择周: <input type="week" name="week_year">

4.新表单元素

注意：不是所有的浏览器都支持HTML5 新的表单元素。

4.1 datalist

<datalist> 元素规定输入域的选项列表。
<datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。
使用 <input> 元素的列表属性与 <datalist> 元素绑定。

使用实例：

<input list="browsers">

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

4.2 keygen

<keygen> 元素的作用是提供一种验证用户的可靠方法。
<keygen>标签规定用于表单的密钥对生成器字段。
当提交表单时，会生成两个键，一个是私钥，一个公钥。

私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。

使用实例：

<form action="demo_keygen.asp" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

4.3 output

<output> 元素用于不同类型的输出，比如计算或脚本输出。

使用实例：

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>

5.新表单属性

5.1 <form>新属性

• autocomplete
• novalidate

5.2 <input>新属性

• autocomplete
• autofocus
• form
• formaction
• formenctype
• formmethod
• formnovalidate
• formtarget
• height and width
• list
• min and max
• multiple
• pattern (regexp)
• placeholder
• required
• step

5.3 autocomplete 属性（<form> / <input>）

autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

提示：autocomplete 属性有可能在 form元素中是开启的，而在input元素中是关闭的。

使用实例：HTML form 中开启 autocomplete (一个 input 字段关闭 autocomplete ).

<form action="demo-form.php" autocomplete="on">
 First name:<input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 E-mail: <input type="email" name="email" autocomplete="off"><br>
 <input type="submit">
</form> 

5.4 novalidate 属性（<form>）

novalidate 属性的一个boolean 属性。novalidate 属性规定在提交表单时不应该验证 form 或 input 域。

使用实例：无需验证提交的表单数据

<form action="demo-form.php" novalidate>
 E-mail: <input type="email" name="user_email">
 <input type="submit">
</form>

5.5 autofocus 属性（<input>）

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

使用实例：

First name:<input type="text" name="fname" autofocus>

5.6 form 属性（<input>）

form 属性规定输入域所属的一个或多个表单。如需引用一个以上的表单，需要使用空格分隔的列表。

使用实例：

<form action="demo-form.php" id="form1">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
</form>

Last name: <input type="text" name="lname" form="form1">

“Last name” 字段没有在form表单之内，但它也是form表单的一部分。

5.7 formaction 属性（<input>）

formaction 属性用于描述表单提交的URL地址。
formaction 属性会覆盖<form> 元素中的action属性。formaction 属性用于 type=”submit” 和 type=”image”。

使用实例：

<form action="demo-form.php">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit"><br>
 <input type="submit" formaction="demo-admin.php"
  value="Submit as admin">
</form>

5.8 formenctype 属性（<input>）

formenctype 属性描述了表单提交到服务器的数据编码 (只对form表单中 method=”post” 表单)。该属性与 type=”submit” 和 type=”image” 配合使用。formenctype 属性覆盖 form 元素的 enctype 属性。

使用实例：

<form action="demo-post_enctype.php" method="post">
 First name: <input type="text" name="fname"><br>
 <input type="submit" value="Submit">
 <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

5.9 formmethod 属性（<input>）

formmethod 属性定义了表单提交的方式。该属性可以与 type=”submit” 和 type=”image” 配合使用。
formmethod 属性覆盖了 <form> 元素的的method 属性。

使用实例：重新定义表单提交方式实例

<form action="demo-form.php" method="get">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit">
 <input type="submit" formmethod="post" formaction="demo-post.php"
  value="Submit using POST">
</form>

5.10 formnovalidate 属性（<input>）

novalidate 属性是一个 boolean 属性。novalidate属性描述了 <input> 元素在表单提交时无需被验证。formnovalidate 属性会覆盖 <form> 元素的novalidate属性。formnovalidate 属性与type=”submit”一起使用。

使用实例：两个提交按钮的表单(使用与不适用验证 )

<form action="demo-form.php">
 E-mail: <input type="email" name="userid"><br>
 <input type="submit" value="Submit"><br>
 <input type="submit" formnovalidate value="Submit without validation">
</form>  

5.11 formtarget 属性（<input>）

formtarget 属性指定一个名称或一个关键字来指明表单提交数据接收后的展示。formtarget 属性覆盖 <form>元素的target属性。formtarget 属性与type=”submit” 和 type=”image”配合使用。

使用实例：两个提交按钮的表单, 在不同窗口中显示

<form action="demo-form.php">
 First name: <input type="text" name="fname"><br>
 Last name: <input type="text" name="lname"><br>
 <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

5.12 height 和 width 属性（<input>）

height 和 width 属性规定用于 image 类型的 <input> 标签的图像高度和宽度。height 和 width 属性只适用于 image 类型的<input> 标签。

图像通常会同时指定高度和宽度属性。如果图像设置高度和宽度，图像所需的空间 在加载页时会被保留。如果没有这些属性， 浏览器不知道图像的大小，并不能预留 适当的空间。图片在加载过程中会使页面布局效果改变 （尽管图片已加载）。

使用实例：定义了一个图像提交按钮, 使用了 height 和 width 属性

<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">

5.13 list 属性（<input>）

list 属性规定输入域的 datalist。datalist 是输入域的选项列表。

使用实例：

<input list="browsers">

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

5.14 min 和 max 属性（<input>）

min、max 和 step 属性用于为包含数字或日期的 input 类型规定限定（约束）。

min、max 和 step 属性适用于以下类型的 <input> 标签：date pickers、number 以及 range。

使用实例：

Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

5.15 multiple 属性（<input>）

multiple 属性是一个 boolean 属性。multiple 属性规定<input> 元素中可选择多个值。
multiple 属性适用于以下类型的<input> 标签：email 和 file。: email, and file.

使用实例：上传多个文件

Select images: <input type="file" name="img" multiple>

5.16 pattern 属性（<input>）

pattern 属性描述了一个正则表达式用于验证<input> 元素的值。
pattern 属性适用于以下类型的<input> 标签: text, search, url, tel, email, 和 password.
是用来全局 title 属性描述了模式.

使用实例：显示一个只能包含三个字母的文本域（不含数字及特殊字符）

Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">

5.17 placeholder 属性（<input>）

placeholder 属性提供一种提示（hint），描述输入域所期待的值。简短的提示在用户输入值前会显示在输入域上。

placeholder 属性适用于以下类型的<input> 标签：text, search, url, telephone, email 以及 password。

使用实例：

<input type="text" name="fname" placeholder="First name">

5.18 required 属性（<input>）

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

required 属性适用于以下类型的<input> 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

使用实例：不能为空的input字段

Username: <input type="text" name="usrname" required>

5.19 step 属性（<input>）

step 属性为输入域规定合法的数字间隔。如果 step=”3”，则合法的数是 -3,0,3,6 等。step 属性可以与 max 和 min 属性创建一个区域值。

step 属性与以下type类型一起使用: number, range, date, datetime, datetime-local, month, time 和 week。

使用实例：

<input type="number" name="points" step="3">