哈哈哈，感觉这个名字起的很高大上有木有，使用指南😂
其实就是自己的一点使用总结罢了
废话少说，来正文👇

写在前面

我是在sublime上使用的，所以先讲一下sublime安装Emmet的方法

1. 安装Package Control组件

这个组件其实就类似包管理工具，sublime的插件都要通过它来安装

1. control + ` sublime的console窗口
2. 粘贴以下代码到底部命令行并回车：

import urllib2,os;pf='Package Control.sublime-package';ipp=sublime.installed*packages*path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('[http://sublime.wbond.net/'+pf.replace](http://sublime.wbond.net/'+pf.replace)(' ','%20')).read())

3. 重启sublime
4. Perferences->package settings看到package control，表示安装成功

2. 安装Emmet插件

1. command + shift + p 打开package control的命令板
2. 输入install然后选择install Package
3. 然输入emmet找到Emmet Css Snippets，点击自动完成安装

使用方法

新建html文件

1. mac下用sublime首先要把文件保存为html类型
2. 输入html:5后按tab键便会出现html5的框架
3. 输入任意字母按tab键生成标签，即便不是合法的html标签
4. 输入标签时也可以设置一些属性，比如：

// btn:s  
<button type="submit"></button>
// input:c
<input type="checkbox" name="" id="">
// input:number
<input type="number" name="" id="">
// meta:vp
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

后代 ： >

例：ul>li

<ul>
  <li></li>
</ul>

兄弟 ： +

例：div+p+img

<div></div>
<p></p>
<img src="" alt="">

上级：^

例：div+div>span>em^p

<div></div>
<div>
  <span><em></em></span>
  <p></p>
</div>
// p标签是em的上级，即和span标签同级

例：div+div>span>em^^p

<div></div>
<div><span><em></em></span></div>
<p></p>
// p标签是em上级的上级，即和div标签同级

分组：()

例：(div+p>span)+div>(p+img)

<div></div>
<p><span></span></p>
<div>
  <p></p>
  <img src="" alt="">
</div>

乘法：*

例：ul>li*6

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

自增符号：$

例：ul>li#id$*6

<ul>
  <li id="id1"></li>
  <li id="id2"></li>
  <li id="id3"></li>
  <li id="id4"></li>
  <li id="id5"></li>
  <li id="id6"></li>
</ul>

文本：{}

例：ul>li#id${this is id $$@-3}*6

<ul>
  <li id="id1">this is id 08</li>
  <li id="id2">this is id 07</li>
  <li id="id3">this is id 06</li>
  <li id="id4">this is id 05</li>
  <li id="id5">this is id 04</li>
  <li id="id6">this is id 03</li>
</ul>
// 两个$$表示数字位数，@-3表示倒序到3；相反，@3表示正序从3开始

id和类属性

例：div#div1.red.big

<div id="div1" class="red big"></div>

自定义属性

例：div[am="div1" beautiful="red big" haha]

<div am="div1" beautiful="red big" haha=""></div>

隐式标签

例：.lala

<div class="lala"></div>

例：em>.lala

<em><span class="lala"></span></em>

例：ul>.lala

<ul>
  <li class="lala"></li>
</ul>

例：table>.row>.col

<table>
  <tr class="row">
      <td class="col"></td>
  </tr>
</table>