語法
- 用四個(gè)空格來代替制表符（tab） -- 這是唯一能保證在所有環(huán)境下獲得一致展現(xiàn)的方法。不允許使用 2 個(gè)空格 或 tab 字符。
- 嵌套元素應(yīng)當(dāng)縮進(jìn)一次（即四個(gè)空格）。
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
- 對(duì)于屬性的定義，確保全部使用雙引號(hào)，絕不要使用單引
<!-- good -->
<div class="good"></div>
<!-- bad-->
<div class='bad'></div>
- 不要在自閉合（self-closing）元素的尾部添加斜線。
常見無需自閉合標(biāo)簽有 input、br、img、hr 等。
<!-- good -->
<input type="text" name="title">
<!-- bad-->
<input type="text" name="title" />
- 不要省略可選的結(jié)束標(biāo)簽（例如,</ div>或 </ body）。
<!-- good -->
<ul>
<li>first</li>
<li>second</li>
</ul>
<!-- bad-->
<ul>
<li>first
<li>second
</ul>
- 標(biāo)簽使用必須符合標(biāo)簽嵌套規(guī)則。
比如 div 不得置于 p 中，tbody 必須置于 table 中。li必須置于ul或者ol中，dt dd 必須置于dl 中
<!-- good -->
<p>Esprima <strong>building block</strong> for some JavaScript language tools.</p>
<!-- bad-->
<p><div class="text"></div></p>
- HTML 標(biāo)簽的使用應(yīng)該遵循標(biāo)簽的語義
p - 段落
h1,h2,h3,h4,h5,h6 - 層級(jí)標(biāo)題
strong- 強(qiáng)調(diào)
ins - 插入
del - 刪除
abbr - 縮寫
code - 代碼標(biāo)識(shí)
cite - 引述來源作品的標(biāo)題
q - 引用
blockquote - 一段或長篇引用
ul - 無序列表
ol - 有序列表
dl,dt,dd - 定義列表
i,u,em - 小標(biāo)簽 圖標(biāo)或者單個(gè)文字控制
- img 標(biāo)簽上要加 alt 描述屬性，a 標(biāo)簽上要加title屬性
<a href="www.jerei.com" title="捷瑞數(shù)字官網(wǎng)">
- 在 CSS 可以實(shí)現(xiàn)相同需求的情況下不得使用表格進(jìn)行布局。
- 標(biāo)簽名必須使用小寫字母
<!-- good -->
<div></div>
<!-- bad -->
<DIV></DIV>
- 布爾（boolean）型屬性在聲明時(shí)不賦值。
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
- 屬性順序
HTML 屬性應(yīng)當(dāng)按照以下給出的順序依次排列，確保代碼的易讀性。
所有屬性皆使用雙引號(hào)而不是單引號(hào)
class
id, name
data-*
src, for, type, href, value
title, alt
class 用于標(biāo)識(shí)高度可復(fù)用組件，因此應(yīng)該排在首位。id 用于標(biāo)識(shí)具體組件，應(yīng)當(dāng)謹(jǐn)慎使用（確保ID唯一性），因此排在第二位。
<a class="..." id="..." data-toggle="modal" href="#">Example link</a>
<input class="form-control" type="text">
HTML5 doctype
- 為每個(gè) HTML 頁面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明，這樣能夠確保在每個(gè)瀏覽器中擁有一致的展現(xiàn)。
- 強(qiáng)烈建議為 html 根元素指定 lang 屬性，從而為文檔設(shè)置正確的語言。這將有助于語音合成工具確定其所應(yīng)該采用的發(fā)音，有助于翻譯工具確定其翻譯時(shí)所應(yīng)遵守的規(guī)則等等。統(tǒng)一為 lang="zh-cn"
<!DOCTYPE html>
<html lang="zh-cn">
<head>
</head>
</html>
字符編碼
通過明確聲明字符編碼，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity），從而全部與文檔編碼一致（一般采用 UTF-8 編碼）。
<head>
<meta charset="UTF-8">
</head>
響應(yīng)式網(wǎng)站的viewport
為保證響應(yīng)式網(wǎng)站在移動(dòng)端的正常預(yù)覽
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
IE 兼容模式
IE 支持通過特定的 <meta> 標(biāo)簽來確定繪制當(dāng)前頁面所應(yīng)該采用的 IE 版本。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode，從而通知 IE 采用其所支持的最新的模式。
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
添加網(wǎng)頁圖標(biāo)，關(guān)鍵詞和網(wǎng)站描述，便于SEO搜索
在未指定 favicon 時(shí)，大多數(shù)瀏覽器會(huì)請(qǐng)求 Web Server 根目錄下的 favicon.ico 。為了保證 favicon 可訪問，避免 404，必須遵循以下兩種方法之一：
1.在 Web Server 根目錄放置 favicon.ico 文件。
2.使用 link 指定 favicon。
<meta content="" name="Keywords">
<meta content="" name="Description">
<link rel="icon" href="/resources/favicon.ico" >
引入 CSS 和 JavaScript 文件
根據(jù) HTML5 規(guī)范，在引入 CSS 和 JavaScript 文件時(shí)一般不需要指定 type 屬性，因?yàn)?text/css 和 text/javascript 分別是它們的默認(rèn)值。
所有 CSS 資源應(yīng)當(dāng)在head中引用，JavaScript 應(yīng)當(dāng)放在頁面末尾，或采用異步加載。
<link rel="stylesheet" href="style.css">
<script src="jquery.js"></script>
實(shí)用為王
盡量遵循 HTML 標(biāo)準(zhǔn)和語義，但是不要以犧牲實(shí)用性為代價(jià)。任何時(shí)候都要盡量使用最少的標(biāo)簽并保持最小的復(fù)雜度。盡量減少代碼嵌套
JavaScript 生成的標(biāo)簽
通過 JavaScript 生成的標(biāo)簽讓內(nèi)容變得不易查找、編輯，并且降低性能。能避免時(shí)盡量避免。
代碼分離
嚴(yán)格地保證HTML、CSS、JS三者分離，并盡量使三者之間沒有太多的交互和聯(lián)系。
- 盡可能減少CSS和JS引用個(gè)數(shù)，盡量合并壓縮。
- 不使用行內(nèi)樣式（<style>.no-good {}</style>）
- 不在元素上使用 style 屬性（<div style="border-top: 5px solid black"></div>）
- 不使用行內(nèi)腳本（<script>alert('no good')</script>）
div層級(jí)較多時(shí)推薦添加注釋
<!-- main -->
<div class="main">
<!-- pageHeader -->
<div class="pageHeader">
<div class="logo">
</div>
</div>
<!-- /pageHeader -->
</div>
<!-- /main -->
表單
- 控件標(biāo)題
有文本標(biāo)題的控件必須使用 label 標(biāo)簽將其與其標(biāo)題相關(guān)聯(lián)。
1.將控件置于 label 內(nèi)。
2.label 的 for 屬性指向控件的 id。
推薦使用第一種，減少不必要的 id。如果 DOM 結(jié)構(gòu)不允許直接嵌套，則應(yīng)使用第二種。
<label><input type="checkbox" name="confirm" value="on"> 我已確認(rèn)上述條款</label>
<label for="username">用戶名：</label> <input type="textbox" name="username" id="username">
- 按鈕
button 元素的默認(rèn) type 為 submit，如果被置于 form 元素中，點(diǎn)擊后將導(dǎo)致表單提交。為顯示區(qū)分其作用方便理解，必須給出 type 屬性。
<button type="submit">提交</button>
<button type="button">取消</button>
