HTML 5 视频标签<video>
<video width="320" height="240" controls="controls">
<source src="/i/movie.ogg" type="video/ogg">
<source src="/i/movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
上面的例子使用一个Ogg文件，适用于Firefox Opera以及Chrome浏览器。
要确保适用于Safari浏览器，视频文件必须是MPEG4类型。
video元素允许多个source元素。source元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式
Internet Explorer 8不支持video元素。在IE 9中，将提供对使用MPEG4的video元素的支持。、
<video>标签的属性
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay" ，则忽略该属性。
src url 要播放的视频的URL。
width pixels 设置视频播放器的宽度。
HTML 5<audio> 标签
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>
<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>
上面的例子使用一个Ogg文件，适用于Firefox、Opera以及Chrome浏览器。
要确保适用于Safari浏览器，音频文件必须是MP3或Wav类型。
audio元素允许多个source元素。source元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
Internet Explorer 8不支持audio元素。在IE 9中，将提供对audio元素的支持。
<audio>标签的属性
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay" ，则忽略该属性。
src url 要播放的视频的URL。
HTML 5 <source> 标签
定义和用法
<source> 标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
实例
拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）：
<audio controls><source src="horse.ogg" type="audio/ogg"><source src="horse.mp3" type="audio/mpeg">Your browser does not support the audio element. </audio>
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <source> 标签。
注释：Internet Explorer 8 以及更早的版本不支持 <source> 标签。
属性
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| media | media query | 规定媒体资源的类型。 |
| src | url | 规定媒体文件的 URL。 |
| type | numeric value | 规定媒体资源的 MIME 类型。 |
HTML 5 Canvas 标签
HTML 5的canvas元素使用JavaScript在网页上绘制图像
JavaScript使用id来寻找canvas元素：
var c=document.getElementById("myCanvas");
然后，创建context对象：
var cxt=c.getContext("2d");
getContext("2d")对象是内建的HTML 5对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方
法。
下面的两行代码绘制一个红色的矩形：
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle方法将其染成红色，fillRect方法规定了形状、位置和尺寸。
绘制矩形
<canvas id="myCanvas" width="200" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
绘制矩形
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
</script>
绘制圆形
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,
Math.PI*2,true);
cxt.closePath();
cxt.fill();
</script>
颜色渐变
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
</script>
把一幅图像放置到画布上
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);
</script>
HTML 5 <embed> 标签<embed> 标签定义嵌入的内容，比如插件。
注释：<embed> 标签必须有 src 属性。
提示：您无法在开始标签和结束标签之间写文本，来说明旧式的浏览器不支持该标签，就像 <audio> 和 <video>。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| height | pixels | 设置嵌入内容的高度。 |
| src | url | 嵌入内容的 URL。 |
| type | type | 定义嵌入内容的类型。 |
| width | pixels | 设置嵌入内容的宽度。 |
HTML 5 <keygen> 标签
定义和用法
<keygen> 标签规定用于表单的密钥对生成器字段。
当提交表单时，私钥存储在本地，公钥发送到服务器。
带有 keygen 字段的表单：
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name" />
Encryption: <keygen name="security" />
<input type="submit" />
</form>
浏览器支持
所有主流浏览器都支持 <keygen> 标签，除了 Internet Explorer 和 Safari。
HTML 4.01 与 HTML 5 之间的差异
keygen 是 HTML 中的新元素。
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | disabled | 使 keygen 字段在页面加载时获得焦点。 |
| challenge | challenge | 如果使用，则将 keygen 的值设置为在提交时询问。 |
| disabled | disabled | 禁用 keytag 字段。 |
| form | formname | 定义该 keygen 字段所属的一个或多个表单。 |
| keytype | rsa | 定义 keytype。rsa 生成 RSA 密钥。 |
| name | fieldname | 定义 keygen 元素的唯一名称。 name 属性用于在提交表单时搜集字段的值。 |
HTML 5 <meter> 标签
<!DOCTYPE html>
<html>
<body>
<meter VALUE="15" min="0" max="20"></meter>
<meter value="0.6">60%</meter>
</body>
</html>
提示和注释
注释：必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| high | number | 定义度量的值位于哪个点，被界定为高的值。 |
| low | number | 定义度量的值位于哪个点，被界定为低的值。 |
| max | number | 定义最大值。默认值是 1。 |
| min | number | 定义最小值。默认值是 0。 |
| optimum | number | 定义什么样的度量值是最佳的值。 如果该值高于 "high" 属性，则意味着值越高越好。 如果该值低于 "low" 属性的值，则意味着值越低越好。 |
| value | number | 定义度量的值。 |
<progress> 标签定义运行中的进度（进程）。
可以使用 <progress> 标签来显示 JavaScript 中耗费时间的函数的进度。
<!DOCTYPE html>
<html>
<body>
下载进度：
<progress value="11" max="100">
</progress>
<p><b>注释：</b>Internet Explorer 9 以及更早的版本不支持 <progress> 标签。</p>
</body>
</html>
浏览器兼容
Internet Explorer 10, Firefox, Opera, Chrome 以及 Safari 6 支持 <progress> 标签。
注释：Internet Explorer 9 以及更早的版本不支持 <progress> 标签。
提示和注释
提示：请使用 <progress> 标签来显示下载的进度。
属性
| 属性 | 值 | 描述 |
|---|---|---|
| max | number | 定义完成的值。 |
| value | number | 定义进程的当前值。 |
HTML 5 <ruby> 标签
<ruby> 标签定义 ruby 注释（中文注音或字符）。
在东亚使用，显示的是东亚字符的发音。
与 <ruby> 以及 <rt> 标签一同使用：
ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
实例
一个 ruby 注释：
<ruby> 漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt> </ruby>
提示和注释
提示：支持 "ruby" 元素的浏览器不会显示 "rp" 元素的内容。
HTML 5 <small> 标签
定义和用法
<small> 标签将旁注 (side comments) 呈现为小型文本。
免责声明、注意事项、法律限制或版权声明的特征通常都是小型文本。小型文本有时也用于新闻来源、许可要求。
对于由 em 元素强调过的或由 strong 元素标记为重要的文本，small 元素不会取消对文本的强调，也不会降低这些文本的重要性。
定义列表项中的注释（小型文本）：
<dl><dt>单人间</dt><dd>399 元<small>含早餐，不含税</small></dd><dt>双人间</dt><dd>599 元<small>含早餐，不含税</small></dd> </dl>
浏览器支持
所有主流浏览器均支持 <small> 标签。
HTML 4.01 与 HTML5 之间的差异
实际运用时没有区别。在 HTML 4.01 中，small 元素显示为更小的文本。在 HTML5 中，small 元素定义旁注信息，并显示为更小的文本。
HTML5 <mark> 标签
定义和用法
<mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。
<!DOCTYPE HTML>
<html>
<STYLE>
mark{}
</STYLE>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
浏览器兼容
Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <mark> 标签。
注释：Internet Explorer 8 以及更早的版本不支持 <mark> 标签。
HTML 5<details> 标签定义和用法
<details> 标签用于描述文档或文档某个部分的细节。
<detailsopen="open"> <summary>Copyright 2011.</summary> <p>All pages and graphics on this web site are the property of W3School.</p> </details>
与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。
<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
浏览器兼容
目前只有 Chrome 和 Safari 6 支持 <details> 标签。
HTML5 <summary> 标签
定义和用法
<summary> 标签包含 details 元素的标题，"details" 元素用于描述有关文档或文档片段的详细信息。
浏览器支持
只有 Chrome 以及 Safari 6 支持 <summary> 标签。
提示和注释
提示：请与 <details> 标签一起使用。标题是可见的，当用户点击标题时会显示出详细信息。
注释："summary" 元素应该是 "details" 元素的第一个子元素。
火狐不支持显示
谷歌支持显示
点击显示
HTML5 <time> 标签
实例
如何定义时间和日期：
<p>我们在每天早上<time>9:00</time>开始营业。</p><p>我在<time datetime="2008-02-14">情人节</time>有个约会。</p>
浏览器支持
目前所有主流浏览器都不支持 <time> 标签。
<time> 标签不会在任何浏览器中呈现任何特殊效果
定义和用法
<time> 标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。
该元素能够以机器可读的方式对日期和时间进行编码，这样，举例说，用户代理能够把生日提醒或排定的事件添加到用户日程表中，搜索引擎也能够生成更智能的搜索结果。
属性
new : HTML5 中的新属性。
| 属性 | 值 | 描述 |
|---|---|---|
| datetime | datetime | 规定日期 / 时间。否则，由元素的内容给定日期 / 时间。 |
| pubdate | pubdate | 指示 <time> 元素中的日期 / 时间是文档（或 <article> 元素）的发布日期。 |
