HTML 5的革新：結構之美

作者：iefans 2011-04-11 10:14:47

本文從頁面的doctype說起，到用HTML 5新標簽搭建語義化更明確的頁面的結構，再解釋了一番與頁面結構相關的新標簽。相信大家對HTML 5的結構性新標簽有了一個新的認知，如果你有興趣，那就打開你的IDE，寫上一段由HTML 5新標簽搭建的代碼，然后用CSS去描繪你的宏偉藍圖吧!

HTML 5如同一場革命，正在Web2.0后時代轟轟烈烈的進行著。

51CTO推薦專題：HTML 5 下一代Web開發標準詳解

HTML 5是什么，無須我在這里贅述了。對于HTML 5的革新，按我的理解，可以總結為語義明確的標簽體系、化繁為簡的富媒體支持、神奇的本地數據存儲技術、不需要插件的富動畫(canvas)、強大的API支持。總之，HTML 5讓人機交互，人網交互變得更加舒適，貼合用戶。以往對富媒體應用與本存儲的支持乏力也不再是瀏覽器的切膚之痛。將Web從內容平臺推向標準化的應用平臺，并一統各在平臺陣營的標準，才是HTML 5革命的初衷。

本文，我就拋磚引玉，闡述HTML 5的革新之一：語義更明確簡潔的結構。

從”頭”說起

一個標準的XHTML頭部代碼應該是這樣：

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> 
<html xmlns=”http://www.w3.org/1999/xhtml”> 
<head> 
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> 
</head>

你能記住嗎?你會去死記硬背嗎?當然不會!我們只需要機械的復制粘貼即可。

再看看一個標準的HTML 5頭部是如何的：

<!doctype html> 
<meta charset=gb2312>

孰繁孰簡，就不用我說了。是的，HTML 5的頭部可以如此簡單，可以輕易的記住!并且，可以忽略大小寫，引號以及最后一個尖括號前的反斜線。

為什么可以如此松散?其實，如果把XHTML當成text/html發送，瀏覽器一樣可以很好的解析，瀏覽器并不在乎代碼的語法。所以，HTML 5是形而上的，它可能會破壞原有的一些標準，但仍可在瀏覽器中很好的表現。

當然，為了團隊協助與后續維護的方便，我們還是應該統一一種你喜歡的風格的寫法，比如：

<!doctype html> 
<html> 
<head> 
<meta charset=”gb2312″ /> 
…  
</head> 
<body> 
…  
</body> 
</html>

另外，HTML 5雖然目前并不為所有瀏覽器所支持，但這個能省去100多字節(對于日PV百萬級以上的站點，能省下不少的流量哦)的頭部已可以完美的兼容了。如果你對瀏覽器解析模式有研究的話，你應該知道，頁面在沒有定義doctype的情況下會觸發怪異模式，而只要定義了瀏覽器就可以在標準模式下解析頁面，而不需要指定某個類型的DTD。

新的語義化標簽體系

語義化編碼是一個合格前端Developer必備的技能，但隨著網頁的日漸豐富化，僅僅用原有的xhtml標簽去語義化顯然已經力不從心。上帝說：”要有光!”便有了光。于是，HTML 5提供了一系列新的標簽及相應屬性，以反應現代網站典型語義。實踐出真理。還是寫一個例子吧：

<div id=”header”> 
<div class=”hgroup”> 
<h1>網站標題</h1> 
<h1>網站副標題</h1> 
</div> 
<div id=”nav”> 
<ul> 
<li>HTML 5</li> 
<li>CSS</li> 
<li>JavaScript</li> 
</ul> 
</div> 
</div> 
<!–//header end–> 
<div id=”left”> 
<div class=”article”> 
<p>這是一篇講述HTML 5新結構標簽的文章。</p> 
</div> 
<div class=”article”> 
<p>這還是一篇講述HTML 5新結構標簽的文章。</p> 
</div> 
</div> 
<!–//left end–> 
<div id=”aside”> 
<h1>作者簡介</h1> 
<p>Mr.Think，專注Web前端技術的凡夫俗子。</p> 
</div> 
<!–//side end–> 
<div id=”footer”> 
頁面的底部  
</div> 
<!–//footer end–>

