《HTML 5与CSS 3 权威指南（第4版·上册）》 —2.2.2　新增的其他元素

2.2.2　新增的其他元素

除了结构元素外，在HTML 5中，还新增以下元素。

（1）video元素

video元素用于定义视频，比如电影片段或其他视频流。

HTML 5中的代码示例：

<video src="movie.ogg" controls="controls">video元素</video>

HTML 4中的代码示例：

<object type="video/ogg" data="movie.ogv">

       <param name="src" value="movie.ogv">

</object>

（2）audio元素

audio元素用于定义音频，比如音乐或其他音频流。

HTML 5中的代码示例：

<audio src="someaudio.wav">audio元素</audio>

HTML 4中的代码示例：

<object type="application/ogg" data="someaudio.wav">

    <param name="src" value="someaudio.wav">

</object>

（3）embed元素

embed元素用来插入各种多媒体，格式可以是 Midi、Wav、AIFF、AU、MP3等。

HTML 5中的代码示例：

<embed src="horse.wav" />

HTML 4中的代码示例：

<object data="flash.swf"  type="application/x-shockwave-flash"></object>

（4）mark元素

mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML 5中的代码示例：

<mark></mark>

HTML 4中的代码示例：

<span></span>

（5）progress元素

progress元素表示运行中的进程，可以使用 progress元素来显示 JavaScript 中耗费时间的函数的进程。

HTML 5中的代码示例：

<progress></progress>

这是HTML 5中的新增功能，故无法用HTML 4代码来实现。

（6）meter元素

meter元素表示度量衡，仅用于已知最大值和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在 min/max 属性中定义。

HTML 5中的代码示例：

<meter></meter>

这是HTML 5中的新增功能，故无法用HTML 4代码来实现。

（7）time元素

time元素用于表示日期或时间，也可以同时表示两者。

HTML 5中的代码示例：

<time></time>

HTML 4中的代码示例：

<span></span>

（8）ruby元素

ruby元素表示 ruby 注释（中文注音或字符）。

HTML 5中的代码示例：

<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

这也是HTML 5中的新增功能。

（9）rt元素

rt元素表示字符（中文注音或字符）的解释或发音。

HTML 5中的代码示例：

<ruby>漢 <rt> ㄏㄢˋ </rt></ruby>

这是HTML 5中的新增功能。

（10）rp元素

rp元素在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。

HTML 5中的代码示例：

<ruby>漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt></ruby>

这是HTML 5中的新增功能。

（11）wbr元素

wbr元素表示软换行。wbr元素与br元素的区别是：br元素是此处必须换行，而wbr元素意思就是浏览器窗口或父级元素的宽度足够宽时（没必要换行时），不进行换行，而当宽度不够时，主动在此处进行换行。wbr元素好像对字符型的语言用处比较大，但是对于中文，貌似没多大用处。

HTML 5中的代码示例：

<p> To learn AJAX, you must be fami<wbr>liar with the XMLHttp<wbr>

Request Object. </p>

这是HTML 5中的新增功能。

（12）canvas元素

canvas元素表示图形，比如图表和其他图像。这个元素本身没有行为，仅提供一块画布，但把一个绘图API展现给客户端JavaScript，以使脚本能够把想绘制的东西绘制到这块画布上。

HTML 5中的代码示例：

<canvas id="myCanvas" width="200" height="200"></canvas>

HTML 4中的代码示例：

<object data="inc/hdr.svg" type="image/svg+xml" width="200" height="200">

</object>

（13）details元素

details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可见的，用户点击标题时，会显示细节信息。summary元素应该是details元素的第一个子元素。

HTML 5中的代码示例：

<details>

    <summary>HTML5</summary>

    This document teaches you everything you have to learn about HTML5.

</details>

这是HTML 5中的新增功能。

（14）datalist元素

datalist元素表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表。

HTML 5中的代码示例：

<datalist></datalist>

这是HTML 5中的新增功能。

（15）datagrid元素

datagrid元素表示可选数据的列表，它以树形列表的形式显示。

HTML 5中的代码示例：

<datagrid></datagrid>

这是HTML 5中的新增功能。

（16）output元素

output元素表示不同类型的输出，比如脚本的输出。

HTML 5中的代码示例：

<output></output>

HTML 4中的代码示例：

<span></span>

（17）source元素

source元素为媒介元素（比如<video>和<audio>）定义媒介资源。

HTML 5中的代码示例：

<source>

HTML 4中的代码示例：

<param>

（18）dialog元素

dialog元素表示对话框。

HTML 5中的代码示例：

<dialog></dialog>