HTML5

1.什么是HTML5?

HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML 4.01和XHTML 1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。

2.HTML5的发展历程?

图片1.png

3.语义化标签

![Uploading 图片3_292855.jpg . . .] 》》》》》》 图片3.jpg

4.结构性标签

<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>
  ![](shanghai_lupu_bridge.jpg)
</figure>

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

<figure>
  <figcaption>黄浦江上的的卢浦大桥</figcaption>
  ![](shanghai_lupu_bridge.jpg)
</figure>

<time>

<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>

<section>

定义文档中的节

<section>
  <h1>PRC</h1>
  <p>The People's Republic of China was born in 1949...</p>
</section>

<progress>

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

<progress value="22" max="100">
</progress>

<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>

<meter>

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

<p>
       Christmas is in
       <meter value ="30" min="1" max="366" title="days">
       30 days!
</p>

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

5.表单标签

<Datalist>

datalist 与 input 的新属性list一起使用可以创建组合框，双击input的时候可以提供选项让用户选择，类似历史记录一样。

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

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 类型用于应该包含数值的输入域。
您还能够设定对所接受的数字的限定：
Points: <input type="number" name="points" min="1" max="10" />
提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。 即使不被支持，仍然可以显示为常规的文本域。

Input 类型 - range

range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
<input type="range" name="points" min="1" max="10" />
提示：iPhone 中的 Safari 浏览器支持 number 输入类型，并通过改变触摸屏键盘来配合它（显示数字）。即使不被支持，仍然可以显示为常规的文本域。

Input 类型 - Date Pickers（日期选择器）

date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）
Date: <input type="date" name="user_date" />
即使不被支持，仍然可以显示为常规的文本域。

Input 类型 - search（搜索）

search 类型用于搜索域，比如站点搜索或 Google 搜索。
search 域显示为常规的文本域。

Input 类型 - color（搜索）

默认颜色 value=“#ff0000”

autofocus 属性

autofocus 属性规定在页面加载时，域自动地获得焦点。
注释：autofocus 属性适用于所有 <input> 标签的类型。
User name: <input type="text" name="user_name" autofocus="autofocus" />

placeholder 属性

placeholder 属性提供一种提示（hint），描述输入域所期待的值。
注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
<input type="search" name="user_search" placeholder="Search" />

required 属性

required 属性规定必须在提交之前填写输入域（不能为空）。
Name: <input type="text" name="usr_name" required="required" />
即使不被支持，仍然可以显示为常规的文本域。

6.多媒体

音频和视频 (Audio + Video)

Audio和Video是首批添加到HTML规范中的标签。它们的加入使得我们可以像插入图片一样来处理音频及视频文件。
<audio src="sound.mp3" controls></audio>

图片6.png
<video src="movie.webm" autoplay controls></video> 图片5.png

ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

如需在 HTML5 中显示视频，所有需要的是：

<video src="movie.ogg" controls="controls"> </video>
tip：control 属性供添加播放、暂停和音量控件。

视频兼容

上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，视频文件必须是 MPEG4 类型。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Internet Explorer 8 不支持 video 元素。在 IE 9 中，将提供对使用 MPEG4 的 video 元素的支持。

如需在 HTML5 中播放音频，您所有需要的是：

<audio src="song.ogg" controls="controls">
tip：control 属性供添加播放、暂停和音量控件。

音频兼容

上面的例子使用一个 Ogg 文件，适用于Firefox、Opera 以及 Chrome 浏览器。
要确保适用于 Safari 浏览器，音频文件必须是 MP3 或 Wav 类型。
audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

Internet Explorer 8 不支持 audio 元素。在 IE 9 中，将提供对 audio 元素的支持。