Emmet插件使用方法总结
在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet(前身是Zen Coding)，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
一、安装emmet：packages安装
下面方法适用于 sublime text 3。
1、安装 Package ctrl： 使用 ctrl + ～ 打开控制台，输入以下代码：
import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener(urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen('http://sublime.wbond.net/' + pf.replace(' ','%20')).read())
2、在 Package ctrl 中选择 Install package；
3、搜索 emmet 并安装。
二、快速编写HTML代码
先来看一下这个插件的效果，
新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：
基本语法：
1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代
命令：nav>ul>li
每个命令输完后按下Tab键即可快速得到代码
<nav> <ul> <li></li> </ul></nav>
2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素
命令：div+p+bq 得到代码如下：
<div></div><p></p><blockquote></blockquote>
3、生成上级元素：^ 表示^后面的元素与^前面的元素的父元素是平级，及兄弟元素。一个^表示提升一个层级，两个提升两级
命令：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>
4、生成类名： . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li ></li>。
命令：.container 得到代码如下：
<div ></div>
如果想生成多个类名可连续写
命令： .container.wrapper.more 得到代码如下：
<div ></div>
5、生成ID：#
命令：#container 得到代码如下：
<div id="container"></div>
6、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系
命令：(.foo>h1)+(.bar>h2) 得到代码如下：
<div > <h1></h1></div><div > <h2></h2></div>
7、重复生成多份：* *号后面是想重复生成的份数
命令：ul>li*5 得到代码如下：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
8、对生成内容依次编号：$ $就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$
命令：ul>li.item$*5 得到代码如下：
<ul> <li ></li> <li ></li> <li ></li> <li ></li> <li ></li></ul>
只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
命令：ul>li.item$@-*5 得到代码如下：
<ul> <li ></li> <li ></li> <li ></li> <li ></li> <li ></li></ul>
同样，我们也可以使用 @N 指定开始的序号
命令：ul>li.item$@3*5 得到代码如下：
<ul> <li ></li> <li ></li> <li ></li> <li ></li> <li ></li></ul>
至于ul>li.item$@-3*5 生成什么你们自己琢磨吧！
9、生成自定义属性：[attr] 中括号里面的内容是你想添加的属性
命令：td[rowspan=2 colspan=3 title] 得到代码如下：
<td rowspan="2" colspan="3" title=""></td>
10、生成文本内容：{} 大括号里面是你想添加的文本内容
命令：a{Click me} 得到代码如下：
<a href="">Click me</a>
命令：p>{Click }+a{here}+{ to continue} 得到代码如下：
<p>Click <a href="">here</a>to continue</p>
到此为止基本语法内容也就这么多，剩下的就是加强理解与练习了，
ul>li.item${item$}*3
<ul> <li >item1</li> <li >item2</li> <li >item3</li> </ul>
#content>.article>h1.ok[title=parpername][style=color:#000;]+h3.no[title=subname][style=color:#fff;]+p.words
<div id="content"> <div > <h1 title="papername" ></h1> <h3 title="subname" ></h3> <p ></p> </div> </div>
练习的过程中我们可以试着反推出命令行
<div > <ul > <li><a href="" ><span>name</span></a></li> <li><a href="" ><span>name</span></a></li> <li><a href="" ><span>name</span></a></li> <li><a href="" ><span>name</span></a></li> <li><a href="" ><span>name</span></a></li> <li><a href="" ><span>name</span></a></li> </ul> </div>
<table> <thead> <td ></td> <td ></td> <td ></td> <td ></td> </thead> <tbody> <tr > <td ></td> </tr> <tr > <td ></td> </tr> <tr > <td ></td> </tr> </tbody> <tfoot> <td></td> <td></td> <td></td> <td></td> <td></td> </tfoot> </table>
<html> <head> <title></title> <style type="text/css"></style> <script src='/images/loading.gif' data-original="abc1.js" type="text/javascript"></script> <script src='/images/loading.gif' data-original="abc2.js" type="text/javascript"></script> <script src='/images/loading.gif' data-original="abc3.js" type="text/javascript"></script> </head> <body> <div > <div > <ul> <li><a href=""><span></span></a></li> </ul> </div> </div> <div > <div ></div> <div ></div> <div ></div> </div> <div > <div > <h1>article1</h1> </div> <div > <h1>article2</h1> </div> <div > <h1>article3</h1> </div> </div> </body> <div >copyright</div> </html>
这些代码的命令你反推出来了吗？
1.命令：.header>ul.nav>li*6>a[style=block]>span{name}
2.命令：table>(thead>td.col$*4)+(tbody>tr.row$$*3>td.col$)+(tfoot>td*5)
3.命令： html>(head>title+style[type=text/css]+script[type=text/javascript][src='/images/loading.gif' data-original=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})
原标题：Emmet插件使用方法总结
关键词：
我知道了 