HTML Guide ()
HTML規範指南。
文檔目錄
1 代碼風格
1.1 縮進
【強制】使用 4 個空格作爲一個縮進層級，不允許使用 2 個空格或 tab 字符；
2 屬性
2.1 屬性引號
【強制】對於屬性的定義使用雙引號，不允許使用單引號，不允許不使用引號；
示例：
<!-- Not so great -->
<img class='avatar' src="./img/avatar.png" alt='avatar'>
<!-- Better -->
<img class="avatar" src="./img/avatar.png" alt="avatar">2.2 屬性大小寫
【強制】屬性名應該小寫，不允許大寫或大小寫混合；
示例：
<!-- Not so great -->
<table cellSpacing="0">...</table>
<!-- Better -->
<table cellspacing="0">...</table>2.3 屬性布爾值
【建議】布爾類型的屬性，建議不添加屬性值，至少同一項目要保持一致；
示例：
<input type="text" disabled>
<input type="checkbox" checked>2.4 屬性聲明順序
**【建議】**HTML 屬性建議儘量按照以下給出的順序依次排列，確保代碼的易讀性。
classid,namedata-*src,for,type,hreftitle,altaria-*,role
class 用於標識高度可複用組件，因此應該排在首位。id 用於標識具體組件，應當謹慎使用（例如，頁面內的書籤），建議預留更多的id命名給技術，因此排在第二位。
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">2.5 自定義屬性
【建議】使用自定義屬性作爲JS的hook，建議以data-爲前綴；
示例：
<input data-role="getPic" type="button">2.6 鏈接屬性
【強制】禁止 a 標籤的 href 取值爲空或不寫 href 屬性，重構時默認可用 # 代替；
如果不需要使用鏈接功能，請不要使用不帶 href 的 a 標籤，既不符合標籤的語義，也可能會產生未知的兼容性問題；
示例：
<!-- Not so great -->
<a href="" title="title">歡聚時代</a>
<a class="xxx">歡聚時代</a>
<!-- Better -->
<a href="#" title="title">歡聚時代</a>3 標籤
3.1 標籤大小寫
【強制】標籤名應該小寫，不允許大寫或大小寫混合；
示例：
<!-- Not so great -->
<DIV clsss="xxx">...</DIV>
<!-- Better -->
<div clsss="xxx">...</div>3.2 標籤自閉合
【建議】對於無需自閉合的標籤，建議不自閉合，至少同一項目要保持一致；
常見無需自閉合標籤有input、img、br、hr等
示例：
<input type="checkbox" value="1">3.3 標籤嵌套
【強制】標籤使用必須符合標籤嵌套規則；
例如：內聯元素不能嵌套塊元素，<p>元素和<h1~6>元素不能嵌套塊元素等，詳見 Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict) 與 HTML5 Content models;
【建議】實用爲王，儘量遵循 HTML 標準和語義，但是不要以犧牲實用性爲代價。任何時候都要儘量使用最少的標籤並保持最小的複雜度。
<!-- Not so great -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">3.4 避免過時標籤
【強制】不允許使用過時的舊標籤，請使用新標籤或者CSS代替：
acronymabbrappletobjectbstrongdirulstrikedelbasefontbigcenterfontisindexttu
請參詳：http://www.w3schools.com/tags/
4 head設定
4.1 doctype
**【強制】**doctype使用 HTML5 的 doctype 來啓用標準模式。
其中 doctype 建議使用大寫的 DOCTYPE； 關於doctype該使用大寫還是小寫的討論
示例：
<!DOCTYPE html>4.2 頁面編碼
【強制】頁面必須明確指定字符編碼，讓瀏覽器快速確定適合網頁內容的渲染方式。指定字符編碼的 meta 必須是 head 的第一個直接子元素。建議使用無 BOM 的 UTF-8 編碼；
示例：
<meta charset="UTF-8">4.3 兼容模式
**【建議】**PC端啓用 IE Edge 模式，並針對360瀏覽器啓用webkit渲染模式；
示例：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">4.4 引入CSS
【強制】引入 CSS 時必須指明 rel=”stylesheet”；
建議在 head 中引入頁面需要的所有 CSS 資源，因爲在頁面渲染的過程中，新的CSS可能導致元素的樣式重新計算和繪製，頁面閃爍；
示例：
<link rel="stylesheet" src="global.css">4.5 引入JavaScript
**【建議】**JavaScript應當放在頁面尾部；出於性能方面的考慮，如非必要，請遵守此條建議；
示例：
<body>
<!-- a lot of elements -->
<script src="main.js"></script>
</body>4.6 favicon
【強制】保證 favicon 可訪問；
在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。爲了保證favicon可訪問，避免404，必須遵循以下兩種方法之一：
- 在 Web Server 根目錄放置 favicon.ico 文件;
- 使用 link 指定 favicon;
示例：
<link type="image/x-icon" rel="shortcut icon" href="path/to/favicon.ico">附：工作流中默認的PC端head設定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="Keywords" content="多玩遊戲">
<meta name="description" content="多玩遊戲">
<!-- a lot of elements -->
</head>
</html>附：工作流中默認的移動端head設定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="format-detection" content="telephone=no,address=no,email=no">
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<meta name="keywords" content="多玩遊戲">
<meta name="description" content="多玩遊戲">
<!-- a lot of elements -->
</head>
</html>注意：當該項目有相關的app在app store中，設置metaapple-itunes-app，如上面最後一條，並填上對應的app-id。詳細請看：Promoting Apps with Smart App Banners
更詳細的meta屬性設置可以參詳：https://github.com/hzlzh/cool-head
5 圖片
【強制】禁止 img 的 src 取值爲空；延遲加載的圖片也要增加默認的 src；
src 取值爲空，會導致部分瀏覽器重新加載一次當前頁面，參考 Yahoo performance rules
【建議】爲重要圖片添加 alt 屬性；
可以提高圖片加載失敗時的用戶體驗。
【建議】添加 width 和 height 屬性，以避免頁面抖動；
【建議】有下載需求或者預期會靈活變動的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現；
- 用戶頭像、用戶產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便用戶下載；
- 無下載需求的圖片，比如：icon、背景、代碼使用的圖片等，儘可能採用 css 背景圖實現。
6 表單
【強制】有文本標題的控件必須使用 label 標籤將其與其標題相關聯；
有兩種方式：
- 將控件置於 label 內;
- label 的 for 屬性指向控件的 id。
推薦使用第一種，減少不必要的 id。如果 DOM 結構不允許直接嵌套，則應使用第二種。
示例：
<label><input name="confirm" type="checkbox" value="on"> 我已確認上述條款</label>
<label for="username">用戶名：</label> <input id="username" name="username" type="checkbox">【建議】儘量不要使用按鈕類元素的 name 屬性；
由於瀏覽器兼容性問題，使用按鈕的 name 屬性會帶來許多難以發現的問題。具體情況可參考 此文；
【建議】在針對移動設備開發的頁面時，根據內容類型指定輸入框的 type 屬性；
根據內容類型指定輸入框類型，能獲得能友好的輸入體驗。
示例：
<input type="number" value="1">7 註釋
【建議】對超過10行的頁面模塊進行註釋, 以降低開發人員的嵌套成本和後期的維護成本。建議使用結尾註釋方式，例如：
當模塊代碼量較少時，可以省略 start。
<!-- 文章內容 start -->
<section id="post">
do some things...
</section>
<!-- 文章內容 end -->或者標註模塊的class或者id：
<!-- #post start -->
<section id="post">
do some things...
</section>
<!-- #post end -->參考資料：