上面是一個簡單的博客頁面部分HTML，由頭部、文章展示區、右側欄、底部組成。編碼整潔，也符合XHTML的語義化，即便是在HTML 5中也可以很好的表現。但是對瀏覽器來說，這就是一段沒有區分開權重的代碼，而不是一個讓機器也能讀懂語義的標簽來定義相應的區塊。比如，標準瀏覽器(比如Firefox、Chrome甚至新版的IE9)都有一個快捷鍵可以帶引客戶直接跳轉到頁面的導航，但問題是所有的區塊都是用DIV定義，并且DIV的ID值是同開發者定的，所以，瀏覽器并不知道哪個應該是導航鏈接所在區塊。HTML 5新標簽的出現，正好彌補了這一缺憾。那么，上面的代碼，換成HTML 5就可以這樣寫：

<header> 
<hgroup> 
<h1>網站標題</h1> 
<h1>網站副標題</h1> 
</hgroup> 
<nav> 
<ul> 
<li>HTML 5</li> 
<li>CSS</li> 
<li>JavaScript</li> 
</ul> 
</nav> 
</header> 
<div id=”left”> 
<article> 
<p>這是一篇講述HTML 5新結構標簽的文章。</p> 
</article> 
<article> 
<p>這還是一篇講述HTML 5新結構標簽的文章。</p> 
</article> 
</div> 
<aside> 
<h1>作者簡介</h1> 
<p>Mr.Think，專注Web前端技術的凡夫俗子。</p> 
</aside> 
<footer> 
網頁底部  
</footer>

原來，HTML的頁面結構可以如此之美，不用注釋也能一目了然。對于瀏覽器，找到對應的區塊也不再會茫然無措。

#p#

如何用HTML 5新標簽結構化元素

通過上面的示例，我們了解到HTML 5的新標簽對結構化的革新，但切換到實際使用中，該如何恰當的使用它們呢?我想這也是很多HTML 5學習者想問一個問題。如同XHTML語義化一樣，HTML 5語義化標簽的使用也應該遵循：每個標簽都有它特定的意義，而語義化，就是讓我們在適當的位置用適當的標簽，以更好的讓人和機器(機器可理解為瀏覽器可理解為搜索引擎)都一目了然。比如header標簽一般是頁面的第一個區塊元素(header標簽也可用于類型的頭部元素中，比如文章區塊的標題)，包含的了頁面的主題信息;nav標簽一般用于包裹導航信息;footer一般用來包裹頁面底部信息;等等。

下面是我參考HTML 5手冊列出的結構類常用新標簽的語義解釋及使用指引：

<header>標簽

手冊釋義：定義 section 或 document 的頁眉。

使用指引：一般用來包含頁面頭部，也可用于其他區域頭部，比如article頭部：

<header> 
<hgroup> 
<h1>網站標題</h1> 
<h1>網站副標題</h1> 
</hgroup> 
</header>

<hgroup>標簽

手冊釋義：用于對網頁或區段(section)的標題進行組合。

使用指引：用于標題類的組合，比如文章的標題與副標題：

<hgroup> 
<h1>這是一篇介紹HTML 5結構標簽的文章</h1> 
<h2>HTML 5的革新</h2> 
</hgroup>

<nav>標簽

手冊釋義：定義導航鏈接的部分。

使用指引：用于定義頁面的導航部分：

<nav> 
<ul> 
<li>HTML 5</li> 
<li>CSS</li> 
<li>JavaScript</li> 
</ul> 
</nav>

<aside>標簽

定義 article 以外的內容。aside 的內容應該與 article 的內容相關。

使用指引：用于成節的內容，會在文檔流中開始一個新的節，一般用于與文章內容相關的邊欄：

