[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插件，注意中英文切换和空格，熟练掌握以上命令可以快速提高开发效率.
