HTML5標準最新技術預覽
51CTO推薦專題：HTML 5，下一代Web開發(fā)標準詳解
已經(jīng)存在近十年的HTML4已經(jīng)成為不斷發(fā)展的Web開發(fā)領域的瓶頸；HTML5標準在此時顯得尤為重要。每天都有新穎而創(chuàng)新的網(wǎng)站出現(xiàn)，全方位地拓展HTML的邊界。Web開發(fā)者正在尋求新的技術，提供更強大的功能，那些因為腳本語言和瀏覽器的限制而被隱瞞了的功能。
為了實現(xiàn)更好的靈活性和更強的互動性，及創(chuàng)造令人興奮而更具交互性的網(wǎng)站和應用程序，HTML5 引入和增強了更為廣泛的特性，包括控制，APIs，多媒體，結構和語義等。
有關HTML5標準的工作，起于2004年，在W3C HTML WG和WHATWG的共同努力下，目前還在進行中。許多關鍵成員加入了W3G的工作，包括四大主流瀏覽器廠商代表：蘋果，Mozilla，Opera，和微軟；還有一些有著不同利益和專業(yè)知識的其他組織和個人。
請注意，規(guī)范仍然只是一個進行中的工作，完成它還有很長的路要走。因此，文章中提到的這些特性可能將發(fā)生改變。這篇文章是為了對目前草案中的一些主要特性做一個簡單的介紹。
結構
HTML5標準中引入了一整套新的元素，使建構網(wǎng)頁更變得更容易。大多數(shù)的HTML 4網(wǎng)頁含有各種共同的結構，比如頁眉，頁腳和列，如今，使用div元素加上描述id或class來標記是相當普遍的。
此圖說明了一個典型的帶id和class屬性的div標記的兩列布局。 它包含一個頁眉，頁腳和標題下方的水平導航條。 主要內容包含一篇文章和側右欄。
div元素的大量使用是因為***版本的HTML 4缺少必要的語義元素來更具體的描述這些部分。HTML5標準通過引入一些新的元素來解決這個問題，而這些元素表示各個不同的部分。
那些div元素可以用這些新元素代替：header, nav, section, article, aside, and footer
那個文檔的標記可以如下所示：
- ﹤body﹥
- ﹤header﹥...﹤/header﹥
- ﹤nav﹥...﹤/nav﹥
- ﹤article﹥
- ﹤section﹥
- ...
- ﹤/section﹥
- ﹤/article﹥
- ﹤aside﹥...﹤/aside﹥
- ﹤footer﹥...﹤/footer﹥
- ﹤/body﹥
使用這些元素有幾個優(yōu)點。當與標題元素(h1,h2,h3,h4,h5,h6)聯(lián)同使用時，產(chǎn)生了一種使用標題級別標記嵌套章節(jié)的方法，這將超過以前版本HTML的6個標題級別。這個規(guī)范包含一個生成大綱的詳細算法 ，其中考慮到這些元素的結構并使之與以前版本的兼容。這個可以用來制作工具和瀏覽器生成內容表以協(xié)助用戶瀏覽文檔，例如，以下標記結構使用嵌套的section和h1構造：
- ﹤section﹥
- ﹤h1﹥Level 1﹤/h1﹥
- ﹤section﹥
- ﹤h1﹥Level 2﹤/h1﹥
- ﹤section﹥
- ﹤h1﹥Level 3﹤/h1﹥
- ﹤/section﹥
- ﹤/section﹥
- ﹤/section﹥
注意為了更好的與***瀏覽器兼容，也可能適當用其他的標題元素(h2,h3,h4,h5,h6)代替h1元素。通過確認頁面各部分的目的，使用特定的章節(jié)元素和輔助技術能幫助用戶更容易地瀏覽網(wǎng)頁。例如，他們可以很容易地從導航欄跳讀或快速地從一篇文章跳到下一篇而不需要作者提供切換鏈接。作者也從中受益，由于采用幾個顯明的元素代替了文檔中大量的div元素，從而使得源代碼變得更清晰容易。
元素header表示一個部分的開頭，但可能不只是包含章節(jié)標題——如它可以合理地加入副標題，版本信息或署名等。
- ﹤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é)信息如作者，相關文章鏈接，版權等等。元素nav表示導航鏈接部分。它適用于網(wǎng)站導航或目錄列表。
- ﹤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是為了關聯(lián)周邊參考內容，一般用作側邊欄。
- ﹤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表示文章或應用程序的通用部分，如一個章節(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表示文檔，頁面或站點的獨立部分。它適用于像新聞，博客文章，論壇帖子或個人意見等內容。
- ﹤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﹥
【編輯推薦】
