細(xì)談HTML 5新增的元素
對(duì)于HTML的渲染，瀏覽器一直停留在1999年的水平。為此，HTML 5是一個(gè)實(shí)用主義方案，這樣不僅可以繼續(xù)處理這么多年來(lái)散落在世界各個(gè)角落的HTML，也可以讓瀏覽器廠商更容易添加新特性。這就叫degrade gracefully（優(yōu)雅降級(jí)）。讓我們來(lái)看看HTML 5增加的一些新元素。
HTML 5結(jié)構(gòu)元素
這真是大快人心。目前，我們定義結(jié)構(gòu)只能通過(guò)一個(gè)“***”的div, 試圖通過(guò)設(shè)置它的特性id的值如header, footer, sidebar等來(lái)分別表達(dá)頭部，底部或者側(cè)欄等。有了它們，代碼編寫(xiě)者不再需要為id的命名費(fèi)盡心思，對(duì)于手機(jī)、閱讀器等設(shè)備更有語(yǔ)義的好處。HTML 5增加了新的結(jié)構(gòu)元素來(lái)表達(dá)這些最常用的結(jié)構(gòu)：
◆section: 這可以表達(dá)書(shū)本的一部分或一章，或者一章內(nèi)的一節(jié)
◆header: 頁(yè)面主體上的頭部。并非head元素
◆footer: 頁(yè)面的底部（頁(yè)腳），可以是一封郵件簽名的所在
◆nav: 到其他頁(yè)面的鏈接集合
◆article: 諸如blog, 雜志，綱要等之中的一條獨(dú)立記錄。
舉個(gè)例子，一個(gè)blog的首頁(yè)，用HTML 5寫(xiě)的話，可以是這樣（有省略）：
- <<!DOCTYPE HTML> <HTML> <head> <title>realazy</title> </head>
- <body>
- <header>
- <h1>Realazy</h1></header>
- <section>
- <article>
- <h2><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">標(biāo)題</a></h2>
- <p>內(nèi)容在此...（省略n字）</p> </article> <article> <h2><a href="http://realazy.org/blog" mce_href="http://realazy.org/blog">標(biāo)題2</a></h2> <p>內(nèi)容2在此...（省略n字）</p> </article> ... </section>
- <footer> nav> <ul>
- <li><a href="http://realazy/blog" mce_href="http://realazy/blog">導(dǎo)航1</a></li> <li><a href="http://realazy/blog" mce_href="http://realazy/blog">導(dǎo)航2</a></li> ... </ul> </nav>
- <p>© 2007 realazy</p> </footer> </body> </HTML>
- 塊級(jí)block的語(yǔ)義元素
HTML還增加以下三個(gè)塊級(jí)元素：
◆aside
◆figure/code>
◆dialog
aside可以用以表達(dá)注記、貼士、側(cè)欄、摘要、插入的引用等諸如作為補(bǔ)充主體的內(nèi)容。比如這樣表達(dá)blog的側(cè)欄：
- <aside> <h3>***文章</h3> <ul>
- <li><a href="http://realazy.org/blog/" mce_href="http://realazy.org/blog/">文章標(biāo)題</a></li> ... </ul> </aside>
figure元素表示一個(gè)有說(shuō)明的塊級(jí)圖片。比如：
<figure> <legend>這是圖片的說(shuō)明</legend> <img alt="圖片可替換文本" src="/path/to/img.png" mce_src="/path/to/img.png" /> </figure>dialog元素用于表達(dá)人們之間的對(duì)話。在HTML 5中，dt用于表示說(shuō)話者，而dd則用來(lái)表示說(shuō)話者的內(nèi)容。如：
- <dialog> <dt>佛</dt> <dd>色即是空</dd> <dt>悟空</dt> <dd>
我現(xiàn)在需要點(diǎn)空……行內(nèi)（inline）的語(yǔ)義元素，m元素用來(lái)標(biāo)記一些不是那么需要著重強(qiáng)調(diào)的文本。現(xiàn)在尚有爭(zhēng)議，可能最終會(huì)改為mark.
time元素如其名，用來(lái)表達(dá)時(shí)間。它需要一個(gè)datetime的特性來(lái)標(biāo)明機(jī)器能夠認(rèn)識(shí)的時(shí)間，如：
<time datetime="2008-08-08T20:08:08">2008年8月8日晚上8時(shí)8分8秒</tiem>meter元素表達(dá)特定范圍內(nèi)的數(shù)值?？捎糜谛剿?、百分比、分?jǐn)?shù)等。比如：
很遺憾地告訴你，我只有<meter>150cm</meter>它還有6個(gè)特性來(lái)表達(dá)各方面的含義，比如：
- <p>您的分?jǐn)?shù)是：<meter value="88.7" min="0" max="100" low="65" high="96" optimum="100">B+</meter>.</p>
還有一個(gè)progress，也是義如其名，用以表達(dá)進(jìn)度：
目標(biāo)完成度：<progress value="40" max="100">40%</progress>嵌入多媒體
新增video和audio元素。顧名思義，分別是用來(lái)插入視頻和聲音的。至于格式，交由瀏覽器實(shí)現(xiàn)，HTML再也不需要特別的代碼去播放特定的格式。就像img一樣，不管是png, jpg還是gif都可以顯示。值得注意的是，它們可以包含內(nèi)容。比如，可以把歌詞放到某段歌曲中去：
- <audio src="誰(shuí)人伴你睡.mp3" mce_src="誰(shuí)人伴你睡.mp3"> <p>淚枯干</p> <p>難忍怎么委屈自已</p> <p>曾經(jīng)有一刻悲與喜</p> ... </audio>
交互性
HTML 5同時(shí)也叫Web Applications 1.0, 因此也進(jìn)一步發(fā)展交互能力。這些標(biāo)簽就是為提高頁(yè)面的交互體驗(yàn)而生：
details
datagrid
menu
command
details用來(lái)表示一段具體的內(nèi)容，但是內(nèi)容默認(rèn)可能不顯示，通過(guò)某種手段（如點(diǎn)擊）與legend交互才顯示出來(lái)。這跟現(xiàn)在各種通過(guò)JavaScript隱藏一段內(nèi)容，在點(diǎn)擊后才顯示出來(lái)的做法有些類似。比如：
一句話記錄生活中的點(diǎn)點(diǎn)滴滴， <details> <legend>更多</legend> <p>交流與分享，拉近你和朋友，支持 MSN/GTalk/QQ、短信、手機(jī) WAP</p> </details>它可以有一個(gè)open的特性，用來(lái)顯示細(xì)節(jié)與否。
datagrid用來(lái)控制數(shù)據(jù)，可以由用戶或者腳本來(lái)更新。
menuHTML 2就存在了，不過(guò)HTML 4把它廢棄了。HTML 5廢物利用，并在期內(nèi)加上command元素。
【編輯推薦】
