新千年以来，超文本标记语言（HTML）5 第一次向 HTML 中引入新的元素。新的结构元素包括 aside、figure 和 section。新的内联元素包括 time、meter 和 progress。新的内嵌元素有 video 和 audio。新的交互元素有 details、datagrid 和 command。
超文本标记语言（HTML）的开发到 1999 年 HTML 4 就停止了。万维网联盟（W3C）把重点转向将 HTML
的底层语法从标准通用标记语言（SGML）改为可扩展标记语言（XML），以及可缩放向量图型（SVG）、XForms 和 MathML
这些全新的标记语言。浏览器厂商则把精力放到选项卡和富站点摘要（RSS）阅读器这类浏览器特性上。Web 设计人员开始学习使用异步
JavaScript + XML（Ajax），在现有的框架下通过层叠样式表（CSS）和 JavaScript™
语言建立自己的应用程序。但是在接下来的八年中，HTML 本身没有任何变化。
最近，它又复活了。三家重要的浏览器厂商 — Apple、Opera 和 Mozilla
Foundation — 成立了 Web Hypertext Application Technology Working
Group（WhatWG）来开发传统 HTML 的新版本。最近，W3C 也注意到了这些活动，也启动了自己的新一代 HTML
项目，双方的成员有很多是相同的。这两个项目最终很可能合并。虽然很多细节还在争论之中，但下一版本 HTML 的大体轮廓已经清楚了。
Web 开发人员从 1999 年就一直期待 HTML 的新版本（通常称为 HTML
5，但是也称为 Web Applications 1.0），现在它终于发布了。它保持了 HTML
原来的特色：没有名称空间或模式。元素不必结束。浏览器会宽容地对待错误。p 仍然是 p，table 仍然是 table。
如果在 1999 年将一位 Web 开发人员冷冻起来，现在再解冻，那么他会遇到一些新的让人迷惑的元素。是的，他熟悉的元素（比如 div）仍然保留了；但是，HTML 现在还包含 section、header、footer 和 nav 等新元素。em、code 和 strong 仍然存在，但是增加了 meter、time 和 m。img 和 embed 仍然可用，但是还增加了 video 和 audio。但是，他仔细观察一下就会发现，这些元素实际上没什么区别。其中许多元素可能在 1999 年是开发人员需要而没有得到的。通过与他已经掌握的元素进行简单的类比，这些新元素都很容易理解。实际上，与 Ajax 或 CSS 相比，它们非常容易掌握。
最后，当他打开 300MHz 的笔记本（运行的是 Windows 98，也是在 1999 年冷冻起来的）时，他可能对 Netscape 4 和
Windows® Internet Explorer® 5
中显示的新页面效果很吃惊。当然，这些老式浏览器不认识新元素，会完全忽略它们，但是页面仍然会显示，内容仍然是完整的。
这
并不是什么虚构的故事。HTML 5 的设计原则就是在不支持它的浏览器中能够平稳地退化。原因很简单：我们都是这样的
“原始人”。浏览器现在有选项卡、CSS 和 XmlHttpRequest，但是它们的 HTML 显示引擎仍然停留在 1999
年的水平。除了用户量大大增加之外，Web 其实在本质上没什么进步。HTML 5 考虑到了这一点。它目前为 Web
开发人员一些真正的好处，随着浏览器的缓慢升级，页面浏览者会逐渐享受到这些好处。我们来看看 HTML 5 提供了什么。
<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>
<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>
<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>
<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>
<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 />
<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>
<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>
m 元素表示文本被 “加上标志”，但是不一定要强调。可以把它想像成书中突出显示的一节。Google 的缓存页面就是典型的用例。如果链接到一个缓存的副本，搜索词就被加上标志。例如，如果搜索 “Egret”，那么缓存的 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>.
视
频已经在 Web 上广泛流行了，但是其格式几乎都是专有的。YouTube 使用 Flash，Microsoft 使用 Windows
Media®，Apple 使用 QuickTime。在一种浏览器中用来嵌入这些内容的标记在另一种浏览器中是无效的。因此，WhatWG
提议引入一个新的 video 元素，用来嵌入任意视频格式。例如，可以用以下代码嵌入我的 QuickTime 电影 “a Sora in Prospect Park”：
<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>
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 属性。如果设置了这个属性，那么详细信息在最初就显示出来。如果没有设置这个属性，那么会隐藏它们，直到用户要求显示它们。无论是哪种情况，用户都可以通过单击一个图标或其他控件来显示或隐藏详细信息。
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); };
HTML 5 是未来的 Web 的一部分。它的新元素会产生更干净更简单的代码，让页面更容易理解。Div 和 span 仍然有用处，但是不会像以前那样频繁地使用它们了。许多页面不再需要它们了。
尽管目前并非所有浏览器都支持这些元素，但这是 HTML 引入大多数新元素之后的普遍情况，比如 img、table、object 等等。随着时间的推移，支持会逐渐完善。浏览器会忽略不认识的 HTML 元素，这意味着老式浏览器的用户仍然能够阅读 HTML 5 页面，他们的浏览方式与以前一样。现代浏览器的用户可以获得更好的用户体验，但是没有人会由于 HTML 5 新元素而妨碍浏览。
用 8 年时间等待新特性的出现实在是够漫长的，尤其是在快速变化的 Web 世界中。在 Web 时代的早期，Netscape、Microsoft
和其他公司几乎每周都会引入新元素，HTML 5
终于也为我们提供了一些令人兴奋的东西。同时，它以一种谨慎得多的方式定义这些元素，让我们可以放心地使用它们。前景是光明的。
浙公网安备 33010602011771号