# 通用約定
## 標簽
* 自閉合（self-closing）標簽，無需閉合 ( 例如：?`img`?`input`?`br`?`hr`?等 )；
* 可選的閉合標簽（closing tag），需閉合 ( 例如：`</li>`?或?`</body>`?)；
* 盡量減少標簽數量；
~~~
<img src="images/google.png" alt="Google">
<input type="text" name="title">
<ul>
<li>Style</li>
<li>Guide</li>
</ul>
<!-- Not recommended -->
<span class="avatar">
<img src="...">
</span>
<!-- Recommended -->
<img class="avatar" src="...">
~~~
## Class 與 ID
* class 應以功能或內容命名，不以表現形式命名；
* class 與 id 單詞字母小寫，多個單詞組成時，采用中劃線`-`分隔；
* 使用唯一的 id 作為 Javascript hook, 同時避免創建無樣式信息的 class；
~~~
<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>
~~~
## 屬性順序
HTML 屬性應該按照特定的順序出現以保證易讀性。
* id
* class
* name
* data-xxx
* src, for, type, href
* title, alt
* aria-xxx, role
~~~
<a id="..." class="..." data-modal="toggle" href="###"></a>
<input class="form-control" type="text">
<img src="..." alt="...">
~~~
## 引號
屬性的定義，統一使用雙引號。
~~~
<!-- Not recommended -->
<span id='j-hook' class=text>Google</span>
<!-- Recommended -->
<span id="j-hook" class="text">Google</span>
~~~
## 嵌套
`a 不允許嵌套 div`這種約束屬于語義嵌套約束，與之區別的約束還有嚴格嵌套約束，比如`a 不允許嵌套 a`。
嚴格嵌套約束在所有的瀏覽器下都不被允許；而語義嵌套約束，瀏覽器大多會容錯處理，生成的文檔樹可能相互不太一樣。
**語義嵌套約束**
* `<li>`?用于?`<ul>`?或?`<ol>`?下；
* `<dd>`,?`<dt>`?用于?`<dl>`?下；
* `<thead>`,?`<tbody>`,?`<tfoot>`,?`<tr>`,?`<td>`?用于?`<table>`?下；
**嚴格嵌套約束**
* inline-Level 元素，僅可以包含文本或其它 inline-Level 元素;
* `<a>`里不可以嵌套交互式元素`<a>`、`<button>`、`<select>`等;
* `<p>`里不可以嵌套塊級元素`<div>`、`<h1>~<h6>`、`<p>`、`<ul>/<ol>/<li>`、`<dl>/<dt>/<dd>`、`<form>`等。
更多詳情，參考[WEB標準系列-HTML元素嵌套](http://www.smallni.com/element-nesting/)
## 布爾值屬性
HTML5 規范中?`disabled`、`checked`、`selected`?等屬性不用設置值。
~~~
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
~~~
