前端開發規范之html編碼規范

前端開發規范系列文章之html編碼規范，感興趣的同學請關注《前端開發規范》專欄。隨著html5的逐步深入人心，html5和xhtml截然相反的態度，造成了前端開發者的困惑，如何保持html代碼的兼容性、簡潔性、未來適用性，稱為今天我們這篇文章的主要目的。參考1系列的html開發規范（mdo、github、doyoe、globant、LFeh等），從諸多規范中尋求共同點，試圖尋覓最好解決方案。

------------------------------------------------------------

--我參加了博客之星評選，如果你喜歡我的博客，求投票，您的支持是我的動力之源，走起！

-----------------------------------------------------------------------------------------

原則

1.規范 。保證您的代碼規范，趨html5，遠xhtml，保證結構表現行動相互分離。

2.簡潔。保證代碼的最簡化，避免過剩的空格、空行，保持代碼的語義化，盡可能使用具有語義的元素，避免使用樣式屬性和行動屬性。任什么時候候都要用盡可能簡單、盡可能少的元素解決問題。

3.實用。遵守標準，但是不能以犧牲實用性為代價。

4.虔誠。選擇1套規范，然后始終遵守。不管代碼由多少人參與，都應當看起來像1個人寫的1樣。

語法

1.小寫。html標簽、html屬性全部小寫。

2.嵌套。所有元素必須正確嵌套。

3.閉合。雙標簽必須閉合，單標簽（自關閉標簽）不閉合。

注釋

1.詳實注釋。解釋代碼解決問題、解決思路、是不是為新鮮方案等。

2.模塊注釋。github建議不使用模塊結束注釋。

3.待辦注釋。

文檔

1.文檔類型使用html5標準文檔類型，文檔類型聲明之前，不允許出現任何非空字符。不允許添加<meta>強迫改變文檔模式。

2.html元素上指定lang屬性。顯示頁面語言，有助于語言合成工具來肯定怎樣發音，和翻譯工具決定使用的規則，等等。

3.指定明確的字符編碼。讓閱讀器輕松、快速的肯定合適網頁內容的渲染方式。

4.IE兼容模式。Internet Explorer 支持使用兼容性 <meta> 標簽來指定使用甚么版本的 IE 來渲染頁面。如果不是特殊需要，通常通過 edge mode 來通知 IE 使用最新的兼容模式。

5.head部份的順序：a.<meta>元素，b. 需要的js文件（eg. Moddernizr or HTML5 Shiv），c. <title>元素，d.樣式表。

6.可使用IE條件注釋的方式兼容IE，但是不要添加額外的樣式表。

屬性

1.雙引號屬性值，不要使用單引號。

2.省略type屬性。使用style、link、script，不用指定type屬性，由于 text/css 和 text/javascript 分別是他們的默許值。

3.省略Boolean屬性值。Boolean屬性不用添加取值，disabled,checked,selected等。

4.省略url類屬性資源協議頭。

5.屬性順序。html屬性應當依照特定的順序出現以保證易讀性。class->id,name->data-*->src,for,type,href->title,alt->aria-*,role。

6.多媒體元素添加替換屬性。圖象增加alt屬性，音視頻增加替換文字。

7.不手動設置tabindex屬性，讓閱讀器自動設置。

元素

1.避免冗余標簽。

2.避免JS生成標簽。

3.段落文字應當用<p>，避免使用<br>。

4.列表項放<ul>、<ol>、<dl>，不要使用1系列的<div>或<p>

5.<input>使用for屬性綁定<label>。

6.使用<label>標簽包裹radio或checkbox和他們的文字，不用再使用for屬性。

7.使用單選、復選替換下拉菜單。（radio or checkbox instead of select menu）

8.form button應制定type類型，使用type="submit"、type="reset"或type="button"。

9.重要的表單按鈕首先出現(在DOM中)，特別是適用多個提交按鈕的場合。視圖中顯示的順序可以利用css修改。

10.有效使用<thead>、<tfoot>、<tbody>、<th>（scope屬性）。可以把<tfoot>放<tbody>條件高加載速度。

格式

1.soft tab。

2.嵌套縮進。

3.刪除行尾空格。

4.塊元素、列表元素、表格元素都放在新行。

5.inline元素視情況換行。

6.努力保持每行長度小于80列，如果太長可換行。

感謝您耐心讀完，如果對您有幫助，請支持我！

----------------------------------------------------------

前端開發whqet，關注web前端開發，分享相干資源，歡迎點贊，歡迎拍磚。
---------------------------------------------------------------------------------------------------------

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