本文檔的目標是讓HTML程式碼風格保持一致,容易被理解和被維護,如果自己沒有這種習慣,請好好選擇你的IDE,別再用「文本編輯器」。
1.1 縮排與換行
##[強制] 使用4 個空格做為一個縮排層級,不允許使用
2 個空格或
tab 字元。
<ul> <li>first</li> <li>second</li> </ul>
[建議] 每行不得超過 120 字元。
1.2 命名
#[強制] class 必須單字全字母小寫,單字間以
- 分隔。
[強制] class 必須代表對應模組或元件的內容或功能,不得以樣式資訊命名。
<!-- good --> <div class="sidebar"></div> <!-- bad --> <div class="left"></div>
[強制] 元素 id 必須保證頁面唯一。
[建議] id 建議單字全字母小寫,單字間以
- 分隔。同項目必須保持風格一致。
[建議] id、
class 命名,在避免衝突並描述清楚的前提下盡可能短。
<!-- good --> <div id="nav"></div> <!-- bad --> <div id="navigation"></div> <!-- good --> <p class="comment"></p> <!-- bad --> <p class="com"></p> <!-- good --> <span class="author"></span> <!-- bad --> <span class="red"></span>
[強制] 同一頁面,應避免使用相同的 name 與
id。
<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>
[強制] 標籤使用必須符合標籤巢狀規則。
解釋:例如 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 標籤的使用應該遵循標籤的語意。
##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 class="strong">building block</span> for some JavaScript language tools. </div>
CSS
可以實現相同需求的情況下不得使用表格進行佈局。解釋:
在相容性允許的情況下應盡量保持語意正確性。對網格對齊和拉伸性有嚴格要求的場景允許例外,如多列複雜表單。
範例:<!-- good -->
<img class="avatar" src="image.png">
<!-- bad -->
<span class="avatar">
<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 lang="zh-CN">
[建议] 开启双核浏览器的 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 lang="zh-CN"> ...... ......