适用于Webstorm;Sublime; VSCode等工具
作为一个前端人员，熟练的操作工具，可以便捷的使用仿CSS选择器的语法来生成代码，以便于提高了HTML/CSS代码编写的速度，从而提升个人价值。
快速编写HTML代码
初始化
html:5 或! 用于HTML5文档类型
html:xt 用于XHTML过渡文档类型
html:4s 用于HTML4严格文档类型
轻松添加类、id、文本和属性
- 连续输入元素名称和ID，tab键自动为你补全，比如输入：
1 | $ div.class |
Html代码
元素
- 您可以使用元素的名称，如div或p来生成HTML标签。Emmet没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写,Emmet会自动转换成对应标签.
形如:
1 | $ link |
- 嵌套操作符(Nesting operators)
嵌套操作符用于将缩写元素放置在生成的树中,是否应放置在上下文元素的内部或附近.
E>N 代表N是E的子元素。
1
2
3
4
5
6
7div#pageId>ul>li
>
> <div id="pageId">
<ul>
<li></li>
</ul>
</div>E+N 代表N是E的同级元素。
1
2
3
4div#pageId+div.child
>
> <div id="pageId"></div>
<div class="child"></div>
- E^N 代表N是E的上级元素。
1
2
3
4
5
6
7
8div>p.parent>span.child^ul.brother>li
>
> <div>
<p class="parent"><span class="child"></span></p>
<ul class="brother">
<li></li>
</ul>
</div>
- 分组操作符(Grouping)
分组使用()来实现缩写的分离.比如这个例子,如果不加括号那么a将作为span的子级元素生成.加上括号a将于()内的元素同级.1
2
3
4
5
6
7
8
9div>(ul>li+span)>a
>
> <div>
<ul>
<li></li>
<span></span>
</ul>
<a href=""></a>
</div>
- 乘法(Multiplication)
1 | ul>li*3 |
- 自动计数(numbering)
1 | ul>li.item${item number:$}*3 |
如果生成两位数则使用两个连续的$$,更多位数以此类推…
使用@修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）.注意这个操作符在$之后添加
@-表示降序,@+表示升序,默认使用升序.
@N可以改变起始值.需要注意的是如果配合升降序使用的话N是放到+-符后.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15ul>li.item$@-*3
>
> <ul>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
---------------------------
ul>li.item$@-10*3
>
><ul>
<li class="item12"></li>
<li class="item11"></li>
<li class="item10"></li>
</ul>
配合嵌套元素和计数的大栗子1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17div.nav>(nav#navbar>(ul>li>(a[href="/xxx/product/$" data-index=$]>lorem4)*5))+div.btn[type='button']>span{--}^^div#main
>
> <div class="nav">
<nav id="navbar">
<ul>
<li>
<a href="/xxx/product/1" data-index="1">Lorem ipsum dolor sit.</a>
<a href="/xxx/product/2" data-index="2">Dolor vel, quia quas.</a>
<a href="/xxx/product/3" data-index="3">Qui hic, corrupti eum!</a>
<a href="/xxx/product/4" data-index="4">Necessitatibus perspiciatis, corrupti. Praesentium!</a>
<a href="/xxx/product/5" data-index="5">Nostrum quos, voluptate. Velit!</a>
</li>
</ul>
</nav>
<div class="btn" type="button"><span>--</span></div>
</div>
<div id="main"></div>
进阶高级用法
1 | lorem |
CSS缩写
值
比如要定义元素的宽度，只需输入w100，即可生成1
2
3{
width: 100px;
}
除了px，也可以生成其他单位，比如输入h10p+m5e，结果如下：1
2
3
4
5body{
width: 100px;
height: 10%;
margin: 5em;
}
单位别名列表：
p 表示%
e 表示 em
x 表示 ex
附加属性
可能你之前已经了解了一些缩写，比如 @f，可以生成1
2
3
4@font-face {
font-family:;
src:url();
}
一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成：1
2
3
4
5
6
7
8
9
10
11
@font-face {
font-family: 'FontName';
src: url('FileName.eot');
src: url('FileName.eot?#iefix') format('embedded-opentype'),
url('FileName.woff') format('woff'),
url('FileName.ttf') format('truetype'),
url('FileName.svg#FontName') format('svg');
font-style: normal;
font-weight: normal;
}
模糊匹配
如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：1
2
3{
overflow: hidden;
}
供应商前缀
如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trf，则会生成：1
2
3
4
5
6
7{
-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;
}
你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：1
2
3
4
5
6
7{
-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;
}
如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：1
2
3
4
5{
-webkit-transform: ;
-moz-transform: ;
transform: ;
}
前缀缩写如下：
w 表示 -webkit-
m 表示 -moz-
s 表示 -ms-
o 表示 -o-
渐变
输入lg(left, #fff 50%, #000)，会生成如下代码：1
2
3
4
5
6
7{
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
}
