從零開(kāi)始構(gòu)建HTML 5 Web頁(yè)面
原創(chuàng)【51CTO譯文】HTML 5是時(shí)下Web開(kāi)發(fā)領(lǐng)域炒得火熱的一個(gè)術(shù)語(yǔ)，是的，很多人都看好它，也有很多業(yè)內(nèi)知名公司開(kāi)始正式使用HTML 5重新構(gòu)建自己的網(wǎng)站，如YouTube開(kāi)始使用HTML 5視頻，Google已經(jīng)棄用自家的Gears，開(kāi)始全面擁抱HTML 5實(shí)現(xiàn)離線解決方案，各大瀏覽器廠家也紛紛開(kāi)始支持HTML 5，連被人詬病的微軟也聲稱要在IE 9中增加對(duì)HTML 5的支持。本文打算為大家詳細(xì)介紹一下如何構(gòu)建一個(gè)完整的HTML 5 Web頁(yè)面，以加深對(duì)HTML 5的理解。
HTML 5有何不同？
首先我們要明白HTML 5是新的語(yǔ)義結(jié)構(gòu)標(biāo)記，包括畫布，離線存儲(chǔ)規(guī)范和一些新的內(nèi)聯(lián)語(yǔ)義標(biāo)記，但由于客觀原因（主要是瀏覽器支持的原因），我們不得不限制標(biāo)記的討論范圍，如畫布，離線存儲(chǔ)，原生視頻或地理定位API等，還不是所有的瀏覽器都支持。
由于新的HTML 5標(biāo)記大都是結(jié)構(gòu)性的，它們的行為與塊元素有些類似，為了幫助大家加深對(duì)HTML 5的理解，我將在下面的內(nèi)容使用一些新的結(jié)構(gòu)元素。
每個(gè)人都應(yīng)該記住的doctype（文檔類型）
要?jiǎng)?chuàng)建HTML 5 Web頁(yè)面的***件事情是使用新的doctype，你一定記住了HTML 4或XHTML 1.x的doctype，當(dāng)我們要從舊的文檔通過(guò)復(fù)制粘貼到新的文檔中，必須要修改doctype，請(qǐng)記住，下面就是HTML 5的doctype：
- <!DOCTYPE html>
還是很容易記住吧，而且也不區(qū)分大小寫，與現(xiàn)在廣泛使用的版本要簡(jiǎn)單得多了，而且保持了向后兼容。
語(yǔ)義結(jié)構(gòu)
在深入標(biāo)記前，我們先初略看一下一個(gè)Web頁(yè)面的大致結(jié)構(gòu)吧。
- <html>
- <head>
- ...stuff...
- </head>
- <body>
- <div id="header">
- <h1>My Site</h1>
- </div>
- <div id="nav">
- <ul>
- <li>Home</li>
- <li>About</li>
- <li>Contact</li>
- </ul>
- </div>
- <div id=content>
- <h1>My Article</h1>
- <p>...</p>
- </div>
- <div id="footer">
- <p>...</p>
- </div>
- </body>
- </html>
在上面的例子中，我為所有DIV標(biāo)記增加了ID，相信大多數(shù)Web設(shè)計(jì)師都很熟悉這種做法了，這么做有兩個(gè)目的，首先，ID提供了一個(gè)鉤子，通過(guò)它可以對(duì)頁(yè)面的特定部分應(yīng)用樣式，其次，ID作為一種原始的，偽語(yǔ)義結(jié)構(gòu)，智能解析器將查找標(biāo)簽上的ID屬性，并嘗試猜測(cè)其含義，但這是一件很困難的事情，因?yàn)槊總€(gè)網(wǎng)站的ID可能都不一樣。
于是就有了增加新標(biāo)簽的想法，HTML 5的創(chuàng)造者們就設(shè)計(jì)了一些新的元素，下面我們就來(lái)看看HTML 5中新增的一些關(guān)鍵的結(jié)構(gòu)性標(biāo)記。
◆ <header>
這個(gè)標(biāo)記計(jì)劃用來(lái)描述一節(jié)或一個(gè)完整Web頁(yè)面的介紹性信息，<header>標(biāo)記可以包括所有的通常放在頁(yè)面頭部的標(biāo)志，如果你在頁(yè)面中使用了<div id="header">，它將被<header>取代。
◆ <nav>
這個(gè)元素的含義就不說(shuō)了，你的導(dǎo)航元素就放在這里，如主站點(diǎn)導(dǎo)航，但在某些情況下也可能有頁(yè)面導(dǎo)航元素，HTML 5的創(chuàng)建人WHATWG最近修改了<nav>的解釋，展示了如何在一個(gè)頁(yè)面上使用兩次。有關(guān)nav更多的討論，可以參考：http://www.zeldman.com/2009/07/13/html-5-nav-ambiguity-resolved/。
簡(jiǎn)單說(shuō)來(lái)，如果你在頁(yè)面中使用了<div id="nav">標(biāo)記來(lái)容納導(dǎo)航元素，那么你可以使用<nav>進(jìn)行替換。
◆ <section>
這個(gè)可能是最模糊不清的標(biāo)記了，按照HTML 5規(guī)范的解釋，一個(gè)section是一個(gè)有主題的內(nèi)容組，前面通常有一個(gè)header標(biāo)記，后面通常跟一個(gè)footer標(biāo)記，如果需要，section也可以嵌套使用。
在我們上面的例子中，標(biāo)記為“content”的DIV是section的一個(gè)很好候選者，在這個(gè)section中，根據(jù)內(nèi)容的不同，我們可能有更多的section。
◆ <article>
根據(jù)WHATWG的注釋，article元素是將section進(jìn)行打包形成一個(gè)文檔或網(wǎng)站獨(dú)立的部分，例如一篇雜志或報(bào)紙文章，或一篇博客文章。
記住，在一個(gè)頁(yè)面中可以有多個(gè)article元素，例如一個(gè)博客首頁(yè)可能會(huì)有10多個(gè)article元素，article也可以進(jìn)入section元素，因此你在嵌套使用時(shí)需要小心，可能一不小心就會(huì)出錯(cuò)。
◆ <aside>
另一個(gè)模糊不清的標(biāo)記是aside，這個(gè)元素表現(xiàn)的是與文檔主要文本流無(wú)關(guān)的內(nèi)容，也就是相當(dāng)于一個(gè)括號(hào)備注，腳注，引用，注釋，或者說(shuō)是類似于側(cè)邊欄的東西，根據(jù)WHATWG的注釋，<aside>可以用于所有這些情況。
◆ <footer>
Footer的含義也非常清楚，它可以用在section中，也可以用于一個(gè)頁(yè)面的底部。 #p#
全部放在一起
現(xiàn)在我們?nèi)渴褂眯聵?biāo)記重寫前面的示例頁(yè)面。
- <!DOCTYPE html>
- <html>
- <head>
- ...stuff...
- </head>
- <body>
- <header>
- <h1>My Site</h1>
- </header>
- <nav>
- <ul>
- <li>Home</li>
- <li>About</li>
- <li>Contact</li>
- </ul>
- </nav>
- <section>
- <h1>My Article</h1>
- <article>
- <p>...</p>
- </article>
- </section>
- <footer>
- <p>...</p>
- </footer>
- </body>
- </html>
是不是更干凈，更易于理解呢？我們可以把<h1>My Article</h1>打包到header標(biāo)記中。另外請(qǐng)注意，我們可以在article元素下再增加一個(gè)footer元素，用來(lái)容納如翻頁(yè)導(dǎo)航，相關(guān)文章或其它內(nèi)容。
新標(biāo)記的樣式
在大多數(shù)瀏覽器中，你只需要如往常一樣對(duì)元素使用樣式，但是請(qǐng)一定要對(duì)每個(gè)元素加上display:block;規(guī)則，隨著時(shí)間的推移，瀏覽器對(duì)HTML 5新元素的支持越來(lái)越標(biāo)準(zhǔn)后，就可以不使用了。
下面我們隊(duì)header應(yīng)用一些樣式：
- header {
- display: block;
- font-size: 36px;
- font-weight: bold;
- }
記住，你現(xiàn)在仍然可以在這些元素上添加class和ID屬性，因此，如果你想對(duì)導(dǎo)航小節(jié)單獨(dú)使用一個(gè)樣式，你可以向下面這樣增加一個(gè)class或ID屬性：
- <nav class="main-menu">
然后再應(yīng)用一個(gè)樣式：
- nav.main-menu {
- font-size: 18px;
- }
與舊瀏覽器的兼容
這些樣式都不能在IE 6下使用，如果你堅(jiān)持要保持與舊瀏覽器兼容，也是有補(bǔ)救辦法的，IE 6可以解析這些標(biāo)記，但不能應(yīng)用樣式，解決辦法就是使用JavaScript，使用createElement方法就可以讓IE支持HTML 5標(biāo)記的樣式了，你可以在HTML 5文件的頭部包括這段代碼，也可以保存到一個(gè)獨(dú)立文件中，然后進(jìn)行引用。
- <script>
- document.createElement('header');
- document.createElement('nav');
- document.createElement('section');
- document.createElement('article');
- document.createElement('aside');
- document.createElement('footer');
- </script>
你可能要問(wèn)，為什么沒(méi)有給這段腳本指定MIME類型呢？在HTML 5中無(wú)需指定了，在HTML 5中，所有的腳本都假設(shè)是type="text/javascript"，因此不必再多此一舉了。
雖然IE的問(wèn)題得到了解決，但據(jù)我所知，F(xiàn)irefox 2中的Gecko渲染引擎仍然存在一個(gè)bug，解決辦法有兩個(gè)，但這兩個(gè)辦法都不是很理想，更多信息請(qǐng)看這里http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/?？紤]到Firefox 2的使用人數(shù)已經(jīng)很少，你可以完全忽視這個(gè)bug。
現(xiàn)在你已經(jīng)可以使用HTML 5了，但應(yīng)該使用嗎？
答案很簡(jiǎn)單：是的！
但這也要根據(jù)網(wǎng)站的性質(zhì)做出調(diào)整，例如，假設(shè)你要重構(gòu)CNN主頁(yè)，那可能不太現(xiàn)實(shí)，***還是等瀏覽器的支持更好一些再說(shuō)，但如果你是在翻新你的博客系統(tǒng)，那么你可以一試，如果你使用的WordPress，目前已經(jīng)出現(xiàn)了一些插件可以幫助你，這里就有一個(gè)HTML 5的WordPress主題。
你也可以去HTML 5畫廊（http://html5gallery.com/）瞧瞧，因?yàn)樗渴怯肏TML 5構(gòu)建的，可以看看其源碼，加深對(duì)HTML 5標(biāo)記的理解。還可以繼續(xù)關(guān)注51CTO.com的HTML 5專題，我們會(huì)持續(xù)更新關(guān)于HTML 5的技術(shù)應(yīng)用和資訊報(bào)道。
如果你還有點(diǎn)猶豫不決，那你去看看Google的主頁(yè)，已經(jīng)是HTML 5了，保險(xiǎn)一點(diǎn)的話，你可以使用JavaScript聲明這些新標(biāo)記進(jìn)行使用。HTML 5的標(biāo)記遠(yuǎn)不止這些，希望本文能消除你的疑慮，大膽使用HTML 5，只有使用的人多了，這個(gè)規(guī)范才能真正見(jiàn)效。
