前端編碼規範 -- 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篇