在前端开发的过程中，它可以极大的提高代码编写的效率，同时还有多种实用的功能帮助进行前端开发。
- 生成后代元素：
>大于号表示后面要生成的内容是当前标签的后代nav>ul>li
每个命令输完后按下Tab键即可快速得到代码
<nav>
<ul>
<li></li>
</ul>
</nav>
- 生成兄弟元素：
+加号表示后面的元素和前面的元素是兄弟元素div+p+bq得到代码如下：
<div></div>
<p></p>
<blockquote></blockquote>
- 生成上级元素：
^表示^后面的元素与^前面的元素的父元素是平级，即兄弟元素。一个^表示提升一个层级，两个提升两级div+div>p>span+em^bq得到代码如下：
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
div+div>p>span+em^^bq得到代码如下：
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
- 生成类名
.Emmet 默认的标签为div，如果我们不给出标签名称的话，默认就生成div标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class=”item”></li>.container得到代码如下：
<div class=”container”></div>
如果想生成多个类名可连续写.container.wrapper.more得到代码如下：
<div class=”container wrapper more”></div>
生成ID:#
命令：#container得到代码如下：
<div id=”container”></div>生成分组：
()用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系
命令：(.foo>h1)+(.bar>h2) 得到代码如下：
<div class="foo">
<h1></h1>
</div>
<div class="bar">
<h2></h2>
</div>
- 重复生成多份：
*号后面是想重复生成的份数ul>li*5得到代码如下：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
- 对生成内容依次编号：
$$就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$ul>li.item$*5得到代码如下：
<ul>
<li class="item1"></li>
<li class="item1"></li>
<li class="item1"></li>
<li class="item1"></li>
<li class="item1"></li>
<ul>
- 生成自定义属性：[attr] 中括号里面的内容是你想添加的属性
td[rowspan=2 colspan=3 title]得到代码如下：
<td rowspan=”2” colspan=”3” title=””></td>
- 生成文本内容：{} 大括号里面是你想添加的文本内容
a{Click me}得到代码如下：
<a href=””>Click me</a>
p>{Click }+a{here}+{ to continue}得到代码如下：
<p>Click <a href=””>here</a>to continue</p>