1.前言
本文件的目標是使研發中心的各位同學html能夠按照統一規範進行編寫，使其風格保持一致，便於理解和維護。
2.程式碼風格
2.1 縮排，空格
[強制] 使用 2 個空格做為一個縮排層級，不允許使用 4 個空格 或 tab 字元。(注：對於非 HTML 標籤之間的縮排，比如 script 或 style 標籤內容縮排，與 script 或 style 標籤的縮排同級。)
示例：
<style>
/* 樣式內容的第一級縮排與所屬的 style 標籤對齊 */
ul {
padding: 0;
}
</style>
<ul>
<li>first</li>
<li>second</li>
</ul>
<script>
// 指令碼程式碼的第一級縮排與所屬的 script 標籤對齊
require(['app'], function (app) {
app.init();
});
</script>
}
複製程式碼2.2 行長度
[建議] 每行不得超過 120 個字元，除非單行不可分割。（注：過長的程式碼不容易閱讀與維護。但是考慮到 HTML 的特殊性，不做硬性要求。）
2.3 命名
- [強制] class 駝峰命名。
- [強制] class 必須代表相應模組或部件的內容或功能，不得以樣式資訊進行命名。
- [強制] 元素 id 必須保證頁面唯一。(注：同一個頁面中，不同的元素包含相同的 id，不符合 id 的屬性含義。並且使用 document.getElementById 時可能導致難以追查的問題)
- [強制] 禁止為了 hook 指令碼，建立無樣式資訊的 class。(注：不允許 class 只用於讓 JavaScript 選擇某些元素，class 應該具有明確的語義和樣式。否則容易導致 CSS class 氾濫。使用 id、屬性選擇作為 hook 是更好的方式。)
示例：
<!-- good -->
<div class="sideBar"></div>
<!-- bad -->
<div class="left"></div>
複製程式碼2.4 標籤
- [強制] 標籤名必須使用小寫字母。
- [強制] 對於無需自閉合的標籤，不允許自閉合。（注：常見無需自閉合標籤有 input、br、img、hr 等。）
- [強制] 標籤使用必須符合標籤巢狀規則。（注：比如 div 不得置於 p 中，tbody 必須置於 table 中。）
- [建議] HTML 標籤的使用應該遵循標籤的語義。
- [建議] 標籤的使用應儘量簡潔，減少不必要的標籤。
示例：
<!-- good -->
<p>Hello StyleGuide!</p>
<!-- bad -->
<P>Hello StyleGuide!</P>
<!-- good -->
<input type="text" name="title">
<!-- bad -->
<input type="text" name="title" />
複製程式碼2.4 屬性
- [強制] 屬性名必須使用小寫字母。
- [強制] 屬性值必須用雙引號包圍。（注：不允許使用單引號，不允許不使用引號。）
示例：
<!-- good -->
<table cellspacing="0">...</table>
<!-- bad -->
<table cellSpacing="0">...</table>
<!-- bad -->
<script src='esl.js'></script>
<script src=esl.js></script>
複製程式碼2.5屬性
- [強制] 屬性定義必須另起一行。
- [強制] 屬性定義後必須以分號結尾。
示例：
/* good */
.selector {
margin: 0;
padding: 0;
}
/* bad */
.selector { margin: 0; padding: 0; }
/* good */
.selector {
margin: 0;
}
/* bad */
.selector {
margin: 0
}
複製程式碼3.通用
3.1 DOCTYPE
- [強制] 使用 HTML5 的 doctype 來啟用標準模式，建議使用大寫的 DOCTYPE。
- [建議] 在 html 標籤上設定正確的 lang 屬性。（注：有助於提高頁面的可訪問性，如：讓語音合成工具確定其所應該採用的發音，令翻譯工具確定其翻譯語言等。）
示例：
<!DOCTYPE html>
<html lang="zh-CN">
複製程式碼3.2 編碼
[強制] 頁面必須使用精簡形式，明確指定字元編碼。指定字元編碼的 meta 必須是 head 的第一個直接子元素。
示例：
<html>
<head>
<meta charset="UTF-8">
......
</head>
<body>
......
</body>
</html>
<html lang="zh-CN">
複製程式碼3.3 CSS 和 JavaScript 引入
- [強制] 引入 CSS 時必須指明 rel="stylesheet"。
- [建議] 引入 CSS 和 JavaScript 時無須指明 type 屬性。（注：text/css 和 text/javascript 是 type 的預設值。）
- [建議] 在 head 中引入頁面需要的所有 CSS 資源。（注：在頁面渲染的過程中，新的CSS可能導致元素的樣式重新計算和繪製，頁面閃爍。）
- [建議] JavaScript 應當放在頁面末尾，或採用非同步載入。（注：將 script 放在頁面中間將阻斷頁面的渲染。出於效能方面的考慮，如非必要，請遵守此條建議。）
示例：
<link rel="stylesheet" href="page.css">
<body>
<!-- a lot of elements -->
<script src="init-behavior.js"></script>
</body>
複製程式碼4.head
4.1 title
[強制] 頁面必須包含 title 標籤宣告標題。（注：title 中如果包含 ASCII 之外的字元，瀏覽器需要知道字元編碼型別才能進行解碼，否則可能導致亂碼。）
示例：
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
複製程式碼4.2 favicon
[強制] 保證 favicon 可訪問。在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免 404，必須遵循以下兩種方法之一：
- 在 Web Server 根目錄放置 favicon.ico 檔案。
- 使用 link 指定 favicon。
示例：
<link rel="shortcut icon" href="path/to/favicon.ico">
複製程式碼4.3 viewport
[建議] 若頁面欲對移動裝置友好，需指定頁面的 viewport。
viewport meta tag 可以設定可視區域的寬度和初始縮放大小，避免在移動裝置上出現頁面展示不正常。
比如，在頁面寬度小於 980px 時，若需 iOS 裝置友好，應當設定 viewport 的 width 值來適應你的頁面寬度。同時因為不同移動裝置解析度不同，在設定時，應當使用 device-width 和 device-height 變數。
5 圖片
- [強制] 禁止 img 的 src 取值為空。延遲載入的圖片也要增加預設的 src。（注：src 取值為空，會導致部分瀏覽器重新載入一次當前頁面）
- [建議] 避免為 img 新增不必要的 title 屬性。（注：多餘的 title 影響看圖體驗，並且增加了頁面尺寸。）
- [建議] 為重要圖片新增 alt 屬性。（注：可以提高圖片載入失敗時的使用者體驗。）
- [建議] 新增 width 和 height 屬性，以避免頁面抖動。
- [建議] 有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現。
6 表單
6.1 控制元件標題
- [強制] 有文字標題的控制元件必須使用 label 標籤將其與其標題相關聯。
示例：
<label><input type="checkbox" name="confirm" value="on"> 我已確認上述條款</label>
複製程式碼6.1 按鈕
- [強制] 使用 button 元素時必須指明 type 屬性值（注：button 元素的預設 type 為 submit，如果被置於 form 元素中，點選後將導致表單提交。為顯示區分其作用方便理解，必須給出 type 屬性。）
示例：
<button type="submit">提交</button>
<button type="button">取消</button>
複製程式碼