從零開始構建HTML 5 Web頁面

作者：黃永兵譯 2010-02-22 09:39:52

HTML 5有何不同？這個新的Web標準都新增了那些標記？它將如何改變我們現有的Web開發？本文將向您詳細解答這些問題并用實例打造一個完整的HTML 5 Web頁面。

【51CTO譯文】HTML 5是時下Web開發領域炒得火熱的一個術語，是的，很多人都看好它，也有很多業內知名公司開始正式使用HTML 5重新構建自己的網站，如YouTube開始使用HTML 5視頻，Google已經棄用自家的Gears，開始全面擁抱HTML 5實現離線解決方案，各大瀏覽器廠家也紛紛開始支持HTML 5，連被人詬病的微軟也聲稱要在IE 9中增加對HTML 5的支持。本文打算為大家詳細介紹一下如何構建一個完整的HTML 5 Web頁面，以加深對HTML 5的理解。

HTML 5有何不同？

首先我們要明白HTML 5是新的語義結構標記，包括畫布，離線存儲規范和一些新的內聯語義標記，但由于客觀原因（主要是瀏覽器支持的原因），我們不得不限制標記的討論范圍，如畫布，離線存儲，原生視頻或地理定位API等，還不是所有的瀏覽器都支持。

由于新的HTML 5標記大都是結構性的，它們的行為與塊元素有些類似，為了幫助大家加深對HTML 5的理解，我將在下面的內容使用一些新的結構元素。

每個人都應該記住的doctype（文檔類型）

要創建HTML 5 Web頁面的***件事情是使用新的doctype，你一定記住了HTML 4或XHTML 1.x的doctype，當我們要從舊的文檔通過復制粘貼到新的文檔中，必須要修改doctype，請記住，下面就是HTML 5的doctype：

<!DOCTYPE html>

還是很容易記住吧，而且也不區分大小寫，與現在廣泛使用的版本要簡單得多了，而且保持了向后兼容。

語義結構

在深入標記前，我們先初略看一下一個Web頁面的大致結構吧。

<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標記增加了ID，相信大多數Web設計師都很熟悉這種做法了，這么做有兩個目的，首先，ID提供了一個鉤子，通過它可以對頁面的特定部分應用樣式，其次，ID作為一種原始的，偽語義結構，智能解析器將查找標簽上的ID屬性，并嘗試猜測其含義，但這是一件很困難的事情，因為每個網站的ID可能都不一樣。

于是就有了增加新標簽的想法，HTML 5的創造者們就設計了一些新的元素，下面我們就來看看HTML 5中新增的一些關鍵的結構性標記。

◆ <header>

這個標記計劃用來描述一節或一個完整Web頁面的介紹性信息，<header>標記可以包括所有的通常放在頁面頭部的標志，如果你在頁面中使用了<div id="header">，它將被<header>取代。

◆ <nav>

這個元素的含義就不說了，你的導航元素就放在這里，如主站點導航，但在某些情況下也可能有頁面導航元素，HTML 5的創建人WHATWG最近修改了<nav>的解釋，展示了如何在一個頁面上使用兩次。有關nav更多的討論，可以參考：http://www.zeldman.com/2009/07/13/html-5-nav-ambiguity-resolved/。

簡單說來，如果你在頁面中使用了<div id="nav">標記來容納導航元素，那么你可以使用<nav>進行替換。

◆ <section>

這個可能是最模糊不清的標記了，按照HTML 5規范的解釋，一個section是一個有主題的內容組，前面通常有一個header標記，后面通常跟一個footer標記，如果需要，section也可以嵌套使用。

在我們上面的例子中，標記為“content”的DIV是section的一個很好候選者，在這個section中，根據內容的不同，我們可能有更多的section。

◆ <article>

根據WHATWG的注釋，article元素是將section進行打包形成一個文檔或網站獨立的部分，例如一篇雜志或報紙文章，或一篇博客文章。

記住，在一個頁面中可以有多個article元素，例如一個博客首頁可能會有10多個article元素，article也可以進入section元素，因此你在嵌套使用時需要小心，可能一不小心就會出錯。

◆ <aside>

另一個模糊不清的標記是aside，這個元素表現的是與文檔主要文本流無關的內容，也就是相當于一個括號備注，腳注，引用，注釋，或者說是類似于側邊欄的東西，根據WHATWG的注釋，<aside>可以用于所有這些情況。

◆ <footer>

Footer的含義也非常清楚，它可以用在section中，也可以用于一個頁面的底部。 #p#

全部放在一起

現在我們全部使用新標記重寫前面的示例頁面。

<!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標記中。另外請注意，我們可以在article元素下再增加一個footer元素，用來容納如翻頁導航，相關文章或其它內容。

新標記的樣式

在大多數瀏覽器中，你只需要如往常一樣對元素使用樣式，但是請一定要對每個元素加上display:block;規則，隨著時間的推移，瀏覽器對HTML 5新元素的支持越來越標準后，就可以不使用了。

下面我們隊header應用一些樣式：

header {  
    display: block;  
    font-size: 36px;  
    font-weight: bold;  
}

記住，你現在仍然可以在這些元素上添加class和ID屬性，因此，如果你想對導航小節單獨使用一個樣式，你可以向下面這樣增加一個class或ID屬性：

<nav class="main-menu">

然后再應用一個樣式：

nav.main-menu {  
    font-size: 18px;  
}

與舊瀏覽器的兼容

這些樣式都不能在IE 6下使用，如果你堅持要保持與舊瀏覽器兼容，也是有補救辦法的，IE 6可以解析這些標記，但不能應用樣式，解決辦法就是使用JavaScript，使用createElement方法就可以讓IE支持HTML 5標記的樣式了，你可以在HTML 5文件的頭部包括這段代碼，也可以保存到一個獨立文件中，然后進行引用。

<script> 
  document.createElement('header');  
  document.createElement('nav');  
  document.createElement('section');  
  document.createElement('article');  
  document.createElement('aside');  
  document.createElement('footer');  
</script>

你可能要問，為什么沒有給這段腳本指定MIME類型呢？在HTML 5中無需指定了，在HTML 5中，所有的腳本都假設是type="text/javascript"，因此不必再多此一舉了。

雖然IE的問題得到了解決，但據我所知，Firefox 2中的Gecko渲染引擎仍然存在一個bug，解決辦法有兩個，但這兩個辦法都不是很理想，更多信息請看這里http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2/。考慮到Firefox 2的使用人數已經很少，你可以完全忽視這個bug。

現在你已經可以使用HTML 5了，但應該使用嗎？

答案很簡單：是的！

但這也要根據網站的性質做出調整，例如，假設你要重構CNN主頁，那可能不太現實，***還是等瀏覽器的支持更好一些再說，但如果你是在翻新你的博客系統，那么你可以一試，如果你使用的WordPress，目前已經出現了一些插件可以幫助你，這里就有一個HTML 5的WordPress主題。

你也可以去HTML 5畫廊（http://html5gallery.com/）瞧瞧，因為它全部是用HTML 5構建的，可以看看其源碼，加深對HTML 5標記的理解。還可以繼續關注51CTO.com的HTML 5專題，我們會持續更新關于HTML 5的技術應用和資訊報道。

如果你還有點猶豫不決，那你去看看Google的主頁，已經是HTML 5了，保險一點的話，你可以使用JavaScript聲明這些新標記進行使用。HTML 5的標記遠不止這些，希望本文能消除你的疑慮，大膽使用HTML 5，只有使用的人多了，這個規范才能真正見效。

責任編輯：佚名來源： 51CTO.com

HTML 5 Web

成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

從零開始構建HTML 5 Web頁面