編寫靈活、穩定、高質量的HTML代碼的規範

1、惟必定律

不管有多少人共同參與同一項目，必定要確保每一行代碼都像是惟一我的編寫的。

2、HTML

2.1 語法

（1）用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。

（2）嵌套元素應當縮進一次（即兩個空格）。

（3）對於屬性的定義，確保所有使用雙引號，毫不要使用單引號。

（4）不要在自閉合（self-closing）元素的尾部添加斜線 -- HTML5 規範中明確說明這是可選的。

（5）不要省略可選的結束標籤（closing tag）（例如，</li> 或 </body>）。

2.2 Example

3、HTML5 doctype

爲每一個 HTML 頁面的第一行添加標準模式（standard mode）的聲明，這樣可以確保在每一個瀏覽器中擁有一致的展示。

4、語言屬性

根據 HTML5 規範：

強烈建議爲 html 根元素指定 lang 屬性，從而爲文檔設置正確的語言。這將有助於語音合成工具肯定其所應該採用的發音，有助於翻譯工具肯定其翻譯時所應遵照的規則等等。

5、IE 兼容模式

IE 支持經過特定的 <meta> 標籤來肯定繪製當前頁面所應該採用的 IE 版本。除非有強烈的特殊需求，不然最好是設置爲 edge mode，從而通知 IE 採用其所支持的最新的模式。

6、字符編碼

經過明確聲明字符編碼，可以確保瀏覽器快速並容易的判斷頁面內容的渲染方式。這樣作的好處是，能夠避免在 HTML 中使用字符實體標記（character entity），從而所有與文檔編碼一致（通常採用 UTF-8 編碼）。

7、引入 CSS 和 JavaScript 文件

根據 HTML5 規範，在引入 CSS 和 JavaScript 文件時通常不須要指定 type 屬性，由於 text/css 和 text/javascript 分別是它們的默認值。

8、實用爲王

儘可能遵循 HTML 標準和語義，可是不要以犧牲實用性爲代價。任什麼時候候都要儘可能使用最少的標籤並保持最小的複雜度。

9、屬性順序

9.1 從大到小

HTML 屬性應當按照如下給出的順序依次排列，確保代碼的易讀性。

（1）class

（2）id, name

（3）data-*

（4）src, for, type, href, value

（5）title, alt

（6）role, aria-*

9.2 Example

9.3 說明

class 用於標識高度可複用組件，所以應該排在首位。id 用於標識具體組件，應當謹慎使用（例如，頁面內的書籤），所以排在第二位。

10、布爾（boolean）型屬性

10.1 注意

（1）布爾型屬性能夠在聲明時不賦值。XHTML 規範要求爲其賦值，可是 HTML5 規範不須要。

（2）元素的布爾型屬性若是有值，就是 true，若是沒有值，就是 false。

（3）若是屬性存在，其值必須是空字符串或 [...] 屬性的規範名稱，而且不要在首尾添加空白符。
簡單來講，就是不用賦值。

10.2 Example

11、減小標籤的數量

編寫 HTML 代碼時，儘可能避免多餘的父元素。不少時候，這須要迭代和重構來實現。

12、減小 JavaScript 生成的標籤

經過 JavaScript 生成的標籤讓內容變得不易查找、編輯，而且下降性能。能避免時儘可能避免。

未完待續 編寫靈活、穩定、高質量的CSS代碼的規範
閱讀更多