sublime Emmet插件使用方法总结

Emmet(前身是Zen Coding)，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发,例如快速生成html5头部就靠它了。。

一、安装emmet：

下面方法适用于 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；（ctr+shfit+p 在输入框中输入 Install package）

这个步骤可能会出现Sublime Install Package无法打开的错误，解决方法https://blog.csdn.net/weixin_40283570/article/details/93911890

3、搜索 emmet 并安装。

二、快速编写HTML代码

先来看一下这个插件的效果，

新建一个HTML文档，输入“!”或“html:5”，然后按Tab键：

常用的一些基本语法：

1、生成后代元素：> 大于号表示后面要生成的内容是当前标签的后代

每个命令输完后按下Tab键即可快速得到代码

缩写：div>ul>li

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

2、生成兄弟元素：+ 加号表示后面的元素和前面的元素是兄弟元素

缩写：div+p+a

	<div></div><p></p><a href=""></a>

3、生成类名： . Emmet 默认的标签为 div ，如果我们不给出标签名称的话，默认就生成 div 标签。Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。

缩写: .box

<div class="box"></div>

分别在ul 和 li 写 .box，如果父级是ul 则生成li

<ul><li class="box3"></li><li><div class="box2"></div></li>
</ul>

如果是多个类名呢？可以连续写类名

缩写:.one.two.more

<div class="one two more"></div>

4、生成ID：#

缩写：#con

<div id="con"></div>

ID和类名可以组合使用

5、生成分组：() 用括号进行分组，这样可以更加明确要生成的结构，特别是层次关系

缩写：(.foo>h1)+(.bar>h2)

<div class="foo"><h1></h1>
</div>
<div class="bar"><h2></h2>
</div>

6、重复生成多份：* *号后面是想重复生成的份数

缩写：ul>li*5

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

7、对生成内容依次编号：$ $就表示一位数字，只出现一个的话，就从1开始。如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$

命令：ul>li.item$*5 得到代码如下：

<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li>
</ul>

只能这样单调的生成序号？对于强大的 Emmet 来说，肯定不会了，我们也可以在 $ 后面增加 @- 来实现倒序排列：
命令：ul>li.item$@-*5 得到代码如下：

<ul><li class="item5"></li><li class="item4"></li><li class="item3"></li><li class="item2"></li><li class="item1"></li>
</ul>

同样，我们也可以使用 @N 指定开始的序号

命令：ul>li.item$@3*5 得到代码如下：

<ul><li class="item3"></li><li class="item4"></li><li class="item5"></li><li class="item6"></li><li class="item7"></li>
</ul>

至于ul>li.item$@-3*5 生成什么你们自己琢磨吧！

8、生成自定义属性：[attr] 中括号里面的内容是你想添加的属性

命令：td[rowspan=2 colspan=3 title] 得到代码如下：

<td rowspan="2" colspan="3" title=""></td>

9、生成文本内容：{} 大括号里面是你想添加的文本内容

命令：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 class="item1">item1</li><li class="item2">item2</li><li class="item3">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 class="article"><h1 class="ok" title="papername" style="color:#000;"></h1><h3 class="no" title="subname" style="color:#fff;"></h3><p class="words"></p></div>
</div>

练习的过程中我们可以试着反推出命令行

<div class="header"><ul class="nav"><li><a href="" style="block"><span>name</span></a></li><li><a href="" style="block"><span>name</span></a></li><li><a href="" style="block"><span>name</span></a></li><li><a href="" style="block"><span>name</span></a></li><li><a href="" style="block"><span>name</span></a></li><li><a href="" style="block"><span>name</span></a></li></ul>
</div>

<table><thead><td class="col1"></td><td class="col2"></td><td class="col3"></td><td class="col4"></td></thead><tbody><tr class="row01"><td class="col1"></td></tr><tr class="row02"><td class="col2"></td></tr><tr class="row03"><td class="col3"></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="abc1.js" type="text/javascript"></script><script src="abc2.js" type="text/javascript"></script><script src="abc3.js" type="text/javascript"></script>
</head>
<body><div class="content"><div class="nav"><ul><li><a href=""><span></span></a></li></ul></div></div><div class="sidebar"><div class="top"></div><div class="middle"></div><div class="bottom"></div></div><div class="mian"><div class="article"><h1>article1</h1></div><div class="article"><h1>article2</h1></div><div class="article"><h1>article3</h1></div></div>
</body>
<div class="footer">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=abc$.js]*3)+(body>(.content>.nav>ul>li>a>span)+(.sidebar>.top+.middle+.bottom)+(.mian>.article*3>h1{article$}))+(.footer{copyright})

三、emmet在HTML与CSS中的应用

emmet除了能快速编辑出上面的代码以外，还有一些其他代码也可快速编辑，具体的、全面的快速编辑方式，还请浏览emmet官方文档（有详细说明哦！）

下面只列出一些常用的快速编辑方式

form<form action=""></form>form:get<form action="" method="get"></form>form:post<form action="" method="post"></form>label<label for=""></label>input<input type="text" />inp<input type="text" name="" id="" />input:hidden, input:h<!-- Alias of input[type=hidden name] --><input type="hidden" name="" />input:text, input:t<!-- Alias of inp --><input type="text" name="" id="" />input:search<!-- Alias of inp[type=search] --><input type="search" name="" id="" />
input:password, input:p
<!-- Alias of inp[type=password] --><input type="password" name="" id="" />
input:datetime
<!-- Alias of inp[type=datetime] --><input type="datetime" name="" id="" />input:checkbox, input:c
<!-- Alias of inp[type=checkbox] --><input type="checkbox" name="" id="" />
input:radio, input:r
<!-- Alias of inp[type=radio] --><input type="radio" name="" id="" />
input:range
<!-- Alias of inp[type=range] --><input type="range" name="" id="" />
input:file, input:f
<!-- Alias of inp[type=file] --><input type="file" name="" id="" />
input:submit, input:s
<input type="submit" value="" />
input:image, input:i
<input type="image" src="" alt="" />
input:button, input:b
<input type="button" value="" />
input:reset
<!-- Alias of input:button[type=reset] --><input type="reset" value="" />
select
<select name="" id=""></select>
select:disabled, select:d
<!-- Alias of select[disabled.] --><select name="" id="" disabled="disabled"></select>
option, opt
<option value=""></option>
textarea
<textarea name="" id="" cols="30" rows="10"></textarea>
button:submit, button:s, btn:s
<!-- Alias of button[type=submit] --><button type="submit"></button>
button:reset, button:r, btn:r
<!-- Alias of button[type=reset] --><button type="reset"></button>
button:disabled, button:d, btn:d
<!-- Alias of button[disabled.] --><button disabled="disabled"></button>

CSS中缩写

单位：