HTML5之新增的元素和废除的元素 （声明：内容节选自《HTML 5从入门到精通》）

新增结构元素：

section元素

section元素定义文档或应用程序中的一个区段,比如章节、页眉、页脚或文档中的其他部分。它可以与h1,h2,h3,h4,h5,h6元素结合起来使用，标示文档结构。

HTML5中代码示例：<section>…</section>

HTML4中代码示例：<div>…</div>

article元素

article元素表示文档中的一块独立的内容，譬如博客中的一篇文章或报纸中的一篇文章。

HTML5中代码示例：<article>…</article>

HTML4中代码示例：<div class="article">…</div>

header元素

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

示例：<header>…</header>

HTML4中代码示例：<div>…</div>

nav元素

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

HTML5中代码示例： <nav>…</nav>

HTML4中代码示例：<ul>…</ul>

footer元素

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

HTML5中代码示例：<footer>…</footer>

HTML4中代码示例：<div>…</div>

————————————————————————————————————————————————————————

新增块级语义元素：

aside元素

aside元素表示article元素的内容之外的与article元素的内容相关的有关内容。

HTML5中代码示例：<aside>…</aside>

HTML4中代码示例：<div>…</div>

figure元素

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

加标题。

HTML5中代码示例：

<figure>

<figcaption>PRC</figcaption>

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

</figure>

HTML4中代码示例：

<dl>

<h1>PRC</h1>

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

</dl>

dialog元素

dialog标签定义对话，比如交谈。注意：对话中的每个句子都必须属于 <dt> 标签所定义的部分。

HTML5中代码示例：

<dialog>

<dt>老师</dt>

<dd>2+2 等于？</dd>

<dt>学生</dt>

<dd>4</dd>

<dt>老师</dt>

<dd>答对了！</dd>

</dialog>

————————————————————————————————————————————————————————

新增行内语义元素：

mark元素

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

高亮显示搜索关键词。

HTML5中代码示例：<mark>…</mark>

HTML4中代码示例：<span>…</span>

time元素

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

HTML5中代码示例: <time>…</time>

HTML4中代码示例:<span>…</span>

meter元素

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

义。

HTML5中代码示例: <meter>…</meter>

progress元素

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

HTML5中代码示例：<progress>…</progress>

————————————————————————————————————————————————————————

新增多媒体与交互性元素：

video元素&audio元素

video用来插入视频，audio用来插入声音，当然，用下面这个：

<video src="XX.wmv">您的浏览器不支持video标签</video>

如果不支持的话，就会显示标签内的文字

details元素

details元素表示用户要求得到并且可以得到的细节信息。它可以与summary元素配合使用。summary元素提供标题或图例。标题是可

见的，用户点击标题时，会显示出details。summary元素应该是details元素的第一个子元素。

HTML5中代码示例：

<details><summary>HTML 5</summary>

This document teaches you everything you have to learn about HTML 5.

</details>
<!--实践证明没用啊。。。—>

datagrid元素

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

HTML5中代码示例：<datagrid>…</datagrid>

menu元素

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

HTML5中代码示例：

<menu>

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

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

</menu>

U注意：HTML4中 menu元素不被推荐使用。

command元素

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

HTML5中代码示例:

Øcommand元素

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

钮。

HTML5中代码示例: command onclick=cut()" label="cut">

————————————————————————————————————————————————————————

新增input类型：

email——email类型用于应该包含 e-mail 地址的输入域。

url——url 类型用于应该包含 URL 地址的输入域。

number——number 类型用于应该包含数值的输入域。

range——range 类型用于应该包含一定范围内数字值的输入域。

Date Pickers（数据检出器）

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

————————————————————————————————————————————————————————

多个可供选取日期和时间的新输入类型：

date - 选取日、月、年

month - 选取月、年

week - 选取周和年

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

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

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

————————————————————————————————————————————————————————

废除的元素：

•1.能使用css代替的元素

对于basefont、big、center、font、s、strike、tt、u这些元素，由于他们的功能都是纯粹为画面展示服务的，而在HTML5中提

倡把画面展示性功能放在css样式表中统一编辑，所以将这些元素废除，并使用编辑css样式表的方式进行替代。

•2.不再使用frame框架

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

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

对于applet、bgsound、blink、marguee等元素，由于只有部分浏览器支持这些元素，所以在HTML5中被废除。其中applet元素可由embed元素替代，bgsound元素可由audio元素替代，marquee可以由JavaScript编程的方式所替代。