1.基本設(shè)置
1.1 縮進(jìn)使用4個(gè)空格(四個(gè)空格在所有編輯器上顯示縮進(jìn)一致)
1.2 嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)
示例：
<!--bad-->
<html>
<div class="demo">我并沒有縮進(jìn)</div>
<div class="demo">我確實(shí)沒有縮進(jìn)</div>
</html>
<!--good-->
<html>
<div class="demo">我并沒有縮進(jìn)</div>
<div class="demo">我確實(shí)沒有縮進(jìn)</div>
</html>
1.3 所有標(biāo)簽和屬性名稱一律小寫(否則可能導(dǎo)致Angular的不兼容。)
<!-- bad-->
<div class="demo" ATTR1="1">我使用的是大寫</div>
<!--good-->
<div class="demo" attr1="1">我使用的是小寫</div>
1.4 屬性值一律使用雙引號(hào)(統(tǒng)一標(biāo)準(zhǔn)，方便js的代碼構(gòu)建)
1.5 不要在自動(dòng)閉合標(biāo)簽結(jié)尾處使用斜線（參考見HTML5 規(guī)范）
2.HTML doctype
統(tǒng)一在頁面開頭使用<!DOCTYPE html>這個(gè)doctype來啟用標(biāo)準(zhǔn)模式脑奠，使其在每個(gè)瀏覽器中得到一致的渲染待逞。
3.語言屬性
建議html標(biāo)簽上加上lang屬性。因?yàn)檫@樣會(huì)給語音工具和翻譯工具幫助虚茶，告訴它們應(yīng)當(dāng)怎么去發(fā)音和翻譯。
具體可以在sitepoint上可以查到語言列表芥永；
<!--示例-->
<html lang="zh-CN">
<!-- ... -->
</html>
4.字符編碼
通過明確聲明字符編碼聚蝶，能夠確保瀏覽器快速并容易的判斷頁面內(nèi)容的渲染方式杰妓。這樣做的好處是，可以避免在 HTML 中使用字符實(shí)體標(biāo)記（character entity）碘勉，從而全部與文檔編碼一致（一般采用 UTF-8 編碼）巷挥。
<!--示例-->
<head>
<meta charset="UTF-8">
</head>
5.IE兼容模式
用 <meta> 標(biāo)簽可以指定頁面應(yīng)該用什么版本的IE來渲染；詳細(xì)的解讀可以點(diǎn)擊這個(gè)鏈接验靡； 不同doctype在不同瀏覽器下會(huì)觸發(fā)不同的渲染模式倍宾。除非有強(qiáng)烈的特殊需求，否則最好是設(shè)置為 edge mode胜嗓，從而通知 IE 采用其所支持的最新的模式高职。
<!--示例-->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
</head>
...
</html>
6.標(biāo)簽語義化
使用有良好語義的標(biāo)簽，能夠很好地實(shí)現(xiàn)自我解釋辞州，方便搜索引擎理解網(wǎng)頁的結(jié)構(gòu)怔锌，抓取重要內(nèi)容。去掉樣式后也會(huì)根據(jù)瀏覽器的默認(rèn)樣式很好地組織網(wǎng)頁內(nèi)容孙技，具有很好的可讀性产禾，從而實(shí)現(xiàn)對(duì)特殊終端的兼容。
<!--bad-->
<div class="h2">
標(biāo)簽的語義<a href="#">更多>></a>
</div>
<div class="p">
段落一的內(nèi)容……
<span class="strong">根據(jù)瀏覽器的默認(rèn)樣式</span>牵啦。亚情。。
</div>
<div class="p">段落二的內(nèi)容……</div>
<!--good-->
<div class="title">
<h2>標(biāo)簽的語義</h2>
<a href="#">更多>></a>
</div>
<p>段落一的內(nèi)容……<strong>根據(jù)瀏覽器的默認(rèn)樣式 </strong>……</p>
<p>段落二的內(nèi)容</p>
7.布爾（boolean）型屬性
boolean屬性就是指不需要聲明取值的屬性哈雏，XHTML需要每個(gè)屬性聲明取值楞件，但是HTML5并不需要； HTML5 規(guī)范中 disabled裳瘪、checked土浸、selected 等屬性不用設(shè)置值。
<!--示例-->
<select>
<option value="1" selected>1</option>
</select>
<input type="text" disabled>
<input type="video" value="1" checked>
8.代碼嵌套
8.1盡量減少嵌套的層次
在編寫HTML代碼時(shí)彭羹，需要盡量避免多余的父節(jié)點(diǎn)黄伊；
<!-- not well -->
<span class="imgCon">
<img src="...">
</span>
<!-- better -->
<img class="imgCon" src="...">
8.2 嵌套要合理，不要胡亂嵌套
譬如：<li>就應(yīng)該用在ul,ol的下面派殷；dd,dt就應(yīng)該嵌套在dl下面还最。
<!--bad-->
<ul>
<div>我嵌套到ul里面了</div>
</ul>
<!--good-->
<ul>
<li>我嵌套到ul里面了</li>
</ul>
8.3 塊級(jí)元素不能放在標(biāo)簽p里面，a里面不能再嵌套a標(biāo)簽毡惜。
<!--bad-->
<p><div>我是塊級(jí)元素</div></p>
<a href="###"><a href="###">我是錨點(diǎn)</a></a>
<!--good-->
<p><span>我是塊級(jí)元素</span></p>
<a href="###"><strong>我是錨點(diǎn)</strong></a>
9.favicon
保證favicon的可訪問性拓轻。 在未指定 favicon 時(shí)，大多數(shù)瀏覽器會(huì)請(qǐng)求根目錄下的 favicon.ico 经伙。為了保證favicon可訪問扶叉，可以采取下面2個(gè)方法： 1.在 Web Server 根目錄放置 favicon.ico 文件。 2.使用 link 指定 favicon,如右所示：<link rel="icon" href="/icon/favicon.ico">
10.viewport
- viewport: 一般指的是瀏覽器窗口內(nèi)容區(qū)的大小，不包含工具條枣氧、選項(xiàng)卡等內(nèi)容溢十；
- width: 瀏覽器寬度，輸出設(shè)備中的頁面可見區(qū)域?qū)挾龋?/li>
- device-width: 設(shè)備分辨率寬度达吞，輸出設(shè)備的屏幕可見寬度茶宵；
- initial-scale: 初始縮放比例；
- maximum-scale: 最大縮放比例宗挥；
- 頁面寬度小于 980px 時(shí)，若需 iOS 設(shè)備友好种蝶，應(yīng)當(dāng)設(shè)置 viewport 的 width 值來適應(yīng)你的頁面寬度契耿。同時(shí)因?yàn)椴煌苿?dòng)設(shè)備分辨率不同，在設(shè)置時(shí)螃征，應(yīng)當(dāng)使用 device-width 和 device-height 變量搪桂。關(guān)于 viewport 的更多介紹，可以參見 Safari Web Content Guide的介紹盯滚。
