前言
統(tǒng)一的編碼規(guī)范，有助于編寫(xiě)高質(zhì)量、穩(wěn)定遮糖、可維護(hù)的代碼。
本文引自：編碼規(guī)范 by @mdo
黃金定律
不管有多少人共同參與同一項(xiàng)目叠赐，一定要確保每一行代碼都像是同一個(gè)人編寫(xiě)的欲账。實(shí)用為王
盡量遵循 HTML 標(biāo)準(zhǔn)和語(yǔ)義屡江，但是不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度赛不。
一惩嘉、語(yǔ)法
- 使用兩個(gè)空格來(lái)代替制表符
- 嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即兩個(gè)空格）
- 對(duì)于屬性的定義，確保全部使用雙引號(hào)踢故，絕不要使用單引號(hào)文黎。
- 不要在自閉合元素的尾部添加斜線
- 不要省略可選的結(jié)束標(biāo)簽
二、HTML5 doctype
為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式的聲明殿较，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)耸峭。
<!DOCTYPE html>
<html>
<head>
</head>
</html>
三、語(yǔ)言屬性
強(qiáng)烈建議為 html 根元素指定 lang 屬性淋纲，從而為文檔設(shè)置正確的語(yǔ)言劳闹。這將有助于語(yǔ)音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等洽瞬。
<html lang="en-us">
</html>
四本涕、IE 兼容模式
IE 支持通過(guò)特定的 <meta> 標(biāo)簽來(lái)確定繪制當(dāng)前頁(yè)面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求片任，否則最好是設(shè)置為 edge mode偏友，從而通知 IE 采用其所支持的最新的模式。
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
五对供、字符編碼
通過(guò)明確聲明字符編碼位他，能夠確保瀏覽器快速并容易的判斷頁(yè)面內(nèi)容的渲染方式。這樣做的好處是产场，可以避免在 HTML 中使用字符實(shí)體標(biāo)記鹅髓，從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
<meta charset="UTF-8">
六京景、引入 CSS 和 JavaScript 文件
根據(jù) HTML5 規(guī)范窿冯，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值确徙。
<!-- link -->
<link rel="stylesheet" href="code-guide.css">
<!-- style -->
<style></style>
<!-- script -->
<script src="code-guide.js"></script>
七醒串、屬性順序
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性鄙皇。
- class
- id, name
- data-*
- src, for, type, href, value
- title, alt
- role, aria-*
class 用于標(biāo)識(shí)高度可復(fù)用組件芜赌，因此應(yīng)該排在首位。id 用于標(biāo)識(shí)具體組件伴逸，應(yīng)當(dāng)謹(jǐn)慎使用缠沈，因此排在第二位。
<a class="..." id="..." data-toggle="modal" href="#"></a>
<input class="form-control" type="text">
八、布爾型屬性
布爾型屬性可以在聲明時(shí)不賦值洲愤，直接寫(xiě)屬性名認(rèn)為是 true颓芭，不寫(xiě)認(rèn)為是 false。
<input type="text" disabled required>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
九柬赐、減少標(biāo)簽的數(shù)量
編寫(xiě) HTML 代碼時(shí)亡问，盡量避免多余的父元素。很多時(shí)候肛宋，這需要迭代和重構(gòu)來(lái)實(shí)現(xiàn)玛界。
<!-- 一般 -->
<span class="avatar">
</span>
<!-- 更好 -->
十、盡量避免使用 JavaScript 生成的標(biāo)簽
通過(guò) JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找悼吱、編輯，對(duì)搜索引擎不友好良狈，并且降低性能后添。能避免時(shí)盡量避免。
