《HTML5移動開發》—— 2.1 HTML5文法

本節書摘來異步社群《html5移動開發》一書中的第2章，第2.1節，作者：【美】estelle weyl（埃斯特爾 韋爾），更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。

html5與html4與xhtml非常類似。後兩者支援的大部分元素在html5中仍然是支援的。隻有一些過時了的标記和屬性已被剔除。在大多數情況下，如果你的文檔能通過html4嚴格（strict）模式或是xhtml模式的驗證，那麼它們作為html也能通過驗證[1]。html和xhtml的文法雖略有不同，但是兩者都被支援。僅僅把html 4.01或xhtml的doctype改成，就可以通過html5驗證（稍後将介紹更多有關doctype的内容）。

html5比html4和xhtml更好，包含了之前版本的元素，剔除了已過時的元素，添加了一些新元素，還重新定義或微調了另外一些元素。

html5規範的編寫者調查了web上那些開發者們已經在做的：哪些文檔分段是各種網站都趨向的，他們都賦給這些元件哪些類（class）和id，哪些腳本是大多數的網站作者反複使用的，以及哪些類庫功能已經激增至普遍存在。

html5試圖處理那些個人開發者們一直自行在做的：建立一個标準；詳細說明浏覽器都應該如何處理這些标準；以及當他們的代碼，呃，不那麼标準的時候，浏覽器應該如何處理開發人員标記。html5規範明确細化了浏覽器應該如何處理，或解析，各種代碼正确或錯誤的情況。通過關注細節，html5的一個目标就是告訴浏覽器如何處理所有可能會發生的情況，進而浏覽器可以從同樣的标記構造出一緻的dom，這樣開發人員就不會一直把帶寬浪費在處理浏覽器差異上了。

從我個人而言，我樂于見到更嚴格的标準。我的觀點是開發者們應該正确地編寫代碼，而不是指望浏覽器從寬解析糟糕的代碼。你正在讀這本書，是以我假定你是“良好代碼”陣營的一員。很好！這就是你要學的東西。

web頁面是由一系列元素組成的。有些元素是空的，其他的元素則包含文本，而另一些可以包含其他元素（或者既有元素也有文本）。大多數元素可以包含子元素或文本節點。那些不能包含子元素的，例如圖像和meta元素，稱為空元素（empty element）。

如圖2-1所示，一個元素就是一個結構體，由一個開始标記、一些可選的（有時是必需的）屬性、通常還有一些内容，以及一個結束标記，而且如果你使用xhtml風格編寫代碼的話，還有一個專門針對像<code>&lt;img&gt;</code>和<code>&lt;input&gt;</code>這樣空元素自閉合标記的可選的斜杠組成。

在html之前版本的中，内聯元素（inline element）隻能包含其他内聯元素和文本。根據元素的不同，塊級元素（block-level element）可以包含其他塊級元素、内聯元素和（或）文本。它們的“後代”元素（descendant element），像“祖先”元素（ancestor element）一樣，也可以由元素、屬性和文本組成。

使用css，你可以把任何短語元素[2]（phrase element）的樣子更改成塊（block）顯示，還可以強制一個塊元素或區塊元素（sectioning element）顯示成内聯的樣子（注意：我仍然在使用内聯這個詞。在html5中，内聯指的是外在表現，而不是指元素類型）。

在html5中，我們終于從内聯元素還是塊元素的觀念中解脫出來了——基于外觀的命名約定。在html5中，元素被定義為區段元素、标題（heading）元素、短語元素、嵌入式（embedded）元素、流（flow）元素、中繼資料（metadata）元素以及互動式（interactive）元素。不過在語義上，一些觀念還是保持不變的。舉例來說，區段元素不能位于短語元素内部。

在選擇一個元素時，要基于語義選擇最恰當的元素，而不要基于預設的浏覽器渲染。雖然你确實可以針對不管什麼文體上的目的而使用任意元素，但你不應該這樣做。每一個元素都有語義上的含義。

有幾個屬性對于幾乎所有html5元素來說是全局的（global）——包括核心（或全局）屬性和國際化（internationalization）屬性（将在下一節中介紹）——以及另一些更加元素特有的屬性，這些我們将在第3章當講到這些屬性正在被修改的元素時進行介紹。

html5已經添加了幾個國際化屬性和核心屬性，這些屬性可以被應用到幾乎任何元素上。

id、class、title、style、lang和dir屬性繼續在所有元素上被支援。html5往核心屬性清單中添加了accesskey、hidden和tabindex屬性，同時還有contenteditable、contextmenu、spellcheck、draggable和dropzone共5個建議性的互動式屬性。随後将讨論這些屬性。

除了全局屬性，所有的元素也可以有微資料（microdata）屬性（wia-aria角色和aria-屬性）和自定義資料屬性。自定義資料屬性是你自己的屬性，寫成data-的形式，這裡的由你自己設定。html5通過添加data-字首以允許開發者們建立不會與未來的html版本沖突的屬性。我們将在“data-自定義資料屬性”小節描述data-屬性，在第6章介紹微資料和aria無障礙屬性。

id

id屬性是一個唯一辨別符。每個文檔不應該存在具有相同id的兩個元素，并且每個元素最多也隻能有一個id。在html5中，id的值必須至少一個字元長，而且不能包含空格。這與之前的版本有所不同，之前版本id的值必須以字母a-z或a-z開始，後面可以跟字母（a-za-z）、數字（0-9）、連字元（-）、下劃線（_）、冒号（:）和句号（.）。

我建議你把id限制于僅使用字母和數字，然而無論你選擇使用哪種命名約定，重要的是保持統一。

id屬性一般是可選的。不過，對于内部頁面錨點（anchoring）和正在實作顯式标簽（explicit label）的表單内部元素是必需的。通過使用标簽的for屬性和表單元素的id屬性可以把顯式标簽和表單元素關聯起來。要注意的是，對于嵌套在一個隐式标簽（implicit label）之内的表單元素，id屬性不是必需的。我們将在第4章讨論标簽和id屬性。

id屬性作為一個錨點用于使用javascript進行定位也非常友善，隻是可能有一點重度使用。id屬性，如果有被包含的話，可以用在css中定位元素。然而，由于id在css樣式中的高量值或特征性，即使id選擇器用起來稍微更好一些，id值也應該盡量少在css選擇器中使用。所有這些我們将在第6章讨論。現在你隻要知道，在你讀完這本書的時候，你将能意識到你可以使用css3選擇器定位到頁面中的任何元素，而不需要使用id選擇器就夠了。

class

class是該元素所屬的一個類别的名字或一些類别的清單。class屬性具體說明了該元素是哪一個或哪一些類的一員。和id屬性不同，任何數量的元素都可以共用同一個類。一個元素可以有多個使用空格分開的類。

就css樣式而言，class屬性中類名的順序無關緊要。然而在樣式表（stylesheet）中的順序，卻很重要（這個問題我們将在第6章進行讨論）：