#通用約定
---
###代碼規范
* 縮進使用soft tab（4個空格）；
* 嵌套的節點應該縮進；
* 在屬性上，使用雙引號，不要使用單引號；
* 屬性名全小寫，用中劃線做分隔符；
* 不要在自動閉合標簽結尾處使用斜線（HTML5 規范 指出他們是可選的）；
* 不要忽略可選的關閉標簽，例：</li> 和 </body>
* 布爾類型的屬性，不添加屬性值
* 自定義屬性以 data- 為前綴
示例：
```
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<input type="text" disabled>
<input type="button" data-ui-type="Select">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
```
###屬性順序
屬性應該按照特定的順序出現以保證易讀性；
* class
* id
* name
* data-*
* src, for, type, href, value , max-length, max, min, pattern
* placeholder, title, alt
* aria-*, role
* required, readonly, disabled
class是為高可復用組件設計的，所以應處在第一位；
id更加具體且應該盡量少使用，所以將它放在第二位。
示例：
```html
<a class="..." id="..." data-modal="toggle" href="#">Example link</a>
<input class="form-control" type="text">
<img src="..." alt="...">
```
###嵌套
* 減少不必要的嵌套
在編寫HTML代碼時，需要盡量避免多余的不必要的嵌套；
很多時候，需要通過迭代和重構來使HTML變得更少。
示例：
```html
<!-- Not well -->
<span class="avatar">
<img src="...">
</span>
<!-- Better -->
<img class="avatar" src="...">
```
* 符合嵌套規則
所有元素必須正確嵌套，不允許交叉嵌套以及非法嵌套
示例：
```html
<!-- 交叉嵌套 -->
<!-- Not well -->
<span><dfn>交叉嵌套</span></dfn>
<!-- Better -->
<span><dfn>交叉嵌套</dfn></span>
<!-- 非法嵌套 -->
<!-- Not well -->
<ul>
<h3>xx列表</h3>
<li>asdasdsdasd</li>
<li>asdasdsdasd</li>
</ul>
<!-- Better -->
<div>
<h3>xx列表</h3>
<ul>
<li>asdasdsdasd</li>
<li>asdasdsdasd</li>
</ul>
</div>
```
###HTML注釋
在每個模塊開始和結束的地方添加注釋
示例：
```html
<!-- 新聞列表模塊 -->
<div class="m-news g-mod">
</div>
<!-- /新聞列表模塊 -->
<!-- 排行榜模塊 -->
<div class="m-topic g-mod">
</div>
<!-- /排行榜模塊 -->
```
###引入CSS，JS
根據HTML5規范, 通常在引入CSS和JS時不需要指明 type，因為 text/css 和 text/javascript 分別是他們的默認值。
示例：
```html
<!-- External CSS -->
<link rel="stylesheet" href="code_guide.css">
<!-- In-document CSS -->
<style>
...
</style>
<!-- External JS -->
<script src="code_guide.js"></script>
<!-- In-document JS -->
<script>
...
</script>
```
###boolean屬性
boolean屬性指不需要聲明取值的屬性，XHTML需要每個屬性聲明取值，但是HTML5并不需要，例如：```disabled```、```checked```、```selected```。
>boolean屬性的存在表示取值為true，不存在則表示取值為false。
```html
<input type="text" disabled>
<input type="checkbox" value="1" checked>
<select>
<option value="1" selected>1</option>
</select>
```
