#通用约定
---
###代码规范
* 缩进使用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>
```
