HTML 5如同一場革命,正在Web2.0後時代轟轟烈烈的進行著。
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的情況下會觸發怪異模式,而只要定義了<!doctype html>瀏覽器就可以在標準模式下解析頁面,而不需要指定某個類型的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、Chroome甚至新版的IE)都有一個快捷鍵可以帶引客戶直接跳轉到頁面的導航,但問題是所有的區塊都是用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的頁面結構可以如此之美,不用註釋也能一目了然。對於瀏覽器,找到對應的區塊也不再會茫然無措。
如何用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>
</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去描繪你的宏偉藍圖吧!