emmet 是一个提高前端开发效率的一个工具。
emmet允许在html、xml、和css等文档中输入缩写，然后按tab键自动展开为完整的代码片段。
一、Sublime Text 3 安装插件Emmet
点击菜单栏的首选项
->Package Control
-> 在弹出命令行中输入ip，在列表中点击“install Package”
-> 弹出命令行输入框，输入“emmet”进行安装
本人安装完后提示
Error while loading PyV8 binary:exit code 4
Try to manually install PyV8 from
https://github.com/emmetio/pyv8-binaries
解决方法：
按提示打开https://github.com/emmetio/pyv8-binaries，选择自己版本下载pyv8，本人下载pyv8-win64-p3.zip。
点击Sublime Text 3菜单栏的首选项->浏览插件目录，打开Packages目录，再切换到上一层Installed Packages目录，
新建目录PyV8，把pyv8-win64-p3.zip解压后的文件放进去，重启ST编辑器。
二、emmet的用法
emmet插件的官方文档： https://docs.emmet.io/abbreviations/syntax/
新建一个html文件
1、元素
可以使用元素的名称（如DIV或P）生成HTML标记。
如输入div按tabl键后，自动生成<div></div>。
如果输入！，则自动生成一个HTML5基本结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body> </body>
</html>
2、嵌套操作符
（1）子元素：>
<!-- div>ul>li --> <div>
<ul>
<li></li>
</ul>
</div>
备注：div>ul>li的中间和后面不能有空格，否则按tab键后emmet 会停止解析，后面的例子也一样不能有空格。
（2）兄弟元素：+
<!-- div+p+bq --> --> <div></div>
<p></p>
<blockquote></blockquote>
（3）向上一层：^，和>相反，可以多次使用
<!-- div+div>p>span+em --> <div></div>
<div>
<p><span></span><em></em></p>
</div> <!-- div+div>p>span+em^^^bq --> <div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
（4）乘法：*，重复指定次数生成元素
<!-- ul>li*5 --> <ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
（5）分组：()，括号里面的内容为一个代码块，括号后面的元素与括号的第一个元素在同一级别
<!-- div>(header>ul>li*2>a)+footer>p --> <div>
<header>
<ul>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</header>
<footer>
<p></p>
</footer>
</div>
3、属性操作符
（1）id和class
<!-- div#header+div.page+div#footer.class1.class2.class3 --> <div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
（2）自定义属性：[attr]
<!-- td[title="Hello world!" colspan=3] --> <td title="Hello world!" colspan="3"></td>
（3）项目编号：$
<!-- ul>li.item$*5 --> <ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
</ul>
使用任意个$在数字前加任意个0
<!-- ul>li.item$$*5 --> <ul>
<li class="item01"></li>
<li class="item02"></li>
<li class="item03"></li>
<li class="item04"></li>
<li class="item05"></li>
</ul>
倒序，在$后面加@-
<!-- ul>li.item$@-*5 --> <ul>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
指定开始的序号，在$后面加@N，N为开始的序号
<!-- ul>li.item$@3*5 --> <ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
4、文本：{}，为元素添加文本
<!-- a{Click me} -->
<a href="">Click me</a>因为文本也是节点，所以 a[href=1.htm]{click me} 与 a[href=1.htm]>{click me} 等价。
但是有多个元素时生成的结果会不同，用子元素>后面有元素时，也会放在a元素里面，例如
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>