《HTML5多媒體應用開發》——1.3 主要的HTML5結構化元素

本節書摘來自異步社群《html5多媒體應用開發》一書中的第1章，第1.3節,作者： 【愛】ian devlin 更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

本書讨論的任何html5多媒體元素和api自然都需要編寫html标記。你當然可以使用html 4.01标記（但是你必須使用本小節提到的html5 doctype元素），但是因為本書是關于html5多媒體的，對你來說使用html5标記更有意義。本書和網站上的所有例子都使用html5标記。

下面，讓我們從組成html5文檔的主要結構化元素的簡單介紹開始。

1.3.1　doctype和charset

和任何html文檔一樣，你必須用一個doctype作為html5文檔的開始。doctype告訴浏覽器網頁所使用的html版本，浏覽器可以用它來決定頁面的顯示方法。html5 doctype的傑出之處在于簡潔性。

使用html 4.01，你可能這麼寫：

而使用html5，你可以這麼寫：

是的，僅此而已。

這個新的doctype是最短的有效字元串，使浏覽器以你所想要的标準模式顯示文檔，而不是你絕對不想要的怪異模式（quirk mode），更多細節參看補充材料“标準模式vs. 怪異模式”。

标準模式vs. 怪異模式

現代浏覽器可以使用兩種不同的模式來解釋web文檔的css：标準模式和怪異模式。

标準模式導緻浏覽器根據規範顯示css，這是正确的，你應該希望采用這種方式。

另一方面，怪異模式導緻浏覽器根據舊的非規範原則顯示css。這種模式的存在是為了向後相容性，因為老的版本無法根據規範顯示css。

目前标準模式是你希望使用的，因為大部分情況下你所使用的舊版浏覽器是ie6，它不需要怪異模式就能正常工作（但是可能需要一些ie6專用的css）。

有趣的是，ie6～ie8版本在顯示怪異模式的頁面時和ie5.5所做的一樣。你絕對不希望如此，因為顯示的結果是不可預測的。

提供文檔的字元編碼（通常是utf-8）也是有益的好主意。在html5标記中指定字元編碼也被大大簡化了。

在html 4.01中，字元串通過如下代碼進行設定：

在html5中，你使用如下的代碼：

和doctype一樣，這個字元編碼串包含了需要為web浏覽器解釋的最少字元。實際上，你可以通過删除引号再減少兩個字元，但是我個人的選擇是包含引号。而且，我沒有關閉這個元素，關閉元素同樣沒有必要，但是如果我希望關閉，也可以這麼做，html5沒有那麼嚴格。

提示：

指定字元集還能夠預防ie7中的跨站腳本攻擊漏洞。

命名新的html5元素

盡管表1.1沒有覆寫所有新添加的html5元素，但是它确實為你指出了新html元素命名的思路，以及它們所表達的語義。

https://yqfile.alicdn.com/27e94c481597fc8e9bc9ae79fc97157e0038ad6c.png ">

1.3.2　 and

幾乎每個html文檔都有标題和腳注。html5規範承認這一事實并包含兩個專用元素，你可以用來從語義上指定标題和腳注。但是，每個文檔并沒有限制隻能有一個這種元素，這些元素也可以用在指定文檔的特定section或者article元素中的标題和腳注區域。

header元素通常包含至少一個h元素：

footer元素的使用非常簡單，不需要多作說明：

heaser元素不一定必須出現在web文檔的最開始，同樣footer元素也不一定出現在文檔最後。實際上你可以根據需要将它們放在任何地方。不過，将它們放在開始和最後通常是有意義的，這樣可以使文檔源代碼更容易閱讀。

**

1.3.3　**

如果标題包含許多分組的h元素，它們可以包含在一個hgroup元素中，如：

注意，hgroup元素隻能包含h元素，不能包含其他内容。

關于hgroup的争論

hgroup元素在本書編寫時還是有争議的，因為它曾經從html5規範中被删除，而在前幾個月中又被重新寫入。人們正在努力再次删除它，或者用其他更有語義含義的元素代替它。是以在你閱讀本書的時候，它很可能又被規範忽略，你需要再次确認。

1.3.4　和

在使用html設計一個網頁的時候，你經常會使用div元素來指定文檔的具體段落。通常隻需要這麼做就可以正常工作。但是，如果你希望給段落一個特定的語義含義，而不隻是一個“分隔”的時候，怎麼辦呢？

這就是article和section元素起作用的地方，選用哪一個元素，以及何時使用常常有點混淆。這種混淆是因為你被迫再去思考你所寫的内容以及表現這些内容的方式。

如果你隻是想要包含一些僅用于樣式目的的資訊，那麼div元素是适用的，原因是div中的内容沒有任何特定的語義含義，例如，這隻是用作“包裝器”元素，幫助頁面中心的一些欄目的定位：

如果你确定内容确實有語義含義，那麼就必須仔細觀察這個含義。w3c規範對seciton元素的定義如下：

“文檔或者應用中的普通段落。在這一上下文中，段落（section）是内容的一個主題分組，通常有一個标題。”

是以，如果你所希望包含的内容很适合于放在一個标題下，那麼section元素可能就是解決方案。但是在你最終決定使用section元素之前，我們先來簡略地看看article元素，它是特殊類型的section元素。同樣，w3c規範鼓勵你在以下情況下使用article元素：“當對元素的内容進行組織是有意義的時候。”

這句話準确的意思是什麼？

