哈哈哈，感觉这个名字起的很高大上有木有，使用指南😂
其实就是自己的一点使用总结罢了
废话少说，来正文👇
写在前面
我是在sublime上使用的，所以先讲一下sublime安装Emmet的方法
1. 安装Package Control组件
这个组件其实就类似包管理工具，sublime的插件都要通过它来安装
- control + ` sublime的console窗口
- 粘贴以下代码到底部命令行并回车：
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())
- 重启sublime
- Perferences->package settings看到package control，表示安装成功
2. 安装Emmet插件
- command + shift + p 打开package control的命令板
- 输入install然后选择install Package
- 然输入emmet找到Emmet Css Snippets，点击自动完成安装
使用方法
新建html文件
- mac下用sublime首先要把文件保存为html类型
- 输入
html:5后按tab键便会出现html5的框架- 输入
任意字母按tab键生成标签，即便不是合法的html标签- 输入标签时也可以设置一些属性，比如：
// 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>
