HTML 5 中的新元素

時間 2019-11-11

標籤 html 元素欄目 HTML 简体版

原文原文鏈接

超文本標記語言（HTML）的開發到 1999 年 HTML 4 就中止了。萬維網聯盟（W3C）把重點轉向將 HTML 的底層語法從標準通用標記語言（SGML）改成可擴展標記語言（XML），以及可縮放向量圖型（SVG）、XForms 和 MathML 這些全新的標記語言。瀏覽器廠商則把精力放到選項卡和富站點摘要（RSS）閱讀器這類瀏覽器特性上。Web 設計人員開始學習使用異步 JavaScript + XML（Ajax），在現有的框架下經過層疊樣式表（CSS）和 JavaScript™ 語言創建本身的應用程序。可是在接下來的八年中，HTML 自己沒有任何變化。 html

最近，它又復活了。三家重要的瀏覽器廠商 — Apple、Opera 和 Mozilla Foundation — 成立了 Web Hypertext Application Technology Working Group（WhatWG）來開發傳統 HTML 的新版本。最近，W3C 也注意到了這些活動，也啓動了本身的新一代 HTML 項目，雙方的成員有不少是相同的。這兩個項目最終極可能合併。雖然不少細節還在爭論之中，但下一版本 HTML 的大致輪廓已經清楚了。 html5

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 相比，它們很是容易掌握。 spring

最後，當他打開 300MHz 的筆記本（運行的是 Windows 98，也是在 1999 年冷凍起來的）時，他可能對 Netscape 4 和 Windows® Internet Explorer® 5 中顯示的新頁面效果很吃驚。固然，這些老式瀏覽器不認識新元素，會徹底忽略它們，可是頁面仍然會顯示，內容仍然是完整的。數據庫

這並非什麼虛構的故事。HTML 5 的設計原則就是在不支持它的瀏覽器中可以平穩地退化。緣由很簡單：咱們都是這樣的「原始人」。瀏覽器如今有選項卡、CSS 和 XmlHttpRequest，可是它們的 HTML 顯示引擎仍然停留在 1999 年的水平。除了用戶量大大增長以外，Web 其實在本質上沒什麼進步。HTML 5 考慮到了這一點。它目前爲 Web 開發人員一些真正的好處，隨着瀏覽器的緩慢升級，頁面瀏覽者會逐漸享受到這些好處。咱們來看看 HTML 5 提供了什麼。瀏覽器

結構緩存

因爲缺乏結構，即便是形式良好的 HTML 頁面也比較難以處理。必須分析標題的級別，才能看出各個部分的劃分方式。邊欄、頁腳、頁眉、導航條、主內容區和各篇文章都由通用的 div 元素來表示。HTML 5 添加了一些新元素，專門用來標識這些常見的結構：服務器

section：這能夠是書中的一章或一節，實際上能夠是在 HTML 4 中有本身的標題的任何東西
header：頁面上顯示的頁眉；與 head 元素不同
footer：頁腳；能夠顯示電子郵件中的簽名
nav：指向其餘頁面的一組連接
article：blog、雜誌、文章彙編等中的一篇文章

咱們來考慮一個典型的 blog 主頁，它的頂部有頁眉，底部有頁腳，還有幾篇文章、一個導航區和一個邊欄，見清單 1。 app

清單 1. 典型的 blog 頁面

<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/">&laquo; 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 編寫的典型 blog 頁面

<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/">&laquo; 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 了。再也不須要本身設置 class 屬性，從標準的元素名就能夠推斷出各個部分的意義。這對於音頻瀏覽器、手機瀏覽器和其餘非標準瀏覽器尤爲重要。

回頁首

語義性的塊元素

除告終構性元素以外，HTML 5 還增長了一些純語義性的塊級元素：

aside
figure
dialog

我在文章和書中一直使用前兩個元素。第三個元素我不常常用，它主要用於書面文本。

aside

aside 元素表明說明、提示、邊欄、引用、附加註釋等，也就是敘述主線以外的內容。例如，在 developerWorks 文章中，經常會看到用表格形式編寫的邊欄，見清單 3。

清單 3. 用 HTML 4 編寫的 developerWorks 邊欄

<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. 用 HTML 5 編寫的 developerWorks 邊欄

<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

figure 元素表明一個塊級圖像，還能夠包含說明。例如，在許多 developerWorks 文章中，能夠看到清單 5 這樣的標記；其結果見圖 1。

清單 5. 用 HTML 4 編寫的 developerWorks 圖

<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. Install Mozilla XForms dialog

A Web site is requesting permission to install the following item: Mozilla XForms 0.7 Unsigned

在 HTML 5 中，能夠按照更有語義性的方式編寫這個圖，見清單 6。

清單 6. 用 HTML 5 編寫的 developerWorks 圖

<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

dialog 元素表示幾我的之間的對話。HTML 5 dt 元素能夠表示講話者，HTML 5 dd 元素能夠表示講話內容。因此，在老式瀏覽器中也能夠以合理的方式顯示對話。清單 7 顯示在 Galileo 的「Dialogue Concerning the Two Chief World Systems」上的一段著名對話。

清單 7. 用 HTML 5 編寫的 Galilean 對話

<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 用 5 個不一樣的內聯元素表示略有差別的計算機代碼：var、code、kbd、tt 和 samp。可是，它沒法表示時間、數字等基本數值。HTML 5 提供了幾個新的內聯元素來知足非技術做者的需求。

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

對於這個元素的名稱當前還有爭議。在規範發佈以前，它可能從 m 改成 mark。

time

time 元素表示一個時間值，好比 5:35 P.M., EST, April 23, 2007。例如：

