在编写HTML及CSS代码时，emmet会极大地提高我们的编码速度。官网（https://emmet.io/）提供了很多编辑器的插件，同时也提供了文档说明。如果英文看得速度慢，这里有一份中文翻译版本：http://yanxyz.github.io/emmet-docs/。如果没有时间读这么多文档，同时你和我一样使用的是HBuilder或者HBuilderX，那么看看这份简易的教程，就可以熟悉大部分功能。
1.生成html5框架代码。
其实新建页面时，开发工具就可以选择生成一个简单的HTML5框架代码，但是没有<meta name="viewport"/>。可以手动添加，但是最快的方式是先全选，然后敲一个感叹号，再按tab键生成。注意直接按tab键，不要有空格。
2.id与class
emmet与CSS的语法有些相似。id也是用#，class也是用.
例如：div#top1 按tab后会生成
<div id="top1"></div>div.top 按tab后会生成
<div class="top"></div>在某些情况下，这个div都可以省略，也就是说只要输入 #top1 或者 .top就能生成相应的代码。emmet会获取父标签，然后自动生成对应的标签。有以下几种情况：
- li：用于 ul 和 ol 中
- tr：用于 table、tbody、thead 和 tfoot 中
- td：用于 tr 中
- option：用于 select 和 optgroup 中
- div:用于其他块级元素中
- span：用于其他行级元素中
其实记得就省略，不记得大不了不省略，多不了几个字符。
3.父子元素、兄弟元素
子元素用>符号，兄弟元素用+符号，这个与CSS相同。父元素用^符号，这个是CSS中没有的。^直接表示上级元素的兄弟元素，不需要再用+符号。
例如： div#top1>span#text1 按tab键会生成
<div id="top1">
<span id="text1"></span>
</div>div#top1+div#top2 按tab键会生成
<div id="top1"></div>
<div id="top2"></div>div#top1>span#text2^div#top2 按tab键会生成
<div id="top1">
<span id="text2"></span>
</div>
<div id="top2"></div>4.重复与分组
看了上面的三个规则，有读者可能觉得，没太多用，开发工具有代码提示，边写边提示，爽得很，不需要用emmet这个玩意。
那现在看看重复的功能。1个ul下面有5个li，那么可以使用 ul>li*5 按tab键后生成
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>另外，如果emmet写得比复杂的情况下，我们可以使用()来进行分组。
例如，用 table#detail>(tr.row>th.tableheader*3)+(tr.row>td.cell*3)*3，我们将生成一个table，有1行表头，里面有3个表头单元格，另外有3行，每行有3个单元格。代码如下：
<table id="detail">
<tr class="row">
<th class="tableheader"></th>
<th class="tableheader"></th>
<th class="tableheader"></th>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
<tr class="row">
<td class="cell"></td>
<td class="cell"></td>
<td class="cell"></td>
</tr>
</table>这下是不是感觉出效果来了。
5.编号
可以使用$来进行编号。例如上面那个例子，希望每一行的class不一样，不同列的单元格的class也不一样。我们可以这样写
table#detail>(tr.row>th.tableheader$*3)+(tr.row$>td.cell$*3)*3 按tab键后生成的代码如下：
<table id="detail">
<tr class="row">
<th class="tableheader1"></th>
<th class="tableheader2"></th>
<th class="tableheader3"></th>
</tr>
<tr class="row1">
<td class="cell1"></td>
<td class="cell2"></td>
<td class="cell3"></td>
</tr>
<tr class="row2">
<td class="cell1"></td>
<td class="cell2"></td>
<td class="cell3"></td>
</tr>
<tr class="row3">
<td class="cell1"></td>
<td class="cell2"></td>
<td class="cell3"></td>
</tr>
</table>假如希望顺序是3、2、1，可以用$@-
假如希望不从1开始，而从5开始，可以用$@5
假如希望序号是6、5、4，那么可以用$@-4
假如希望序号是01、02、03，那么可以用$$
如果希望序号是001、002、003那么可以用$$$
6.属性和文本
对于属性，可以用[]表示。
例如 td[title="Hello world!" colspan=3] 可以生成代码
<td title="Hello world!" colspan="3"></td>文本可以用{}表示。
例如 ul>li{列表$}*5 可以生成代码
<ul>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ul>如果是为了测试效果，想随机生成一段文字，可以使用Lorem Ipsum生成器。
例如使用 div.content>p*4>lorem10 将在div下生成4个p元素，每个元素有10个单词的假文。
这里生成的假文是拉丁文，但是想测试中文的效果，怎么办？打开word，输入=rand() 敲回车会生成一段中文的假文，复制过来就好。或者去这个网站http://www.cancms.com/content/dummytext，生成相应的中文假文。
7.缩写和厂商前缀
在写CSS时，emmet感觉帮助不大，我们能够使用一些特定的缩写来代替属性，从而能够少敲一些代码。
例如使用 w10 可以生成weight:10px; 实际在开发工具中使用时，一按w，马上会出来代码提示，还要按Esc取消代码提示才能继续使用emmet。但是对于某些特定的CSS3属性，会要写特定厂商的前缀。emmet可以让你在这些属性前加上-，然后再按tab键，就可以为该属性添加多个厂商前缀。
8.配置文件
刚接触到emmet时，我有个疑问，到哪里去找这些属性的缩写？这里有个网页是缩写大全：https://docs.emmet.io/cheat-sheet/就是黑底灰字，看得眼睛很花。另外官网的文档中，经常提到snippets.json这个配置文件，在哪里？我们到Hbuilder的安装目录下找到plugins文件夹，然后再找到io.emmet.eclipse_1.6.3.201705151634.jar，当然你的版本号可能跟我有区别。用解压缩工具解开，就能发现snippets.json。