好吧，作為例子，考慮一下報紙上文章的版面設計。報紙上的文章可能包含幾個段落，每個段落都有自己的标題。但是從總體上說，這些段落互相關聯并組成一個整體，因為它們講述的是相同的事情。如果你的内容是這種情況，那麼就應該使用 article 元素。但是要記住，article元素和報紙上文章的概念無關，相關的隻是設計的方法。article元素還可以表示你的衣櫥中的衣服，因為它是表示獨立且可以組織起來的内容單元的通用術語。它也可以與其他物品相關聯。

當然，報紙文章的類比也說明了，你可以在article元素中嵌套section元素，反之亦然。但是和div元素一樣，不要把内容搞得太亂或者過多地嵌套！

結合article和section元素，你的内容可能像下面這樣：

使用上述的例子，你可以了解實踐中如何在内容裡使用 article 和section元素。這個例子有兩個段落，其中一個包含有關視訊的資訊，另一個包含有關音頻的資訊。它們互相之間很清晰地分開，是以應該包含在單獨的section元素中。

但是總體上它們又是相關的，同在“html5 multimedia”這個标題下。是以它們應該處于同一個标題的section或者article元素下。在這個例子中，聯合這些内容似乎是有意義的（例如，作為一個rss feed的項目），是以最适合的元素似乎是article。

前面已經提到過，作為替代，你可以在一個article元素中包含許多section元素，例如在一個新聞提要頁面中包含指向多篇文章的　連結：

這些例子還說明了，如果article和section元素具有語義含義，還可以包含header和footer元素，正如例子中所作的那樣。

html5中的h元素

目前在html5世界裡熱議的一個話題是header元素中的h元素，以及是否應該在單個文檔中使用多個h1元素。

你在“

和

”小節中可能已經注意到，在主header（在主article或者section中）元素中已經使用了一個h1元素，在子section/article的header元素中使用了h2元素。這樣做是為了向後相容性，因為浏覽器（除了firefox 5和chrome12以外）對所謂html5輪廓描繪算法（outlining algorithm）的支援很差。

目前，繼續使用不同的h元素維護與舊浏覽器的相容性是明智的。随着新的浏覽器釋出，對該算法的支援自然會改進，但是和任何事情一樣，最終的決定權在你。

1.3.5　

nav元素用于包含整個網站的主導航，是以在這個元素中可以包含任何指向單獨頁面的連結，如“關于”頁面、“新聞”頁面和部落格。它還可以包含任何網站外部的連結，也就是說帶使用者離開你的網站。例如連結到twitter和facebook賬戶，隻要它們是你的網站的主導航組成部分就行。

nav的标記很簡單，該元素通常包含一個無序清單，當然還可以簡單地包含許多指向所考慮的頁面的超連結：

nav元素通常包含在一個header中，但是這并不是必需的，它還可以包含在footer元素中，但是隻有在該元素是網站的主導航時才可行。因為現在的腳注通常包含了一組輔助的網站導航連結，這些連結不應該包含在一個nav元素中。但是，同一個頁面中可以有超過一個nav元素，它的使用應該得到保證。

1.3.6　

aside元素用于包含與相鄰的主要内容相關、但是不影響主要内容意義的非主要内容。aside元素的内容也可以有獨立的意義，但并非必需。

aside元素目前的實際應用是用于邊欄，當然可以包含從裝飾和社交媒體到相關的連結、圖像的任何東西：

注意，aside元素也可以包含合适的header和footer元素。

1.3.7　和

兩個新推出的元素可以用來将多媒體元素（圖像、視訊或者音頻）和一個特定的标題關聯，這當然使得包含在這些新元素裡的内容更符合語義：figure元素和figcaption元素。

figcaption元素隻能存在于一個figure元素中，但是它不是必需的元素。很顯然，并非所有内容都有标題：

一般，你設定figcaption内容的樣式為一個圖像之上或者之下的小文本（如圖1.1所示）。但是，你并不一定要這麼做，可以按照你的喜好來設定樣式！

https://yqfile.alicdn.com/27033933e56cd9aa80555e48fe8160800a5c198e.png" >

internet explorer和浏覽器相容性

在本書編寫的時候，所有主要浏覽器的最新版本都支援許多新的html5元素，特别是本章提到的這些元素。但是ie 8和更早的版本沒有支援。這些新的元素對這些浏覽器來說是完全未知的，是以這些浏覽器完全不顯示這些元素。

但是并非完全沒有希望。

你可以很容易地用remy sharp在web文檔的開頭添加html5shim腳本：

這個腳本告訴ie浏覽器在顯示文檔時可能碰到的新元素的情況，于是它很輕松地照辦了。

對于那些較老的浏覽器，你還必須為某些元素添加一些預設的css樣式，使浏覽器知道将它們當作塊級元素顯示：

你必須自行下載下傳并部署這個javascript檔案，然後用和前面添加innershim檔案相同的方式添加它：

innershim和innershiv檔案協同工作，可以讓你在舊版本的ie浏覽器上使用html5。

注意，這些添加的内容包含在目标ie版本早于ie8的條件注釋中。這是用于避免不需要這些腳本的浏覽器進行不必要的添加和處理。

1.3.8　

script元素的意義和用法在html5中完全沒有改變。但是，因為本書的許多部分是有關javascript api的，是以有必要指出一個新穎有用的差别：如果你使用該元素來封裝javascript，就不再需要指定type屬性。

是的，whatwg和w3c那些聰明的人們已經決定預設使用type=”text/javascript”，使你不必輸入它，這樣代碼就簡潔得多：