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