通用約定
標(biāo)簽

自閉合（self-closing）標(biāo)簽，無(wú)需閉合 ( 例如： img input br hr 等 )；
可選的閉合標(biāo)簽（closing tag），需閉合 ( 例如：</li> 或 </body>)；
盡量減少標(biāo)簽數(shù)量；

Class 與 ID

class 應(yīng)以功能或內(nèi)容命名，不以表現(xiàn)形式命名；
class 與 id 單詞字母小寫(xiě)，多個(gè)單詞組成時(shí)，采用中劃線-分隔；
使用唯一的 id 作為 Javascript hook，同時(shí)避免創(chuàng)建無(wú)樣式信息的 class；

屬性順序

HTML 屬性應(yīng)該按照特定的順序出現(xiàn)以保證易讀性。

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

引號(hào)

屬性的定義，統(tǒng)一使用雙引號(hào)。

b嵌套

a 不允許嵌套 div 這種約束屬于語(yǔ)義嵌套約束，與之區(qū)別的約束還有嚴(yán)格嵌套約束，比如 a 不允許嵌套 a。

嚴(yán)格嵌套約束在所有的瀏覽器下都不被允許；而語(yǔ)義嵌套約束，瀏覽器大多會(huì)容錯(cuò)處理，生成的文檔樹(shù)可能相互不太一樣。

 

語(yǔ)義嵌套約束

<li> 用于 <ul> 或 <ol> 下；
<dd>，<dt> 用于 <dl> 下；
<thead>，<tbody>，<tfoot>，<tr>，<td> 用于<table>下；

嚴(yán)格嵌套約束

inline-Level 元素，僅可以包含文本或其它 inline-Level 元素；
<a> 里不可以嵌套交互式元素 <a>、<button>、<select>等；
<p>里不可以嵌套塊級(jí)元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

布爾值屬性

HTML5 規(guī)范中 disabled、checked、selected 等屬性不用設(shè)置值。

語(yǔ)義化
沒(méi)有 CSS 的 HTML 是一個(gè)語(yǔ)義系統(tǒng)而不是 UI 系統(tǒng)。

通常情況下，每個(gè)標(biāo)簽都是有語(yǔ)義的，所謂語(yǔ)義就是你的衣服分為外套， 褲子，裙子，內(nèi)褲等，各自有對(duì)應(yīng)的功能和含義。所以你總不能把內(nèi)褲套在脖子上吧。-- 一絲

此外語(yǔ)義化的 HTML 結(jié)構(gòu)，有助于機(jī)器（搜索引擎）理解，另一方面多人協(xié)作時(shí)，能迅速了解開(kāi)發(fā)者意圖。

常見(jiàn)標(biāo)簽語(yǔ)義

標(biāo)簽	語(yǔ)義
<p>	段落
<h1><h2><h3>...	標(biāo)題
<ul>	無(wú)序列表
<ol>	有序列表
<blockquote>	大段引用
<cite>	一般引用
	為樣式加粗而加粗
<storng>	為強(qiáng)調(diào)內(nèi)容而加粗
<i>	為樣式傾斜而傾斜
<em>	為強(qiáng)調(diào)內(nèi)容而傾斜
code	代碼標(biāo)識(shí)
abbr	縮寫(xiě)

示例

將你構(gòu)建的頁(yè)面當(dāng)作一本書(shū)，將標(biāo)簽的語(yǔ)義對(duì)應(yīng)的其功能和含義；

書(shū)的名稱：<h1>
書(shū)的每個(gè)章節(jié)標(biāo)題: <h2>
章節(jié)內(nèi)的文章標(biāo)題: <h3>
小標(biāo)題 / 副標(biāo)題: <h4> <h5> <h6>
章節(jié)的段落: <p>

HEAD
文檔類型

為每個(gè) HTML 頁(yè)面的第一行添加標(biāo)準(zhǔn)模式（standard mode）的聲明， 這樣能夠確保在每個(gè)瀏覽器中擁有一致的表現(xiàn)。

字符編碼

以無(wú) BOM 的 utf-8 編碼作為文件格式；
指定字符編碼的 meta 必須是 head 的第一個(gè)直接子元素

IE 兼容模式

優(yōu)先使用最新版本的 IE 和 Chrome 內(nèi)核。

SEO 優(yōu)化

viewport

viewport: 一般指的是瀏覽器窗口內(nèi)容區(qū)的大小，不包含工具條、選項(xiàng)卡等內(nèi)容；
width: 瀏覽器寬度，輸出設(shè)備中的頁(yè)面可見(jiàn)區(qū)域?qū)挾龋?br />device-width: 設(shè)備分辨率寬度，輸出設(shè)備的屏幕可見(jiàn)寬度；
initial-scale: 初始縮放比例；
maximum-scale: 最大縮放比例；
為移動(dòng)端設(shè)備優(yōu)化，設(shè)置可見(jiàn)區(qū)域的寬度和初始縮放比例。

iOS 圖標(biāo)

apple-touch-icon 圖片自動(dòng)處理成圓角和高光等效果；
apple-touch-icon-precomposed 禁止系統(tǒng)自動(dòng)添加效果，直接顯示設(shè)計(jì)原圖；

favicon

在未指定 favicon 時(shí)，大多數(shù)瀏覽器會(huì)請(qǐng)求 Web Server 根目錄下的 favicon.ico。為了保證 favicon 可訪問(wèn)，避免 404，必須遵循以下兩種方法之一：

在 Web Server 根目錄放置 favicon.ico 文件；
使用 link 指定 favicon；

HEAD 模板

HTML 注釋

模塊注釋