你必須了解的HTML規格（整理分享）
- WBOY轉載
- 2022-01-13 18:06:361903瀏覽
這篇文章為大家帶來了HTML規範的相關知識HTML作為描述網頁結構的超文本標記語言，一直有著廣泛的應用。本文檔的目標是使HTML程式碼風格在內部開發能夠保持一致，使得專案更容易被理解和維護。希望對大家有幫助。
HTML 規格
1 前言
HTML作為描述網頁結構的超文本標記語言，一直有廣泛的應用。本文檔的目標是使HTML程式碼風格在內部開發能夠保持一致，使得專案更容易被理解和維護。
2 程式碼樣式
#2.1 縮排與換行
[強制] 使用4 個空格做為一個縮排層級，不允許使用2 個空格或tab 字元。
範例：
<ul>
<li>first</li>
<li>second</li>
</ul>[建議] 每行不得超過 120 個字元。
解釋：
過長的程式碼不容易閱讀與維護。但考慮到 HTML 的特殊性，不做硬性要求。
2.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>
[強制] 禁止為了 hook 腳本，建立無樣式資訊的 class。
解釋：
不允許 class 只用於讓 JavaScript 選擇某些元素，class 應該有明確的語意和樣式。否則容易導致 css class 氾濫。
使用 id、屬性選擇作為 hook 是更好的方式。
[強制] 同一頁面，應避免使用相同的 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>
2.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 中。
詳細的標籤巢狀規則請參考HTML DTD中的 Elements 定義部分。
[建議] HTML 標籤的使用應該遵循標籤的語意。
解釋：
下面是常見標籤語意
p - 段落
h1,h2, h3,h4,h5,h6 - 層級標題
strong,em - 強調
ins - 插入
-
#del - 刪除
abbr - 縮寫
#code - 程式碼標識
#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>
2.4 屬性[強制] 屬性名稱必須使用小寫字母。
範例：<!-- good --> <table cellspacing="0">...</table> <!-- bad --> <table cellSpacing="0">...</table>[強制] 屬性值必須用雙引號包圍(不包含iView、element等元件庫)。 解釋：######不允許使用單引號，不允許不使用引號。 ######範例：###
<!-- good --> <script src="esl.js"></script> <!-- bad --> <script src='esl.js'></script> <script src=esl.js></script>###[建議] 布林類型的屬性，建議不加入屬性值。 ######範例：###
<input type="text" disabled> <input type="checkbox" value="1" checked>###[建議] 自訂屬性建議以 xxx- 為前綴，建議使用 data-。 ######解釋：######使用前綴有助於區分自訂屬性和標準定義的屬性。 ######範例：###
<ol data-ui-type="Select"></ol>#########3 通用################3.1 DOCTYPE######
[强制] 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。
示例：
<!DOCTYPE html>
[建议] 启用 IE Edge 模式。
示例：
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
[建议] 在 html 标签上设置正确的 lang 属性。
解释：
有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。
示例：
<html>
3.2 编码
[强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。
解释：
见 HTML5 Charset能用吗 一文。
示例：
<html>
......
......