前端開發(fā)規(guī)范系列文章之html編碼規(guī)范，感興趣的同學(xué)請(qǐng)關(guān)注《前端開發(fā)規(guī)范》專欄。隨著html5的逐漸深入人心，html5和xhtml截然相反的態(tài)度，造成了前端開發(fā)者的困惑，如何保持html代碼的兼容性、簡(jiǎn)潔性、未來(lái)適用性，稱為今天我們這篇文章的主要目的。參考一系列的html開發(fā)規(guī)范（mdo、github、doyoe、globant、LFeh等），從諸多規(guī)范中尋求共同點(diǎn)，試圖尋找最佳解決方案。
------------------------------------------------------------
--我參加了博客之星評(píng)選，如果你喜歡我的博客，求投票，您的支持是我的動(dòng)力之源，走起！
-----------------------------------------------------------------------------------------
1.規(guī)范 。保證您的代碼規(guī)范，趨html5，遠(yuǎn)xhtml，保證結(jié)構(gòu)表現(xiàn)行為相互分離。
2.簡(jiǎn)潔。保證代碼的最簡(jiǎn)化，避免多余的空格、空行，保持代碼的語(yǔ)義化，盡量使用具有語(yǔ)義的元素，避免使用樣式屬性和行為屬性。任何時(shí)候都要用盡量簡(jiǎn)單、盡量少的元素解決問題。
3.實(shí)用。遵循標(biāo)準(zhǔn)，但是不能以犧牲實(shí)用性為代價(jià)。
4.忠誠(chéng)。選擇一套規(guī)范，然后始終遵循。不管代碼由多少人參與，都應(yīng)該看起來(lái)像一個(gè)人寫的一樣。
1.小寫。html標(biāo)簽、html屬性全部小寫。
2.嵌套。所有元素必須正確嵌套。
3.閉合。雙標(biāo)簽必須閉合，單標(biāo)簽（自關(guān)閉標(biāo)簽）不閉合。
1.詳盡注釋。解釋代碼解決問題、解決思路、是否為新鮮方案等。
2.模塊注釋。github建議不使用模塊結(jié)束注釋。
3.待辦注釋。
1.文檔類型使用html5標(biāo)準(zhǔn)文檔類型，文檔類型聲明之前，不允許出現(xiàn)任何非空字符。不允許添加<meta>強(qiáng)制改變文檔模式。
2.html元素上指定lang屬性。顯示頁(yè)面語(yǔ)言，有助于語(yǔ)言合成工具來(lái)確定怎樣發(fā)音，以及翻譯工具決定使用的規(guī)則，等等。
3.指定明確的字符編碼。讓瀏覽器輕松、快速的確定適合網(wǎng)頁(yè)內(nèi)容的渲染方式。
4.IE兼容模式。Internet Explorer 支持使用兼容性 <meta> 標(biāo)簽來(lái)指定使用什么版本的 IE 來(lái)渲染頁(yè)面。如果不是特殊需要，通常通過(guò) edge mode 來(lái)通知 IE 使用最新的兼容模式。
5.head部分的順序：a.<meta>元素，b. 需要的js文件（eg. Moddernizr or HTML5 Shiv），c. <title>元素，d.樣式表。
6.可以使用IE條件注釋的方式兼容IE，但是不要添加額外的樣式表。
1.雙引號(hào)屬性值，不要使用單引號(hào)。
2.省略type屬性。使用style、link、script，不用指定type屬性，因?yàn)?text/css 和 text/javascript 分別是他們的默認(rèn)值。
3.省略Boolean屬性值。Boolean屬性不用添加取值，disabled,checked,selected等。
4.省略u(píng)rl類屬性資源協(xié)議頭。
5.屬性順序。html屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。class->id,name->data-*->src,for,type,href->title,alt->aria-*,role。
6.多媒體元素添加替代屬性。圖像增加alt屬性，音視頻增加替代文字。
7.不手動(dòng)設(shè)置tabindex屬性，讓瀏覽器自動(dòng)設(shè)置。
1.避免冗余標(biāo)簽。
2.避免JS生成標(biāo)簽。
3.段落文字應(yīng)該用<p>，避免使用<br>。
4.列表項(xiàng)放<ul>、<ol>、<dl>，不要使用一系列的<div>或<p>
5.<input>使用for屬性綁定<label>。
6.使用<label>標(biāo)簽包裹radio或checkbox和他們的文字，不用再使用for屬性。
7.使用單選、復(fù)選替代下拉菜單。（radio or checkbox instead of select menu）
8.form button應(yīng)制定type類型，使用type="submit"、type="reset"或type="button"。
9.首要的表單按鈕首先出現(xiàn)(在DOM中)，尤其是適用多個(gè)提交按鈕的場(chǎng)合。視圖中顯示的順序可以利用css修改。
10.有效使用<thead>、<tfoot>、<tbody>、<th>（scope屬性）?？梢园?lt;tfoot>放<tbody>前提高加載速度。
1.soft tab。
2.嵌套縮進(jìn)。
3.刪除行尾空格。
4.塊元素、列表元素、表格元素都放在新行。
5.inline元素視情況換行。
6.努力保持每行長(zhǎng)度小于80列，如果太長(zhǎng)可換行。
關(guān)于編碼規(guī)范，沒有標(biāo)準(zhǔn)答案，沒有正確對(duì)錯(cuò)，只有更合理、更有效。本博文檔寫作過(guò)程耗費(fèi)了博主的幾乎大半個(gè)元旦假期，github上fork和star比較多的規(guī)范整理、遴選、書寫，希望能對(duì)您有所幫助，如果有不同意見，請(qǐng)?jiān)u論、爭(zhēng)論、拍磚！
感謝您耐心讀完，如果對(duì)您有幫助，請(qǐng)支持我！
----------------------------------------------------------
前端開發(fā)whqet，關(guān)注web前端開發(fā)，分享相關(guān)資源，歡迎點(diǎn)贊，歡迎拍磚
聯(lián)系客服
