2.2 新增的元素和废除的元素

本节将详细介绍HTML 5中新增和废除了哪些元素。

---

2.2.1 新增的结构元素

在HTML 5中，新增了以下与结构相关的元素。

❏ section元素

section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构。

HTML 5中代码示例：

<section>...</section>

HTML 4中代码示例：

<div>...</div>

❏ article元素

article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或报纸中的一篇文章。

HTML 5中代码示例：

<article>...</article>

HTML 4中代码示例：

<div>...</div>

❏ aside元素

aside元素表示article元素的内容之外的、与article元素的内容相关的辅助信息。HTML 5中代码示例：

<aside>…</aside>

HTML 4中代码示例：

<div>...</div>

❏ header元素

header元素表示页面中一个内容区块或整个页面的标题。

HTML 5中代码示例：

<header>...</header>

HTML 4中代码示例：

<div>...</div>

❏ hgroup元素

hgroup元素用于对整个页面或页面中一个内容区块的标题进行组合。

HTML 5中代码示例：

<hgroup>...</hgroup>

HTML 4中代码示例：

<div>...</div>

❏ footer元素

footer元素表示整个页面或页面中一个内容区块的脚注。一般来说，它会包含创作者的姓名、创作日期以及创作者联系信息。

HTML 5中代码示例：

<footer></footer>

HTML 4中代码示例：

<div>...</div>

❏ nav元素

nav元素表示页面中导航链接的部分。

HTML 5中代码示例：

<nav></nav>

HTML 4中代码示例：

<ul></ul>

❏ figure元素

figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。

HTML 5中代码示例：

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

HTML 4中代码示例：

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

---

2.2.2 新增的其他元素

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

❏ 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>

❏ 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>

❏ 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>

❏ mark元素

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

HTML 5中代码示例：

<mark></mark>

HTML 4中代码示例：

<span></span>

❏ progress元素

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

HTML5中代码示例：

<progress></progress>

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

❏ meter元素

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

HTML5中代码示例：

<meter></meter>

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

❏ time元素

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

HTML 5中代码示例：

<time></time>

HTML 4中代码示例：

<span></span>

❏ ruby元素

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

HTML 5中代码示例：

<ruby>汉<rt><rp>（</rp>ㄏㄢ'<rp>）</rp></rt></ruby>

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

❏ rt元素

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

HTML 5中代码示例：

<ruby>汉<rt> ㄏㄢ'</rt></ruby>

这是HTML 5中新增的功能。

❏ rp元素

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

HTML 5中代码示例：

<ruby>汉<rt><rp>（</rp>ㄏㄢ'<rp>）</rp></rt></ruby>

这是HTML 5中新增的功能。

❏ 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中新增的功能。

❏ 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>

❏ command元素

command元素表示命令按钮，比如单选按钮、复选框或按钮。

HTML 5中代码示例：

<command onclick=cut（）" label="cut">

这是HTML 5中新增的功能。

❏ details元素

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

HTML 5中代码示例：

<details>
   <summary>HTML 5</summary>
   This document teaches you everything you have to learn about HTML 5.
</details>

这是HTML 5中新增的功能。

❏ datalist元素

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

<datalist></datalist>

这是HTML 5中新增的功能。

❏ datagrid元素

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

HTML 5中代码示例：

<datagrid></datagrid>

这是HTML 5中新增的功能。

❏ keygen元素

keygen元素表示生成密钥。

HTML 5中代码示例：

<keygen>

这是HTML 5中新增的功能。

❏ output元素

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

HTML 5中代码示例：

<output></output>

HTML 4中代码示例：

<span></span>

❏ source元素

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

HTML 5中代码示例：

<source>

HTML 4中代码示例：

<param>

❏ menu元素

menu元素表示菜单列表。当希望列出表单控件时使用该标签。

HTML 5中代码示例：

<menu>
   <li><input type="checkbox" />Red</li>
   <li><input type="checkbox" />blue</li>
</menu>

在HTML 4中，menu元素不被推荐使用。

---

2.2.3 新增的input元素的类型

HTML 5中新增了很多input元素的类型，现列举如下：

❏ email

email类型表示必须输入E-mail地址的文本输入框。

❏ url

url类型表示必须输入URL地址的文本输入框。

❏ number

number类型表示必须输入数值的文本输入框。

❏ range

range类型表示必须输入一定范围内数字值的文本输入框。

❏ Date Pickers

HTML 5拥有多个可供选取日期和时间的新型输入文本框：

date—选取日、月、年

month—选取月、年

week—选取周和年

time—选取时间（小时和分钟）

datetime—选取时间、日、月、年（UTC时间）

datetime-local—选取时间、日、月、年（本地时间）

---

2.2.4 废除的元素

由于各种原因，在HTML 5中废除了很多元素，简单介绍如下。

1.能使用CSS替代的元素

对于basefont、big、center、font、s、strike、tt、u这些元素，由于它们的功能都是纯粹为画面展示服务的，而HTML 5中提倡把画面展示性功能放在CSS样式表中统一编辑，所以将这些元素废除了，并使用编辑CSS、添加CSS样式表的方式进行替代。其中font元素允许由“所见即所得”的编辑器来插入，s元素、strike元素可以由del元素替代，tt元素可以由CSS的font-family属性替代。

2.不再使用frame框架

对于frameset元素、frame元素与noframes元素，由于frame框架对网页可用性存在负面影响，在HTML 5中已不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的复合页面的形式，同时将以上这三个元素废除。

3.只有部分浏览器支持的元素

对于applet、bgsound、blink、marquee等元素，由于只有部分浏览器支持这些元素，特别是bgsound元素以及marquee元素，只被Internet Explorer所支持，所以在HTML 5中被废除。其中applet元素可由embed元素或object元素替代，bgsound元素可由audio元素替代，marquee可以由JavaScript编程的方式所替代。

4.其他被废除的元素

其他被废除元素还有：

• 废除rb元素，使用ruby元素替代
• 废除acronym元素，使用abbr元素替代
• 废除dir元素，使用ul元素替代
• 废除isindex元素，使用form元素与input元素相结合的方式替代
• 废除listing元素，使用pre元素替代
• 废除xmp元素，使用code元素替代
• 废除nextid元素，使用GUIDS替代
• 废除plaintext元素，使用“text/plian”MIME类型替代