<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 元素表示指定範圍內的數字值。例如，能夠用它表示薪水、投票給 Le Pen 的法國選民的百分比或考試分數。在這裏，我使用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 元素能夠有最多 6 個屬性，它們按照更適合機器識別的形式表示這個數量：

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。可能的最低分數是 0，可是實際的最低分數是 65。可能的最高分數是 100，可是實際的最高分數是 96。用戶代理能夠用某種數值控件顯示這一信息，也能夠在工具提示中顯示額外的數據，可是最多見的狀況多是像其餘內聯元素同樣對它應用樣式。

progress

progress 元素表示一個正在進行的過程的狀態，就像圖形用戶界面（GUI）應用程序中的進度條。例如，能夠用它表示一個文件已經下載的百分比或者播放電影時的當前位置。下面這個進度控件表示下載已經完成了 33%：

<p>Downloaded: 
  <progress value="1534602" max="4603807">33%</progress>
</p>

value 屬性表示操做的當前狀態。max 屬性表示操做的總量。這個元素指出要下載的數據總量是 4,603,807 字節，已經下載了 1,534,602 字節。

忽略 max 屬性，就能夠顯示無限的進度。

在操做進行時，應該使用 JavaScript 語言動態地更新進度條。在靜態狀況下，這個元素沒什麼意義。

回頁首

內嵌的媒體

視頻已經在 Web 上普遍流行了，可是其格式幾乎都是專有的。YouTube 使用 Flash，Microsoft 使用 Windows Media®，Apple 使用 QuickTime。在一種瀏覽器中用來嵌入這些內容的標記在另外一種瀏覽器中是無效的。所以，WhatWG 提議引入一個新的 video 元素，用來嵌入任意視頻格式。例如，能夠用如下代碼嵌入個人 QuickTime 電影「a Sora in Prospect Park」：

<video src="http://www.cafeaulait.org/birds/sora.mov" />

對於以哪一種格式和解碼器做爲首選，仍然有爭議。可能會強力推薦或要求使用 Ogg Theora。還能夠可選地支持 QuickTime 等專有格式和 MPEG-4 等受專利限制的格式。實際使用的格式極可能由市場決定，就像是 GIF、JPEG 和 PNG 格式那樣（這些格式經過市場競爭壓倒了 BMP、X-Bitmap 和 JPEG 2000 等競爭者，成爲 img 元素的首選格式）。

還提議引入 audio 元素。例如，可使用如下代碼給 Web 頁面加上背景音樂：

<audio src="spacemusic.mp3"
    autoplay="autoplay" loop="20000" />

autoplay 屬性指示瀏覽器在裝載頁面後當即開始播放，而不等待明確的用戶請求。音頻循環播放 20,000 次，而後中止（或者在用戶關閉窗口或轉到另外一個頁面時中止）。固然，瀏覽器能夠（並且應該）容許用戶關閉內嵌的媒體，不該該只按頁面做者的要求去作。

瀏覽器必須支持 WAV 格式，還能夠支持 MP3 等其餘格式。

由於老式瀏覽器不支持這些元素，並且它們對於盲人和聾人用戶來講沒有意義，因此 audio 和 video 元素能夠包含額外的標記，用來描述音頻和視頻的內容。這對搜索引擎也有幫助。在理想狀況下，這些標記是音頻和視頻內容的完整文字版本。例如，清單 8 顯示 John F. Kennedy 的就任演說。

清單 8. 用 HTML 5 編寫的 John F. Kennedy 的就任演說

<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

details 元素表示在默認狀況下可能不顯示的詳細信息。可選的 legend 元素能夠提供詳細信息的摘要。details 元素的用途之一是提供腳註和尾註。例如：

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 元素提供一個網格控件。能夠用它顯示樹、列表和表格，用戶和腳本能夠更新這些界面元素。與之相反，傳統的表格主要用來顯示靜態數據。

datagrid 從它的內容（一個 table、select 或其餘 HTML 元素）得到初始數據。例如，清單 9 中的 datagrid 包含一張成績表。在這個示例中，datagrid 的數據來自一個 table。更簡單的一維 datagrid 能夠從 select 元素得到數據。若是使用其餘 HTML 元素，那麼每一個子元素成爲網格中的一行。

清單 9. 成績表 datagrid

<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 代碼監視更新。Document Object Model（DOM）中增長了 HTMLDataGridElement 接口以支持這個元素（清單 10）。

清單 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 在網格中動態地裝載數據。也就是說，datagrid 能夠不包含那些提供初始數據的子元素。能夠用一個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);
};

menu 和 command

menu 元素實際上在 HTML 2 中就出現了。在 HTML 4 中廢棄了它，可是 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" 屬性將命令轉換爲複選框。經過指定 radiogroup 屬性，能夠將複選框轉換爲單選按鈕，這個屬性的值是互相排斥的按鈕的組名。

除了簡單的命令列表以外，還可使用 menu 元素建立工具欄或彈出式上下文菜單，這須要將 type 屬性設置爲 toolbar 或 popup。例如，清單 13 顯示一個與 WordPress 等 blog 編輯器類似的工具欄。它使用 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 Edit 菜單

<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 頁面，他們的瀏覽方式與之前同樣。現代瀏覽器的用戶能夠得到更好的用戶體驗，可是沒有人會因爲 HTML 5 新元素而妨礙瀏覽。

用 8 年時間等待新特性的出現實在是夠漫長的，尤爲是在快速變化的 Web 世界中。在 Web 時代的早期，Netscape、Microsoft 和其餘公司幾乎每週都會引入新元素，HTML 5 終於也爲咱們提供了一些使人興奮的東西。同時，它以一種謹慎得多的方式定義這些元素，讓咱們能夠放心地使用它們。前景是光明的。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。