<aside> 
<h1>作者簡介</h1> 
<p>Mr.Think，專注Web前端技術的凡夫俗子。</p> 
</aside>

<section>標簽

手冊釋義：定義文檔中的節(section)。比如章節、頁眉、頁腳或文檔中的其他部分。

使用指引：用于成節的內容，會在文檔流中開始一個新的節：

<section> 
<h1>section是什么？</h1> 
<h2>一個新的章節</h2> 
<article> 
<h2>關于section</h1> 
<p>section的介紹</p> 
…  
</article> 
</section>

<footer>標簽

手冊釋義：定義 section 或 document 的頁腳。典型地，它會包含創作者的姓名、文檔的創作日期以及/或者聯系信息。

使用指引：一般用來包裹整個頁面通用底部，也可用于其他區域底部，比如article底部：

<footer> 
COPYRIGHT@ieFans.Net  
</footer>

<article>標簽

手冊釋義：定義外部的內容。比如來自一個外部的新聞提供者的一篇新的文章，或者來自 blog 的文本，或者是來自論壇的文

本。亦或是來自其他外部源內容。

使用指引：顧名思義，一般用于文章區塊：

<article> 
<header> 
<hgroup> 
<h1>這是一篇介紹HTML 5結構標簽的文章</h1> 
<h2>HTML 5的革新</h2> 
</hgroup> 
<time datetime=”2011-03-20″>2011.03.20</time> 
</header> 
<p>文章內容詳情</p> 
</article>

<figure>標簽

手冊釋義：用于對元素進行組合。

使用指引：多用于圖片與圖片描述組合：

<figure> 
<img src=”img.gif” alt=”figure標簽”  title=”figure標簽” /> 
<figcaption>這兒是圖片的描述信息</figcaption> 
</figure>

<menu>標簽

手冊釋義：定義菜單列表。當希望列出表單控件時使用該標簽。

使用指引：使用于菜單類區塊，用來定義菜單列表或菜單選項:

<menu> 
<li>HTML 5</li> 
<li>CSS</li> 
<li>JavaScript</li> 
</menu>

HTML 5的其他新標簽，就不此一一解釋了，請自行查詢一下手冊。

其實，這些東西，如同XHTML的div、h1、inpu等標簽一樣，只要平時多加實踐，運用自如也是輕而易舉的。

關于兼容性

如果你是一個喜歡研究關注前端的人，你應該知道淘寶的頁面結構中已大量用到了HTML 5新標簽。所以，我想說的是只要敢于嘗試，兼容性不是問題，兼容的方法，網上有很多(本文是講結構的，哈~)。

后話

任何一門新技術，都需要一個適應的過程。如果你準備好了做一名優秀的Web前端開發人員，那你就得不斷的嘗試并接受最新的前端技術。

孫文曾說，欲經文明這幸福，不得不經文明之痛苦。人類的革命如此，HTML 5的革命亦是如此。IE的日漸沒落，讓各大瀏覽器廠商以一次進入了戰國時代，群雄逐鹿。而對于開發者，我們只奢求各大瀏覽器廠商盡可能的遵循同一個標準，而不是群雄逐鹿后的四分五裂。因為，高效完美的呈現給各類用戶同樣的應用才是我們的終極目標。

如此，本文從頁面的doctype說起，到用HTML 5新標簽搭建語義化更明確的頁面的結構，再解釋了一番與頁面結構相關的新標簽。相信大家對HTML 5的結構性新標簽有了一個新的認知，如果你有興趣，那就打開你的IDE，寫上一段由HTML 5新標簽搭建的代碼，然后用CSS去描繪你的宏偉藍圖吧!

原文鏈接：http://www.iefans.net/html5-jiegou-zhimei/

【編輯推薦】

九個令人驚嘆的HTML 5和JavaScript實驗
HTML 5標準學習入門之文檔結構
HTML 5標準學習入門之DOCTYPE
學習HTML 5十佳站點推薦
10個超棒的HTML 5素描及繪畫設計工具

責任編輯：陳貽新來源： iefans

HTML 5