HTML編碼規範
- 藏色散人轉載
- 2019-10-29 11:55:443262瀏覽
HTML編碼規格
本文檔的目標是讓HTML程式碼風格保持一致，容易被理解和被維護，如果自己沒有這種習慣，請好好選擇你的IDE，別再用「文字編輯器」。
1 程式碼風格
1.1 縮排與換行
[強制] 使用4 個空格做一個縮排層級，不允許使用2 個空格或tab 字元。
範例：
<ul>
<li>first</li>
<li>second</li>
</ul>[建議] 每行不得超過 120 個字元。
解釋：
過長的程式碼不容易閱讀與維護。但考慮到 HTML 的特殊性，不做硬性要求，sublime、phpstorm、wenstorm等都有標尺功能。
1.2 命名
[強制] class 必須單字全字母小寫，單字間以 - 分隔。
[強制] class 必須代表對應模組或元件的內容或功能，不得以樣式資訊命名。
範例：
<!-- good --> <div></div> <!-- bad --> <div></div>
[強制] 元素 id 必須保證頁面唯一。
解釋：
同一個頁面中，不同的元素包含相同的 id，不符合 id 的屬性意義。並且使用 document.getElementById 時可能導致難以追蹤的問題。
[建議] id 建議單字全字母小寫，單字間以 - 分隔。同項目必須保持風格一致。
[建議] id、class 命名，在避免衝突並描述清楚的前提下盡可能短。
範例：
<!-- good --> <div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p></p> <!-- bad --> <p></p> <!-- good --> <span></span> <!-- bad --> <span></span>
[強制] 同一頁面，應避免使用相同的 name 與 id。
解釋：
IE 瀏覽器會混淆元素的 id 和 name 屬性， document.getElementById 可能會得到不期望的元素。所以在對元素的 id 與 name 屬性的命名需要非常小心。
一個比較好的實踐是，為 id 和 name 使用不同的命名法。
範例：
<input name="foo"> <div id="foo"></div> <script> // IE6 将显示 INPUT alert(document.getElementById('foo').tagName); </script>
1.3 標籤
[強制] 標籤名稱必須使用小寫字母。
範例：
<!-- good --> <p>Hello StyleGuide!</p> <!-- bad --> <P>Hello StyleGuide!</P>
[強制] 對於無需自閉合的標籤，不允許自閉合。
解釋：
常見無需自閉合標籤有input、br、img、hr等。
範例：
<!-- good --> <input type="text" name="title"> <!-- bad --> <input type="text" name="title" />
[強制] 對 HTML5 中規定允許省略的閉合標籤，不允許省略閉合標籤。
範例：
<ul>
<li>first</li>
<li>second</li>
</ul>
- first
- second
[強制] 標籤使用必須符合標籤巢狀規則。
解釋：
例如 div 不得置於 p 中，tbody 必須置於 table 中。
範例：
<!-- good --> <div><h1><span></span></h1></div> <a href=""><span></span></a> <!-- bad --> <span><div></div></span> <p><div></div></p> <h1><div></div></h1> <h6><div></div></h6> <a href="a.html"><a href="a.html"></a></a>
[建議] HTML 標籤的使用應該遵循標籤的語意。
解釋：
下面是常見標籤語意
p - 段落 h1,h2,h3,h4,h5,h6 - 层级标题 strong,em - 强调 ins - 插入 del - 删除 abbr - 缩写 code - 代码标识 cite - 引述来源作品的标题 q - 引用 blockquote - 一段或长篇引用 ul - 无序列表 ol - 有序列表 dl,dt,dd - 定义列表
範例：
<!-- good --> <p>Esprima serves as an important <strong>building block</strong> for some JavaScript language tools.</p> <!-- bad --> <div>Esprima serves as an important <span>building block</span> for some JavaScript language tools.</div>
[建議] 在CSS 可以實作相同需求的情況下不得使用表格進行佈局。
解釋：
在相容性允許的情況下應盡量保持語意正確性。對網格對齊和拉伸性有嚴格要求的場景允許例外，如多列複雜表單。
[建議] 標籤的使用應盡量簡潔，減少不必要的標籤。
範例：
<!-- good -->
<img src="image.png">
<!-- bad -->
<span>
<img src="image.png">
</span>1.4 屬性
#[強制] 屬性名稱必須使用小寫字母。
範例：
<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table>
[強制] 屬性值必須以雙引號包圍。
解釋：
不允許使用單引號，不允許不使用引號。
範例：
<!-- good --> <script src="esl.js"></script> <!-- bad --> <script src='esl.js'></script> <script src=esl.js></script>
[建議] 布林類型的屬性，建議不加入屬性值。
範例：
<!-- good --> <input type="text" disabled> <input type="checkbox" value="1" checked> <!-- bad --> <input type="text" disabled="disabled"> <input type="checkbox" value="1" checked="checked">
[建議] 自訂屬性建議以 xxx- 為前綴，建議使用 data-。
解釋：
使用前綴有助於區分自訂屬性和標準定義的屬性。
範例：
<ol data-ui-type="Select"></ol>
2 通用
#2.1 DOCTYPE
##[強制] 使用HTML5 的doctype來啟用標準模式，建議使用大寫的DOCTYPE。 範例：<!DOCTYPE html>[建議] 啟用 IE Edge 和 Chrome Frame 模式。 範例：
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">[建議] 在 html 標籤上設定正確的 lang 屬性。 解釋：有助於提高頁面的可訪問性，如：讓語音合成工具確定其所應該採用的發音，令翻譯工具確定其翻譯語言等。 範例：
<html>[建議] 開啟雙核心瀏覽器的 webkit 核心進行渲染。 解釋：見瀏覽器核心控制Meta標籤說明文件 一文。 範例：
<meta name="renderer" content="webkit">[建議] 開啟瀏覽器的DNS預先取得。 解釋：減少DNS請求次數、預獲取DNS。 範例：
<link rel="dns-prefetch" href="//global.zuzuche.com/"> <link rel="dns-prefetch" href="//imgcdn1.zuzuche.com/"> <link rel="dns-prefetch" href="//qiniucdn.com/">
2.2 編碼
#[強制] 頁面必須使用精簡形式，明確指定字元編碼。指定字元編碼的 meta 必須是 head 的第一個直接子元素。 解釋：見 HTML5 Charset能用嗎 一文。 範例：<html>
......
......