共計 3667 個字符，預計需要花費 10 分鐘才能閱讀完成。
這篇文章的內容主要圍繞如何構建 HTML 5 Web 頁面進行講述，文章內容清晰易懂，條理清晰，非常適合新手學習，值得大家去閱讀。感興趣的朋友可以跟隨丸趣 TV 小編一起閱讀吧。希望大家通過這篇文章有所收獲！
HTML 5 是時下 Web 開發領域炒得火熱的一個術語，是的，很多人都看好它，也有很多業內知名公司開始正式使用 HTML 5 重新構建自己的網站，如 YouTube 開始使用 HTML 5 視頻，Google 已經棄用自家的 Gears，開始全面擁抱 HTML 5 實現離線解決方案，各大瀏覽器廠家也紛紛開始支持 HTML 5，連被人詬病的微軟也聲稱要在 IE 9 中增加對 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：
1
!DOCTYPE html
還是很容易記住吧，而且也不區分大小寫，與現在廣泛使用的版本要簡單得多了，而且保持了向后兼容。
語義結構
在深入標記前，我們先初略看一下一個 Web 頁面的大致結構吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
html
head
…stuff…
/head
body
p id= header
h2 My Site /h2
/p
p id= nav
ul
li Home /li
li About /li
li Contact /li
/ul
/p
p id=content
h2 My Article /h2
p … /p
/p
p id= footer
p … /p
/p
/body
/html
在上面的例子中，我為所有 DIV 標記增加了 ID，相信大多數 Web 設計師都很熟悉這種做法了，這么做有兩個目的，首先，ID 提供了一個鉤子，通過它可以對頁面的特定部分應用樣式，其次，ID 作為一種原始的，偽語義結構，智能解析器將查找標簽上的 ID 屬性，并嘗試猜測其含義，但這是一件很困難的事情，因為每個網站的 ID 可能都不一樣。
于是就有了增加新標簽的想法，HTML 5 的創造者們就設計了一些新的元素，下面我們就來看看 HTML 5 中新增的一些關鍵的結構性標記。
◆ header
這個標記計劃用來描述一節或一個完整 Web 頁面的介紹性信息，header 標記可以包括所有的通常放在頁面頭部的標志，如果你在頁面中使用了 p id= header，它將被 header 取代。
◆ nav
這個元素的含義就不說了，你的導航元素就放在這里，如主站點導航，但在某些情況下也可能有頁面導航元素，HTML 5 的創建人 WHATWG 最近修改了 nav 的解釋，展示了如何在一個頁面上使用兩次.
簡單說來，如果你在頁面中使用了 p 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 中，也可以用于一個頁面的底部。
全部放在一起
現在我們全部使用新標記重寫前面的示例頁面。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
!DOCTYPE html
html
head
…stuff…
/head
body
header
h2 My Site /h2
/header
nav
ul
li Home /li
li About /li
li Contact /li
/ul
/nav
section
h2 My Article /h2
article
p … /p
/article
/section
footer
p … /p
/footer
/body
/html
是不是更干凈，更易于理解呢？我們可以把 h2 My Article /h2 打包到 header 標記中。另外請注意，我們可以在 article 元素下再增加一個 footer 元素，用來容納如翻頁導航，相關文章或其它內容。
新標記的樣式
在大多數瀏覽器中，你只需要如往常一樣對元素使用樣式，但是請一定要對每個元素加上 display:block; 規則，隨著時間的推移，瀏覽器對 HTML 5 新元素的支持越來越標準后，就可以不使用了。
下面我們隊 header 應用一些樣式：
1
2
3
4
5
header {
display: block;
font-size: 36px;
font-weight: bold;
}
記住，你現在仍然可以在這些元素上添加 class 和 ID 屬性，因此，如果你想對導航小節單獨使用一個樣式，你可以向下面這樣增加一個 class 或 ID 屬性：
1
nav >
然后再應用一個樣式：
1
2
3
nav.main-menu {
font-size: 18px;
}
與舊瀏覽器的兼容
這些樣式都不能在 IE 6 下使用，如果你堅持要保持與舊瀏覽器兼容，也是有補救辦法的，IE 6 可以解析這些標記，但不能應用樣式，解決辦法就是使用 JavaScript，使用 createElement 方法就可以讓 IE 支持 HTML 5 標記的樣式了，你可以在 HTML 5 文件的頭部包括這段代碼，也可以保存到一個獨立文件中，然后進行引用。
1
2
3
4
5
6
7
8
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，解決辦法有兩個，但這兩個辦法都不是很理想，考慮到 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，只有使用的人多了，這個規范才能真正見效。
感謝你的閱讀，相信你對“如何構建 HTML 5 Web 頁面”這一問題有一定的了解，快去動手實踐吧，如果想了解更多相關知識點，可以關注丸趣 TV 網站！丸趣 TV 小編會繼續為大家帶來更好的文章！
