前端編碼規範 -- html篇
文檔類型
推薦使用 HTML5 的文檔類型申明： <!DOCTYPE html>
（建議使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的屬性，比如 application/xhtml+xml 在瀏覽器中的應用支持與優化空間都十分有限）。
HTML 中最好不要將無內容元素的標簽閉合，例如：使用 <br> 而非<br />。
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速並容易的判斷頁面內容的渲染方式。這樣
做的好處是，可以避免在 HTML 中使用字符實體標記（character entity），從而全部與
文檔編碼一致（一般采用 UTF-8 編碼）。
<meta charset="UTF-8">語言屬性
<html lang="en">
</html>腳本加載
出於性能考慮，腳本異步加載很關鍵。一段腳本放置在 內，比如 ，其加載會一直阻塞 DOM 解析，直至它完全地加載和執行完畢。這會造成頁面顯示的延遲。特別是一些重量級的腳本，對用戶體驗來說那真是一個巨大的影響。
異步加載腳本可緩解這種性能影響。如果只需兼容 IE10+，可將 HTML5 的 async 屬性加至腳本中，它可防止阻塞 DOM 的解析，甚至你可以將腳本引用寫在 裏也沒有影響。
如需兼容老舊的瀏覽器，實踐表明可使用用來動態註入腳本的腳本加載器。你可以考慮 yepnope 或 labjs。註入腳本的一個問題是：一直要等到 CSS 對象文檔已就緒，它們才開始加載（短暫地在 CSS 加載完畢之後），這就對需要及時觸發的 JS 造成了一定的延遲，這多多少少也影響了用戶體驗吧。
終上所述，兼容老舊瀏覽器(IE9-)時，應該遵循以下最佳實踐。
腳本引用寫在 body 結束標簽之前，並帶上 async 屬性。這雖然在老舊瀏覽器中不會異步加載腳本，但它只阻塞了 body 結束標簽之前的 DOM 解析，這就大大降低了其阻塞影響。而在現代瀏覽器中，腳本將在 DOM 解析器發現 body 尾部的 script 標簽才進行加載，此時加載屬於異步加載，不會阻塞 CSSOM（但其執行仍發生在 CSSOM 之後）。
所有瀏覽器中，推薦
<html> <head> <link rel="stylesheet" href="main.css"> </head> <body> <!-- body goes here --> <script src="main.js" async></script> </body> </html>
只在現代瀏覽器中，推薦
<html>
<head>
<link rel="stylesheet" href="main.css">
<script src="main.js" async></script>
</head>
<body>
<!-- body goes here -->
</body>
</html>語義化
根據元素（有時被錯誤地稱作“標簽”）其被創造出來時的初始意義來使用它。打個比方，用 p 元素來定義文字段落，用 a 元素來定義鏈接錨點，等等。
有根據有目的地使用 HTML元素，對於可訪問性、代碼重用、代碼效率來說意義重大。
簡單來說豐富的語義化的標簽總是比滿屏的div看著清晰明了~
多媒體回溯
對頁面上的媒體而言，像圖片、視頻、canvas 動畫等，要確保其有可替代的接入接口。圖片文件我們可采用有意義的備選文本（alt），視頻和音頻文件我們可以為其加上說明文字或字幕。
提供可替代內容對可用性來說十分重要。試想，一位盲人用戶如何能知曉一張圖片是什麽，要是沒有 alt 的話。（圖片的 alt 屬性是可不填寫內容的，純裝飾性的圖片就可用這麽做：）。
Type 屬性
省略樣式表與腳本上的 type 屬性。鑒於 HTML5 中以上兩者默認的 type 值就是 text/css 和 text/javascript，所以 type 屬性一般是可以忽略掉的。甚至在老舊版本的瀏覽器中這麽做也是安全可靠的。
ID 和錨點
通常一個比較好的做法是將頁面內所有的頭部標題元素都加上 ID. 這樣做，頁面 URL 的 hash 中帶上對應的 ID 名稱，即形成描點，方便跳轉至對應元素所處位置。
格式化規則
在每一個塊狀元素，列表元素和表格元素後，加上一新空白行，並對其子孫元素進行縮進。內聯元素寫在一行內，塊狀元素還有列表和表格要另起一行。
（如果由於換行的空格引發了不可預計的問題，那將所有元素並入一行也是可以接受的，格式警告總好過錯誤警告）。
HTML 引號
使用雙引號("") 而不是單引號(‘‘) 。
實用高於完美
盡量遵循 HTML 標準和語義，但是不應該以浪費實用性作為代價。任何時候都要用盡量小的復雜度和盡量少的標簽來解決問題。
屬性順序
HTML 屬性應該按照特定的順序出現以保證易讀性。
1、class
2、id
3、name
4、data-*
5、src, for, type, href, value , max-length, max, min, pattern
6、placeholder, title, alt
7、aria-*, role
8、required, readonly, disabled
class 是為高可復用組件設計的，理論上他們應處在第一位。id 更加具體而且應該盡量少使用（例如, 頁內書簽），所以他們處在第二位。
如果不當或者補充請多多指教！
前端編碼規範 -- html篇