基本規范
語義
使用符合語義的標簽書寫 HTML 文檔, 選擇恰當的元素表達所需的含義;
<!-- 不推薦 --> <div onclick="goToRecommendations();">All recommendations</div>
<!-- 推薦 --> <a href="recommendations/">All recommendations</a>
大小寫
元素的標簽和屬性名必須小寫, 屬性值必須加雙引號; 例如
<!-- 不推薦 --> <A HREF='/'>Home</A>
<!-- 推薦 --> <a href="/">Home</a>
縮進
- 使用四個空格來表示縮進，不要使用 tab 鍵;
- 在塊狀元素，列表，表格元素后面使用新行，并且對它的子元素進行縮進.
例如
空格
去除比不必要的空格; 例如
<!-- 不推薦 --> <p>test </p>
嵌套
- 元素嵌套遵循 (X)HTML Strict 嵌套規則, 推薦使用Firefox插件 HTML Validator 進行檢查;
- 正確區分自閉合元素和非自閉合元素. 非法閉合包括：<br>..</br>、<script />、<iframe />, 非法閉合會導致頁面嵌套錯誤問題;
<!-- 不推薦 --> <title>Test</title> <article>This is only a test.
<!-- 推薦 --> <!DOCTYPE html> <meta charset="utf-8"> <title>Test</title> <article>This is only a test.</article>
引號
使用雙引號來標識 html 的屬性; 例如
<!-- 不推薦 --> <a class='maia-button maia-button-secondary'>Sign in</a>
<!-- 推薦 --> <a class="maia-button maia-button-secondary">Sign in</a>
自定義屬性
通過給元素設置自定義屬性來存放與 JavaScript 交互的數據, 屬性名格式為 data-xx (例如：data-lazyload-url)
DOCTYPE
頁面文檔類型統一使用HTML5 DOCTYPE. 代碼如下：
編碼
聲明方法遵循HTML5的規范.推薦使用 utf-8 編碼.
注釋
建議對超過10行的頁面模塊進行注釋, 以降低開發人員的嵌套成本和后期的維護成本. 例如：
<div id="sample"> ... </div> <!-- #sample END -->
<div class="sample"> ... </div> <!-- .sample END -->
協議
如果鏈接和當前頁面一致則忽略鏈接的協議部分，例如
<!-- 不推薦 --> <script src="http://www.taobao.com/fp.js"></script>
<!-- 推薦 --> <script src="http://www.taobao.com/fp.js"></script>
/* 不推薦 */ .example { background: url(http://www.taobao.com/fp.css); } /* 推薦 */ .example { background: url(//www.taobao.com/fp.css); } TODO
- 使用 TODO 來標記待做事情，便于后期搜索.
- 在 TODO 后添加 (姓名或郵件) 來表示分類.
例如
<!-- TODO(yiminghe): remove duplicate tag --> <p><span>2</span></p>
焦點分離
- 將表現，行為和結構分離：不要在 html 和模板中加入除了結構以外的東西.
- 在文檔中引入盡可能少的樣式和腳本
<!-- 不推薦 --> <!DOCTYPE html> <title>HTML sucks</title> <link rel="stylesheet" href="base.css" media="screen"> <link rel="stylesheet" href="grid.css" media="screen"> <link rel="stylesheet" href="print.css" media="print"> <h1 style="font-size: 1em;">HTML sucks</h1> <p>I’ve read about this on a few sites but now I’m sure: <u>HTML is stupid!!1</u> <center>I can’t believe there’s no way to control the styling of my website without doing everything all over again!</center>
<!-- 推薦 --> <!DOCTYPE html> <title>My first CSS-only redesign</title> <link rel="stylesheet" href="default.css"> <h1>My first CSS-only redesign</h1> <p>I’ve read about this on a few sites but today I’m actually doing it: separating concerns and avoiding anything in the HTML of my website that is presentational. <p>It’s awesome!