HTML編碼規範
1 前言
HTML作為描述網頁結構的超文字標記語言，在百度一直有著廣泛的應用。本文件的目標是使HTML程式碼風格保持一致，容易被理解和被維護。
2 程式碼風格
使用 2 個空格做為一個縮排層級，不允許使用 4 個空格 或 tab 字元。
.editorconfig自動配置
示例：
<ul>
<li>first</li>
<li>second</li>
</ul>
複製程式碼每行不得超過 120 個字元。
解釋：
過長的程式碼不容易閱讀與維護。但是考慮到 HTML 的特殊性，不做硬性要求。
3 標籤名必須使用小寫
示例：
<!-- good -->
<p>Hello StyleGuide!</p>
<!-- bad -->
<P>Hello StyleGuide!</P>
複製程式碼4 對於無需自閉合的標籤，必須閉合
常見無需自閉合標籤有input、br、img、hr等。 示例：
<!-- good -->
<input type="text" name="title" />
<!-- bad -->
<input type="text" name="title">
複製程式碼5 HTML 標籤的使用應該遵循標籤的語義
- p - 段落
- h1,h2,h3,h4,h5,h6 - 層級標題
- strong,em - 強調
- ins - 插入
- del - 刪除
- abbr - 縮寫
- code - 程式碼標識
- 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>
複製程式碼6 標籤的使用應儘量簡潔，減少不必要的標籤
示例：
<!-- good -->
<img class="avatar" src="image.png">
<!-- bad -->
<span class="avatar">
<img src="image.png">
</span>
複製程式碼7 屬性名必須使用小寫字母
示例：
<!-- good -->
<table cellspacing="0">...</table>
<!-- bad -->
<table cellSpacing="0">...</table>
複製程式碼8 布林型別的屬性，建議不新增屬性值
示例：
<input type="text" disabled>
<input type="checkbox" value="1" checked>
複製程式碼9 自定義屬性建議以 xxx- 為字首，推薦使用 data-
示例：
<ol data-ui-type="Select"></ol>
複製程式碼10 DOCTYPE
[強制] 使用 HTML5 的 doctype 來啟用標準模式，建議使用大寫的 DOCTYPE。 示例：
<!DOCTYPE html>
複製程式碼啟用viewport模式
<meta name="viewport" content="width=device-width, initial-scale=1">
複製程式碼啟用最新渲染模式
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge">
複製程式碼10 編碼
HTML 檔案使用無 BOM 的 UTF-8 編碼
11 CSS和JavaScript引入
[強制] 引入 CSS 時必須指明 rel="stylesheet" 引入 CSS 和 JavaScript 時無須指明 type 屬性 解釋：
text/css 和 text/javascript 是 type 的預設值。
在 head 中引入頁面需要的所有 CSS 資源。 JavaScript 應當放在頁面末尾，或採用非同步載入 解釋：
將 script 放在頁面中間將阻斷頁面的渲染。出於效能方面的考慮，如非必要，請遵守此條建議。
示例：
<body>
<!-- a lot of elements -->
<script src="init-behavior.js"></script>
</body>
複製程式碼[建議] 移動環境或只針對現代瀏覽器設計的 Web 應用，如果引用外部資源的 URL 協議部分與頁面相同，建議省略協議字首。
解釋：
使用 protocol-relative URL 引入 CSS，在 IE7/8 下，會發兩次請求。是否使用 protocol-relative URL 應充分考慮頁面針對的環境。
示例：
<script src="//s1.bdstatic.com/cache/static/jquery-1.10.2.min_f2fb5194.js"></script>
複製程式碼11 head
[強制] 頁面必須包含 title 標籤宣告標題 [強制] title 必須作為 head 的直接子元素，並緊隨 charset 宣告之後 解釋：
title 中如果包含 ascii 之外的字元，瀏覽器需要知道字元編碼型別才能進行解碼，否則可能導致亂碼。
示例：
<head>
<meta charset="UTF-8">
<title>頁面標題</title>
</head>
複製程式碼12 favicon
[強制] 保證 favicon 可訪問。
解釋：
在未指定 favicon 時，大多數瀏覽器會請求 Web Server 根目錄下的 favicon.ico 。為了保證favicon可訪問，避免404，必須遵循以下兩種方法之一：
- 在 Web Server 根目錄放置 favicon.ico 檔案。
- 使用 link 指定 favicon。
示例：
<link rel="shortcut icon" href="path/to/favicon.ico">
複製程式碼13 圖片
[強制] 禁止 img 的 src 取值為空。延遲載入的圖片也要增加預設的 src。
解釋：
src 取值為空，會導致部分瀏覽器重新載入一次當前頁面，參考：https://developer.yahoo.com/performance/rules.html#emptysrc
[建議] 避免為 img 新增不必要的 title 屬性。
解釋：
多餘的 title 影響看圖體驗，並且增加了頁面尺寸。
[建議] 為重要圖片新增 alt 屬性。
解釋：
可以提高圖片載入失敗時的使用者體驗。
[建議] 新增 width 和 height 屬性，以避免頁面抖動。
[建議] 有下載需求的圖片採用 img 標籤實現，無下載需求的圖片採用 CSS 背景圖實現。
解釋：
- 產品 logo、使用者頭像、使用者產生的圖片等有潛在下載需求的圖片，以 img 形式實現，能方便使用者下載。
- 無下載需求的圖片，比如：icon、背景、程式碼使用的圖片等，儘可能採用 css 背景圖實現。
14 表單
[強制] 有文字標題的控制元件必須使用 label 標籤將其與其標題相關聯 解釋：
有兩種方式：
- 將控制元件置於 label 內。
- label 的 for 屬性指向控制元件的 id。 推薦使用第一種，減少不必要的 id。如果 DOM 結構不允許直接巢狀，則應使用第二種。
示例：
<label><input type="checkbox" name="confirm" value="on"> 我已確認上述條款</label>
<label for="username">使用者名稱：</label> <input type="textbox" name="username" id="username">
複製程式碼[強制] 使用 button 元素時必須指明 type 屬性值。
解釋：
button 元素的預設 type 為 submit，如果被置於 form 元素中，點選後將導致表單提交。為顯示區分其作用方便理解，必須給出 type 屬性。
示例：
<button type="submit">提交</button>
<button type="button">取消</button>
複製程式碼15 模板中的 HTML
[建議] 模板程式碼的縮排優先保證 HTML 程式碼的縮排規則
示例：
<!-- good -->
{if $display == true}
<div>
<ul>
{foreach $item_list as $item}
<li>{$item.name}<li>
{/foreach}
</ul>
</div>
{/if}
<!-- bad -->
{if $display == true}
<div>
<ul>
{foreach $item_list as $item}
<li>{$item.name}<li>
{/foreach}
</ul>
</div>
{/if}
複製程式碼