HTML5標(biāo)準(zhǔn)最新技術(shù)預(yù)覽
51CTO推薦專題：HTML 5，下一代Web開發(fā)標(biāo)準(zhǔn)詳解
已經(jīng)存在近十年的HTML4已經(jīng)成為不斷發(fā)展的Web開發(fā)領(lǐng)域的瓶頸；HTML5標(biāo)準(zhǔn)在此時顯得尤為重要。每天都有新穎而創(chuàng)新的網(wǎng)站出現(xiàn)，全方位地拓展HTML的邊界。Web開發(fā)者正在尋求新的技術(shù)，提供更強(qiáng)大的功能，那些因為腳本語言和瀏覽器的限制而被隱瞞了的功能。
為了實現(xiàn)更好的靈活性和更強(qiáng)的互動性，及創(chuàng)造令人興奮而更具交互性的網(wǎng)站和應(yīng)用程序，HTML5 引入和增強(qiáng)了更為廣泛的特性，包括控制，APIs，多媒體，結(jié)構(gòu)和語義等。
有關(guān)HTML5標(biāo)準(zhǔn)的工作，起于2004年，在W3C HTML WG和WHATWG的共同努力下，目前還在進(jìn)行中。許多關(guān)鍵成員加入了W3G的工作，包括四大主流瀏覽器廠商代表：蘋果，Mozilla，Opera，和微軟；還有一些有著不同利益和專業(yè)知識的其他組織和個人。
請注意，規(guī)范仍然只是一個進(jìn)行中的工作，完成它還有很長的路要走。因此，文章中提到的這些特性可能將發(fā)生改變。這篇文章是為了對目前草案中的一些主要特性做一個簡單的介紹。
結(jié)構(gòu)
HTML5標(biāo)準(zhǔn)中引入了一整套新的元素，使建構(gòu)網(wǎng)頁更變得更容易。大多數(shù)的HTML 4網(wǎng)頁含有各種共同的結(jié)構(gòu)，比如頁眉，頁腳和列，如今，使用div元素加上描述id或class來標(biāo)記是相當(dāng)普遍的。
此圖說明了一個典型的帶id和class屬性的div標(biāo)記的兩列布局。 它包含一個頁眉，頁腳和標(biāo)題下方的水平導(dǎo)航條。 主要內(nèi)容包含一篇文章和側(cè)右欄。
div元素的大量使用是因為***版本的HTML 4缺少必要的語義元素來更具體的描述這些部分。HTML5標(biāo)準(zhǔn)通過引入一些新的元素來解決這個問題，而這些元素表示各個不同的部分。
那些div元素可以用這些新元素代替：header, nav, section, article, aside, and footer
那個文檔的標(biāo)記可以如下所示：
- ﹤body﹥
- ﹤header﹥...﹤/header﹥
- ﹤nav﹥...﹤/nav﹥
- ﹤article﹥
- ﹤section﹥
- ...
- ﹤/section﹥
- ﹤/article﹥
- ﹤aside﹥...﹤/aside﹥
- ﹤footer﹥...﹤/footer﹥
- ﹤/body﹥
使用這些元素有幾個優(yōu)點。當(dāng)與標(biāo)題元素(h1,h2,h3,h4,h5,h6)聯(lián)同使用時，產(chǎn)生了一種使用標(biāo)題級別標(biāo)記嵌套章節(jié)的方法，這將超過以前版本HTML的6個標(biāo)題級別。這個規(guī)范包含一個生成大綱的詳細(xì)算法 ，其中考慮到這些元素的結(jié)構(gòu)并使之與以前版本的兼容。這個可以用來制作工具和瀏覽器生成內(nèi)容表以協(xié)助用戶瀏覽文檔，例如，以下標(biāo)記結(jié)構(gòu)使用嵌套的section和h1構(gòu)造：
- ﹤section﹥
- ﹤h1﹥Level 1﹤/h1﹥
- ﹤section﹥
- ﹤h1﹥Level 2﹤/h1﹥
- ﹤section﹥
- ﹤h1﹥Level 3﹤/h1﹥
- ﹤/section﹥
- ﹤/section﹥
- ﹤/section﹥
注意為了更好的與***瀏覽器兼容，也可能適當(dāng)用其他的標(biāo)題元素(h2,h3,h4,h5,h6)代替h1元素。通過確認(rèn)頁面各部分的目的，使用特定的章節(jié)元素和輔助技術(shù)能幫助用戶更容易地瀏覽網(wǎng)頁。例如，他們可以很容易地從導(dǎo)航欄跳讀或快速地從一篇文章跳到下一篇而不需要作者提供切換鏈接。作者也從中受益，由于采用幾個顯明的元素代替了文檔中大量的div元素，從而使得源代碼變得更清晰容易。
元素header表示一個部分的開頭，但可能不只是包含章節(jié)標(biāo)題——如它可以合理地加入副標(biāo)題，版本信息或署名等。
- ﹤header﹥
- ﹤h1﹥A Preview of HTML 5﹤/h1﹥
- ﹤p class="byline"﹥By Lachlan Hunt﹤/p﹥
- ﹤/header﹥﹤header﹥
- ﹤h1﹥Example Blog﹤/h1﹥
- ﹤h2﹥Insert tag line here.﹤/h2﹥
- ﹤/header﹥
元素footer表示所在章節(jié)的腳注。腳注通常包含章節(jié)信息如作者，相關(guān)文章鏈接，版權(quán)等等。元素nav表示導(dǎo)航鏈接部分。它適用于網(wǎng)站導(dǎo)航或目錄列表。
- ﹤nav﹥
- ﹤ul﹥
- ﹤li﹥﹤a href="/"﹥Home﹤/a﹥﹤/li﹥
- ﹤li﹥﹤a href="/products"﹥Products﹤/a﹥﹤/li﹥
- ﹤li﹥﹤a href="/services"﹥Services﹤/a﹥﹤/li﹥
- ﹤li﹥﹤a href="/about"﹥About﹤/a﹥﹤/li﹥
- ﹤/ul﹥
- ﹤/nav﹥
元素aside是為了關(guān)聯(lián)周邊參考內(nèi)容，一般用作側(cè)邊欄。
- ﹤aside﹥
- ﹤h1﹥Archives﹤/h1﹥
- ﹤ul﹥
- ﹤li﹥﹤a href="/2007/09/"﹥September 2007﹤/a﹥﹤/li﹥
- ﹤li﹥﹤a href="/2007/08/"﹥August 2007﹤/a﹥﹤/li﹥
- ﹤li﹥﹤a href="/2007/07/"﹥July 2007﹤/a﹥﹤/li﹥
- ﹤/ul﹥
- ﹤/aside﹥
元素section表示文章或應(yīng)用程序的通用部分，如一個章節(jié)，例：
- ﹤section﹥
- ﹤h1﹥Chapter 1: The Period﹤/h1﹥
- ﹤p﹥It was the best of times, it was the worst of times,
- it was the age of wisdom, it was the age of foolishness,
- it was the epoch of belief, it was the epoch of incredulity,
- it was the season of Light, it was the season of Darkness,
- ...﹤/p﹥
- ﹤/section﹥
元素article表示文檔，頁面或站點的獨(dú)立部分。它適用于像新聞，博客文章，論壇帖子或個人意見等內(nèi)容。
- ﹤article id="comment-2"﹥
- ﹤header﹥
- ﹤h4﹥﹤a href="#comment-2" rel="bookmark"﹥Comment #2﹤/a﹥
- by ﹤a href="http://example.com/"﹥Jack O'Niell﹤/a﹥﹤/h4﹥
- ﹤p﹥﹤time datetime="2007-08-29T13:58Z"﹥August 29th, 2007 at 13:58﹤/time﹥
- ﹤/header﹥
- ﹤p﹥That's another great article!﹤/p﹥
- ﹤/article﹥
【編輯推薦】
