html5常见语义化新元素
HTML的开发于1999年停止使用HTML4。W3C致力于将HTML的底层语法从标准通用标记语言（SGML）更改为XML，以及全新的标记语言，例如可缩放矢量图形（SVG），XForms，和MathML。 浏览器供应商专注于选项卡和RSS阅读器等浏览器功能。 Web设计人员开始学习CSS和JavaScript™语言，以使用异步JavaScript + XML（Ajax）在现有框架之上构建自己的应用程序。 但是HTML本身在接下来的八年中几乎没有增长。
最近，野兽复活了。 三个主要的浏览器供应商-Apple，Opera和Mozilla Foundation-共同组成了Web超文本应用程序技术工作组（WhatWG），以开发经典HTML的更新和升级版本。 最近，W3C注意到了这些发展，并与许多相同的成员一起开始了自己的下一代HTML工作。 最终，这两种努力可能会合并。 尽管仍有许多细节尚待争论，但下一版HTML的概述正在变得清晰。
这个新版本HTML（通常称为HTML 5，尽管它也以Web Applications 1.0命名）将立即被冰冻的Web设计人员识别，并于1999年解冻。 没有名称空间或架构。 元素不必关闭。 浏览器可以容忍错误。 p仍然是p ，而table仍然是table 。
同时，这位众所周知的未冻结的穴居人Web设计师会遇到一些新的令人困惑的元素。 是的，像div这样的老朋友仍然存在，但是现在HTML也包括section ， header ， footer和nav 。 em ， code和strong仍然存在，而meter ， time和m 。 img和embed继续使用，但现在也有video和audio 。 但是，穴居人设计师仔细检查后发现，这些元素并没有太大的不同。 其中很多可能是设计师早在1999年就需要的东西，但实际上并没有。 通过与设计人员已经了解的元素进行简单的类比，即可轻松学习所有这些新元素。 实际上，它们比Ajax或CSS更容易学习。
最终，当穴居人启动运行Windows 98并于1999年冻结的300MHz笔记本电脑时，他们可能会惊讶地发现新页面在Netscape 4和Windows®InternetExplorer®5中都能正常显示。当然，浏览器不会可以识别新元素或对新元素执行任何操作，但是页面仍然显示，并且内容就在那里。
这不是一个快乐的巧合。 HTML 5的显式设计旨在在不支持HTML 5的浏览器中正常降级。 原因很简单：我们都是洞穴人。 浏览器现在具有选项卡，CSS和XmlHttpRequest，但是它们HTML渲染器滞留在1999年。如果不考虑已安装的基础，Web便无法前进。 HTML 5可以理解这一点。 它为当今的页面作者提供了真正的好处，而随着浏览器的缓慢升级，明天的页面阅读器将有更大的希望。 考虑到这一点，让我们看看HTML 5带给您的是什么。
结构体
由于缺乏结构，即使格式正确HTML页面也比其应有的处理难度更大。 您必须通过分析标头级别来找出分节符的位置。 侧边栏，页脚，页眉，导航菜单，主要内容部分和单个故事都由包罗万象的div元素标记。 HTML 5添加了新元素来专门标识这些常见结构中的每一个：
-
section：一本书的一部分或一章，一章的一部分，或基本上任何在HTML 4中具有自己标题的内容 -
header：页面上显示的页面标题； 与head元素不同 -
footer：精美打印所在的页面页脚； 电子邮件中的签名 -
nav：指向其他页面的链接的集合 -
article：博客，杂志，纲要等中的独立条目
例如，考虑一个典型的博客首页，其顶部为标题，底部为页脚，多个条目，一个导航部分，以及一个侧栏，如清单1所示。
清单1.今天的典型博客页面
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<div id="page">
<div id="header">
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
</div>
<div id="container">
<div id="center" class="column">
<div class="post" id="post-1000572">
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>
<div class="entry">
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived
at the site at 7:30 A.M., progressed to Spring around
10:00 A.M., and reached early summer by 10:15. </p>
</div>
</div>
<div class="post" id="post-1000571">
<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>
<div class="entry">
<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</div>
</div>
</div>
<div class="navigation">
<div class="alignleft">
<a href="/blog/page/2/">« Previous Entries</a>
</div>
<div class="alignright"></div>
</div>
</div>
<div id="right" class="column">
<ul id="sidebar">
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</div>
<div id="footer">
<p>Copyright 2007 Elliotte Rusty Harold</p>
</div>
</div>
</body>
</html> 即使缩进适当，嵌套div相当混乱。 在HTML 5中，可以将它们替换为更直接的语义元素，如清单2所示。
清单2. HTML 5中的典型博客页面
<html>
<head>
<title>Mokka mit Schlag </title>
</head>
<body>
<header>
<h1><a href="http://www.elharo.com/blog">Mokka mit Schlag</a></h1>
</header>
<section>
<article>
<h2><a href=
"/blog/birding/2007/04/23/spring-comes-and-goes-in-sussex-county/">
Spring Comes (and Goes) in Sussex County</a></h2>
<p>Yesterday I joined the Brooklyn Bird Club for our
annual trip to Western New Jersey, specifically Hyper
Humus, a relatively recently discovered hot spot. It
started out as a nice winter morning when we arrived at
the site at 7:30 A.M., progressed to Spring around 10:00
A.M., and reached early summer by 10:15. </p>
</article>
<article>
<h2><a href=
"/blog/birding/2007/04/23/but-does-it-count-for-your-life-list/">
But does it count for your life list?</a></h2>
<p>Seems you can now go <a
href="http://www.wired.com/science/discoveries/news/
2007/04/cone_sf">bird watching via the Internet</a>. I
haven't been able to test it out yet (20 user
limit apparently) but this is certainly cool.
Personally, I can't imagine it replacing
actually being out in the field by any small amount.
On the other hand, I've always found it quite
sad to meet senior birders who are no longer able to
hold binoculars steady or get to the park. I can
imagine this might be of some interest to them. At
least one elderly birder did a big year on TV, after
he could no longer get out so much. This certainly
tops that.</p>
</article>
<nav>
<a href="/blog/page/2/">« Previous Entries</a>
</nav>
</section>
<nav>
<ul>
<li><h2>Info</h2>
<ul>
<li><a href="/blog/comment-policy/">Comment Policy</a></li>
<li><a href="/blog/todo-list/">Todo List</a></li>
</ul></li>
<li><h2>Archives</h2>
<ul>
<li><a href='/blog/2007/04/'>April 2007</a></li>
<li><a href='/blog/2007/03/'>March 2007</a></li>
<li><a href='/blog/2007/02/'>February 2007</a></li>
<li><a href='/blog/2007/01/'>January 2007</a></li>
</ul>
</li>
</ul>
</nav>
<footer>
<p>Copyright 2007 Elliotte Rusty Harold</p>
</footer>
</body>
</html> 不再需要div了。 可以使用标准名称来推断不同部分的含义，而不是使用特定于站点的类属性。 这对于音频，手机和其他非标准浏览器尤其重要。
阻止语义元素
除了结构元素之外，HTML 5还添加了一些纯粹的语义块级元素：
-
aside -
figure -
dialog
我经常在此类文章和我的书中使用前两个。 第三，我自己不太用，但在很多书面文本中很常见。
在旁边
aside元素表示一个音符，一个提示，一个侧边栏，一个引号，一个括号或其他不在叙述主要内容中的东西。 例如，在developerWorks文章中，您经常会发现编码为表格的侧边栏，如清单3所示。
清单3.一个developerWorks HTML 4侧栏
<table align="right" border="0" cellpadding="0" cellspacing="0" width="40%">
<tbody><tr><td width="10">
<img alt="" src="//www.ibm.com/i/c.gif" height="1" width="10"></td>
<td>
<table border="1" cellpadding="5" cellspacing="0" width="100%">
<tbody><tr><td bgcolor="#eeeeee">
<p><a name="xf-value"><span class="smalltitle">.xf-value</span></a></p>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr><td class="code-outline">
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em }</pre>
</td></tr></tbody></table><br>
<p>
However, Firefox doesn't yet support this syntax.
</p>
</td></tr></table>在HTML 5中，您可以更加明智地编写此代码，如清单4所示。
清单4. developerWorks HTML 5侧栏
<aside>
<h3>.xf-value</h3>
<p>
The <code type="inline">.xf-value</code> selector used here styles the input
field value but not its label. This is actually inconsistent
with the current CSS3 draft. The example really should use the
<code type="inline">::value</code> pseudo-class instead like so:
</p>
<pre class="displaycode">input::value { width: 20em; }
#ccnumber::value { width: 18em }
#zip::value { width: 12em }
#state::value { width: 3em }</pre>
<p>
However, Firefox doesn't yet support this syntax.
</p>
</aside>浏览器可以在CSS的帮助下找出放置侧边栏的位置。
数字
figure元素代表一个块级图像以及一个标题。 例如，在许多developerWorks文章中，您都可以找到类似于清单5的标记。 结果如图1所示。
清单5. developerWorks HTML 4图
<a name="fig2"><b>Figure 2. Install Mozilla XForms dialog</b></a><br />
<img alt="A Web site is requesting permission to install the following item:
Mozilla XForms 0.7 Unsigned"
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
<br />图1.“安装Mozilla XForms”对话框
在HTML 5中，您可以更加语义化地编写它，如清单6所示。
清单6. developerWorks HTML 5图
<figure id="fig2">
<legend>Figure 2. Install Mozilla XForms dialog</legend>
<img alt="A Web site is requesting permission to install the following item:
Mozilla XForms 0.7 Unsigned"
src="installdialog.jpg" border="0" height="317" hspace="5" vspace="5" width="331" />
</figure>最重要的是，浏览器（尤其是屏幕阅读器）可以清楚明确地将标题与图片相关联。
figure元素不仅限于图片。 您还可以使用它为audio ， video ， iframe ， object和embed元素添加字幕。
对话
dialog元素代表几个人之间的对话。 HTML 5 dt元素过载以指示讲话者，而HTML 5 dd元素过载以指示讲话。 即使在旧版浏览器中，这也可以提供合理的显示。 清单7显示了Galileo的“关于两个主要世界系统的对话”中的一些著名对话。
清单7. HTML 5中的伽利略对话
<dialog>
<dt>Simplicius </dt>
<dd>According to the straight line AF,
and not according to the curve, such being already excluded
for such a use.</dd>
<dt>Sagredo </dt>
<dd>But I should take neither of them,
seeing that the straight line AF runs obliquely. I should
draw a line perpendicular to CD, for this would seem to me
to be the shortest, as well as being unique among the
infinite number of longer and unequal ones which may be
drawn from the point A to every other point of the opposite
line CD. </dd>
<dt>Salviati </dt>
<dd><p> Your choice and the reason you
adduce for it seem to me most excellent. So now we have it
that the first dimension is determined by a straight line;
the second (namely, breadth) by another straight line, and
not only straight, but at right angles to that which
determines the length. Thus we have defined the two
dimensions of a surface; that is, length and breadth. </p>
<p> But suppose you had to determine a height—for
example, how high this platform is from the pavement down
below there. Seeing that from any point in the platform we
may draw infinite lines, curved or straight, and all of
different lengths, to the infinite points of the pavement
below, which of all these lines would you make use of? </p>
</dd>
</dialog> 该元素的确切语法仍在争论中。 有些人想在dialog元素中嵌入其他非对话文本（例如舞台方向），而其他人对dt和dd的重载不满意。 但是，大多数人都同意，对话的这种语义表示是一件好事，即使他们尚未就确切的语法达成一致。
内联语义元素
HTML 4具有五个不同的内联元素，分别表示计算机代码的不同变体： var ， code ， kbd ， tt和samp 。 但是，它没有任何办法表明诸如时间，数字或嘲讽之类的基本素质。 HTML 5旨在通过几个新的内联元素来纠正技术人员和普通作者之间的这种不平衡。
标记
m元素表示以某种方式“标记”但不一定要强调的文本。 您可以想象它就像书中突出显示的段落。 规范的用例是Google的缓存页面。 当您单击链接到缓存副本时，将标记搜索词。 例如，如果您搜索“白鹭”，则缓存的Google页面可能会被标记如下：
The Great <m>Egret</m> (also known as the
American <m>Egret</m>) is a large white wading bird found worldwide.
The Great <m>Egret</m> flies with slow wing beats. The
scientific name of the Great <m>Egret</m> is <i>Casmerodius
albus</i>. 该元素的名称目前尚待争论。 在发布规范之前，可能会将其更改为mark而不是m 。
时间
time元素表示历史上的特定时刻，例如2007年4月23日，美国东部标准时间下午5:35。例如，
<p>I am writing this example at
<time>5:35 P.M. on April 23rd</time>.
</p> time元素可帮助浏览器和其他浏览器识别HTML页面中的时间。 元素的内容不需要任何特定的格式。 但是，每个time元素都应具有datetime属性，该属性应以更易于识别的形式包含时间，例如：
<p>I am writing this example at
<time datetime="2007-04-23T17:35:00-05:00">5:35 P.M. on April 23rd</time>.
</p>机器可读时间可能对搜索引擎，日历程序等有用。
仪表
meter元素表示指定范围内的数值。 例如，您可以将其用作薪水，投票给勒庞的法国选民的百分比或测试成绩。 在这里，我使用meter来标记我从Software Development 2007的Google程序员那里获得的一些数据：
<p>An entry level programmer in Silicon Valley
can expect to start around <meter>$90,000</meter> per year.
</p> meter元素可帮助浏览器和其他客户端识别HTML页面中的金额 。 元素的内容不需要任何特定的格式。 但是，每个meter元素最多可以具有六个属性，这些属性以机器可识别的形式提供有关此数量的信息：
-
value -
min -
low -
high -
max -
optimum
其中每一个都应包含一个指示相关范围的十进制数字。 例如，期末考试成绩可能会像这样标记出来：
<p>Your score was
<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.
</p>这表明该学生的得分是88.7（满分为100）。最低得分是0，但是任何人获得的最低实际得分是65。任何人获得的最高得分是96，尽管理想的得分是100。用户代理可以使用某种仪表控件显示此信息，也可以在工具提示中提供额外的数据，但是大多数可能会像其他任何嵌入式元素一样设置其样式。
进展
progress元素表示正在进行的进程的状态，例如图形用户界面（GUI）应用程序中的进度栏。 例如，它可以显示下载文件的百分比或电影播放距离。 此进度控件表示下载完成了33％：
<p>Downloaded:
<progress value="1534602" max="4603807">33%</progress>
</p> value属性显示操作的当前状态。 max属性显示进度前进的总数。 在这里，该元素表示已下载总4,603,807字节中的1,534,602字节。
您可以通过省略max属性来显示不确定的进度条。
您应该使用JavaScript语言在操作继续进行时动态更新进度条。 静态地，这个元素不是很有趣。
嵌入式媒体
网络上的视频正在蓬勃发展，但几乎都是专有的。 YouTube使用Flash，Microsoft使用WindowsMedia®，Apple使用QuickTime。 用于将此类内容嵌入一个浏览器的标记在下一浏览器中无效。 因此，WhatWG提出了一种新的video元素，该元素允许嵌入任意视频格式。 例如，我可能将Pro Spect公园中的Sora的QuickTime影片嵌入如下：
<video src="//www.cafeaulait.org/birds/sora.mov" /> 是否首选任何一种格式和编解码器仍在争论中。 如果不是必需的话，至少强烈建议至少支持Ogg Theora。 对诸如QuickTime之类的专有格式和诸如MPEG-4之类的专利保护格式的支持将是可选的。 实际的格式很有可能会在市场上确定，就像GIF，JPEG和PNG成为img元素首选的格式（与BMP，X-Bitmap和JPEG 2000等竞争者一样）。
还提出了补充audio元素。 例如，您可以将背景音乐附加到网页上，如下所示：
<audio src="spacemusic.mp3"
autoplay="autoplay" loop="20000" /> autoplay属性告诉浏览器在页面加载后立即开始播放，而无需等待明确的用户请求。 然后在关闭之前（或直到用户关闭窗口或转到另一页之前）循环20,000次。 当然，无论页面作者是否这样做，浏览器都可以而且应该为用户提供静音和暂停嵌入式媒体的功能。
浏览器必须支持WAV格式。 如果愿意，浏览器还可以支持其他格式，例如MP3。
因为这些元素不受旧版浏览器的支持，并且盲人和聋哑用户无法访问，所以audio和video元素可能包含描述音频和视频内容的附加标记。 这也有助于搜索引擎。 理想情况下，这些将是音频和视频内容的完整记录。 例如，清单8显示了如何标记John F. Kennedy的就职地址。
清单8. John F. Kennedy在HTML 5中的就职演说
<audio src="kennedyinauguraladdrees.mp3">
<p>
Vice President Johnson, Mr. Speaker, Mr. Chief Justice,
President Eisenhower, Vice President Nixon, President Truman,
Reverend Clergy, fellow citizens:
</p>
<p>
We observe today not a victory of party, but a celebration of
freedom -- symbolizing an end, as well as a beginning --
signifying renewal, as well as change. For I have sworn before
you and Almighty God the same solemn oath our forebears
prescribed nearly a century and three-quarters ago.
</p>
<p>
The world is very different now. For man holds in his mortal
hands the power to abolish all forms of human poverty and all
forms of human life. And yet the same revolutionary beliefs for
which our forebears fought are still at issue around the globe --
the belief that the rights of man come not from the
generosity of the state, but from the hand of God.
</p>
<p>
...
</p>
</audio>互动性
HTML 5也属于Web Applications 1.0的范畴。 为此，一些新元素集中于Web页面的更多交互体验：
-
details -
datagrid -
menu -
command
这些元素都有可能根据用户操作和选择更改显示的内容，而无需从服务器加载新页面。
细节
details元素表示默认情况下可能不会显示的更多信息。 可选的legend元素可以汇总详细信息。 细节的一种用途是用于脚注和尾注。 例如：
The bill of a Craveri's Murrelet is about 10% thinner
than the bill of a Xantus's Murrelet.
<details>
<legend>[Sibley, 2000]</legend>
<p>Sibley, David Allen, The Sibley Guide to Birds,
(New York: Chanticleer Press, 2000) p. 247
</p>
</details>没有指定确切的渲染。 一种浏览器可能使用脚注，另一种使用尾注，第三种使用工具提示。
每个details元素可以具有一个open属性。 如果具有此属性，则详细信息将首先显示给读者。 如果它没有这样的属性，那么它们将被隐藏，直到用户要求它们为止。 无论哪种情况，用户都可以单击图标或其他指示器以显示或隐藏细节。
数据网格
datagrid元素充当网格控件的角色。 它适用于可以由用户和脚本更新的树，列表和表。 相比之下，传统表主要用于静态数据。
datagrid从其内容中获取其初始数据： table ， select或其他HTML元素组。 例如，清单9显示了一个包含datagrid 。 在此示例中，datagrid是从table填充的。 一个更简单的一维datagrid可能由select元素填充。 如果使用其他HTML元素，则每个子元素将成为网格中的一行。
清单9.成绩表数据网格
<datagrid>
<table>
<tr><td>Jones</td><td>Allison</td><td>A-</td><td>B+</td><td>A</td></tr>
<tr><td>Smith</td><td>Johnny</td><td>A</td><td>C+</td><td>A</td></tr>
<tr><td>Willis</td><td>Sydney</td><td>C-</td><td>D</td><td>F</td></tr>
<tr><td>Wilson</td><td>Frank</td><td>B-</td><td>B+</td><td>A</td></tr>
</table>
</datagrid> 这与常规表的区别在于用户可以选择行，列和单元格。 折叠行，列和单元格； 编辑单元格； 删除行，列和单元格； 对网格进行排序； 并直接在客户端的浏览器中与数据进行交互。 JavaScript代码监视更新。 HTMLDataGridElement （清单10）接口已添加到文档对象模型（DOM）中以支持此功能。
清单10. HTMLDataGridElement
interface HTMLDataGridElement : HTMLElement {
attribute DataGridDataProvider data;
readonly attribute DataGridSelection selection;
attribute boolean multiple;
attribute boolean disabled;
void updateEverything();
void updateRowsChanged(in RowSpecification row, in unsigned long count);
void updateRowsInserted(in RowSpecification row, in unsigned long count);
void updateRowsRemoved(in RowSpecification row, in unsigned long count);
void updateRowChanged(in RowSpecification row);
void updateColumnChanged(in unsigned long column);
void updateCellChanged(in RowSpecification row, in unsigned long column);
}; DOM还可以用于将数据动态加载到网格中。 也就是说，数据网格不必具有提供初始数据的子级。 相反，可以使用DataGridDataProvider对象对其进行设置，如清单11所示。这使您可以从数据库，XmlHttpRequest或JavaScript代码可以与之对话的任何其他对象加载数据。
清单11. DataGridDataProvider
interface DataGridDataProvider {
void initialize(in HTMLDataGridElement datagrid);
unsigned long getRowCount(in RowSpecification row);
unsigned long getChildAtPosition(in RowSpecification parentRow,
in unsigned long position);
unsigned long getColumnCount();
DOMString getCaptionText(in unsigned long column);
void getCaptionClasses(in unsigned long column, in DOMTokenList classes);
DOMString getRowImage(in RowSpecification row);
HTMLMenuElement getRowMenu(in RowSpecification row);
void getRowClasses(in RowSpecification row, in DOMTokenList classes);
DOMString getCellData(in RowSpecification row, in unsigned long column);
void getCellClasses(in RowSpecification row, in unsigned long column,
in DOMTokenList classes);
void toggleColumnSortState(in unsigned long column);
void setCellCheckedState(in RowSpecification row, in unsigned long column,
in long state);
void cycleCell(in RowSpecification row, in unsigned long column);
void editCell(in RowSpecification row, in unsigned long column, in DOMString data);
};菜单和命令
实际上，至少从版本2开始， menu元素实际上已经存在于HTML中。在HTML 4中已弃用了menu元素，但是在HTML 5中它又重新焕发出了新的意义。在HTML 5中， menu包含command元素，每个command元素都会导致立即行动。 例如，清单12是弹出警报的菜单。
清单12. HTML 5菜单
<menu>
<command onclick="alert('first command')" label="Do 1st Command"/>
<command onclick="alert('second command')" label="Do 2nd Command"/>
<command onclick="alert('third command')" label="Do 3rd Command"/>
</menu> 也可以将命令转换为带有checked="checked"属性的checked="checked" 。 您可以通过指定单选按钮radiogroup属性（其值是互斥按钮组的名称）来将复选框变成单选按钮。
除了简单的命令列表，您还可以使用menu元素通过将type属性设置为toolbar或popup来创建工具栏或弹出式上下文菜单。 例如，清单13显示了一个工具栏，例如您可以在WordPress之类的博客编辑器中找到的工具栏。 它使用icon属性链接到按钮图片。
清单13. HTML 5工具栏
<menu type="toolbar">
<command onclick="insertTag(buttons, 0);" label="strong" icon="bold.gif"/>
<command onclick="insertTag(buttons, 1);" label="em" icon="italic.gif"/>
<command onclick="insertLink(buttons, 2);" label="link" icon="link.gif"/>
<command onclick="insertTag(buttons, 3);" label="b-quote" icon="blockquote.gif"/>
<command onclick="insertTag(buttons, 4);" label="del" icon="del.gif"/>
<command onclick="insertTag(buttons, 5);" label="ins" icon="insert.gif"/>
<command onclick="insertImage(buttons);" label="img" icon="image.gif"/>
<command onclick="insertTag(buttons, 7);" label="ul" icon="bullet.gif"/>
<command onclick="insertTag(buttons, 8);" label="ol" icon="number.gif"/>
<command onclick="insertTag(buttons, 9);" label="li" icon="item.gif"/>
<command onclick="insertTag(buttons, 10);" label="code" icon="code.gif"/>
<command onclick="insertTag(buttons, 11);" label="cite" icon="cite.gif"/>
<command onclick="insertTag(buttons, 12);" label="abbr" icon="abbr.gif"/>
<command onclick="insertTag(buttons, 13);" label="acronym" icon="acronym.gif"/>
</menu> label属性为菜单提供标题。 例如，清单14可能是一个Edit菜单。
清单14. HTML 5编辑菜单
<menu type="popup" label="Edit">
<command onclick="undo()" label="Undo"/>
<command onclick="redo()" label="Redo"/>
<command onclick="cut()" label="Cut"/>
<command onclick="copy()" label="Copy"/>
<command onclick="paste()" label="Paste"/>
<command onclick="delete()" label="Clear"/>
</menu>菜单可以嵌套在其他菜单中以创建分层菜单。
结论
HTML 5是Web未来的一部分。 它的新元素可实现更清晰，更简单的标记，从而使页面更加明显。 Div和span仍然有自己的位置，但是这些位置比以前受到更多限制。 许多页面将不再需要使用它们。
尽管并不是所有的浏览器一开始都会支持这些新元素，但对于HTML首次发明后引入的大多数元素， img ， table ， object以及更多元素也是如此。 支持将随时间而来。 同时，HTML对于无法识别的元素的必须忽略的行为意味着具有旧版浏览器的用户仍将能够阅读HTML 5页面。 他们今天可以这样做。 使用更现代的浏览器的用户将获得增强的体验，但没有人会被遗弃。
等待新功能需要八年的时间，尤其是在瞬息万变的Web世界中。 HTML 5还原了Netscape，Microsoft和其他公司每隔一周引入新元素时的兴奋感。 同时，它需要更谨慎的方法来定义这些元素，以便每个人都可以互操作使用它们。 前途一片光明。
翻译自: https://www.ibm.com/developerworks/web/library/x-html5/index.html
html5常见语义化新元素
524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
