[Emmet](http://www.emmet.io/)是一個前端開發插件，可以快速生成html代碼，提升開發效率.
#### 1.Sublime Text3安裝emmet
> preference－>package control ->install package,輸入emmet，安裝即可.
#### 2.快速生成html結構文檔
在新建的html中輸入!或者html，生成html 5結構文檔：
> ! 或者html:5
按tab鍵生成：
~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
~~~
html4結構文檔
> html:tx
按tab鍵生成：
~~~
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
~~~
### 3.生成帶id的標簽
> 元素名 #id名
如：
~~~
p#name
~~~
按tab鍵生成：
~~~
<p id="name"></p>
~~~
> #name
按tab鍵生成：
~~~
<div id="name"></div>
~~~
### 4.生成帶class的標簽
> div.classname
按tab鍵生成：
~~~
<div class="classname"></div>
~~~
混合：
> div#header+div.body+div#foot.classnam1.classname2.classname3
按tab鍵生成：
~~~
<div class="classname"></div>
<div id="header"></div>
<div class="body"></div>
<div id="foot" class="classnam1 classname2 classname3"></div>
~~~
### 5.生成子代：>
用符號”<”生成子代，示例：
> div >ul>li
按tab鍵生成：
~~~
<div>
<ul>
<li></li>
</ul>
</div>
~~~
### 6. 生成兄弟:+
使用”+”生成兄弟，示例：
> div+p+bq
按tab鍵生成：
~~~
<div></div>
<p></p>
<blockquote></blockquote>
~~~
### 7.生成父代：^
使用”^”生成父代節點，示例：
> div>p>h1^h2
按tab鍵生成：
~~~
<div>
<p>
<h1></h1>
</p>
<h2></h2>
</div>
~~~
### 8.重復元素：
任何元素后面加上*n就會被重復n次，比如生成一個包含4個li的ul：
> ul>(li.name)*4
按tab鍵生成：
~~~
<ul>
<li class="name"></li>
<li class="name"></li>
<li class="name"></li>
<li class="name"></li>
</ul>
~~~
### 9.生成分組：()
用括號進行分組，這樣可以更加明確要生成的結構，特別是層次關系，示例1：
> (div>dl>(dt+dd)*3)+footer>p
按tab鍵生成：
~~~
<h2></h2>
<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
~~~
示例2：
> div>(header>ul>(li>a)*2)+footer>p
按tab鍵生成：
~~~
<div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
~~~
### 10. 設置屬性:[]
屬性寫在[]內，屬性當中采用等號賦值，多個屬性用空格隔開.
示例
> a[href=”http://blog.csdn.net/napoay” title=”姚攀的博客”]
按tab鍵生成：
~~~
<a href="http://blog.csdn.net/napoay" title="姚攀的博客"></a>
~~~
### 11.對生成內容編號:$
可以使用美元符 $對項目編號，示例
> ul>li#item$*5
按tab鍵生成：
~~~
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
~~~
上面的例子是從小到大，從大到小可以在$后加@－：
> ul>li#item$@-*5
按tab鍵生成：
~~~
<ul>
<li id="item5"></li>
<li id="item4"></li>
<li id="item3"></li>
<li id="item2"></li>
<li id="item1"></li>
</ul>
~~~
從指定序號N開始：
> ul>li.item$@3*5
按tab鍵生成：
~~~
<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
~~~
從指定序號N開始倒序,N是最小的編號：
> ul>li#item$@-4*5
按tab鍵生成：
~~~
<ul>
<li id="item8"></li>
<li id="item7"></li>
<li id="item6"></li>
<li id="item5"></li>
<li id="item4"></li>
</ul>
~~~
### 12.生成文本內容:{}
想要在生成的元素內插入內容，可以使用{},把文本內容放進去即可。示例：
> ul#id1>li.classname{生成文本內容}*5
按tab鍵生成：
~~~
<ul id="id1">
<li class="classname">生成文本內容</li>
<li class="classname">生成文本內容</li>
<li class="classname">生成文本內容</li>
<li class="classname">生成文本內容</li>
<li class="classname">生成文本內容</li>
</ul>
~~~
小結：上述內容總結了emmet生成html文檔結構、類、id、屬性、文本內容、父級節點、兄弟階段、子節點、序號的方法。正確安裝emmet插件，注意中英文切換和空格，熟練掌握以上命令可以快速提高開發效率.
