Emmet，让你爱上敲代码

最新推荐文章于 2020-12-13 10:18:47 发布

owen1190

最新推荐文章于 2020-12-13 10:18:47 发布

阅读量2k

点赞数

分类专栏：前端工具笔记-前端文章标签：文本编辑 Emmet

本文链接：https://blog.csdn.net/owen1190/article/details/53484535

版权

笔记-前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

前端工具

2 篇文章 0 订阅

订阅专栏

Emmet 是一个可用在许多流行文本编辑器上的极大简化HTML和CSS工作流程的插件。

Emmet的所有功能，都是在输入后按tab键，就会显示出你所想要的。

本文中所有例子是基于windows下的Sublime Text3

HTML

文档初始格式化

html:5 
-> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>

</body>
</html>

元素

可以用任何元素名字来创建标签

div -> <div></div>

嵌套操作

child：>

使用>符号，将大于号右面元素嵌套在左面的元素之中。

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

Sibling: +

使用+符号，使两者成为兄弟元素。

div + p
->
<div></div>
<p></p>

Climb-up: ^

使用^，可以让元素在DOM中向上升一级。

div+div>p>span^p
->
<div></div>
<div>
    <p><span></span></p>
    <p></p>
</div>

多个^,可以升多级。

div+div>p>span^^p
->
<div></div>
<div>
    <p><span></span></p>
</div>
<p></p>

multiplication:*

用*可以定义需要创建多少次元素。

ul>li*5
->
<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>

Grouping:()

在复杂的缩写中，使用()将同一个父元素的元素连在一起。

(div>dl>(dt+dd)*3)+footer>p
->
<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

属性操作

ID和Class

同css一样，用#表示ID，.表示类。

div#header+div.page
->
<div id="header"></div>
<div class="page"></div>

定制属性

使用[attr]添加你所想要的属性

td[title="hello world" colspan=3]
->
<td title="Hello world!" colspan="3"></td>

项目编号：$

使用*可以重复元素，使用$对其进行编号。

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>

也可以用多重$，用零填补不够的数字。

ul>li.item$$*5
->
<ul>
        <li class="item01"></li>
        <li class="item02"></li>
        <li class="item03"></li>
        <li class="item04"></li>
        <li class="item05"></li>
</ul>

用@可以改变编号的顺序或开始的数字
@后添加-，递减排序

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>

@后加数字，改变开始的数字

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
->
<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Text:{}

元素后加{}，就可以给元素添加文本值。

a{Click me}
->
<a href="">Click me</a>

注意{}的位置

p>{Click }+a{here}+{ to continue}
->
<p>Click <a href="">here</a> to continue</p>

注意格式

有的时候为了阅读方便，会加入空格，可是这样会导致Emmet无法使用。

(header > ul.nav > li*5) + footer

上例就无法使用，如果将元素之间空格取消就可以了。

隐式标签名

在不同标签名下使用缩写，会生成指定的标签。

li for ul and ol
tr for table, tbody, thead and tfoot
td for tr
option for select and optgroup

<div>.item</div>
->
<div class=item></div>

<ul>.item</ul>
->
<ul><li class="item"></li></ul>

生成Lorem ipsum文本

Lorem ipsum指一篇常用于排版设计领域的拉丁文文章，主要目的是测试文章或文字在不同字型、版型下看起来的效果。通过Emmet，你只需输入lorem 或 lipsum即可生成这些文字。还可以指定文字的个数，

CSS

带单位的值

使用整数的缩写，会自动在后面添加px单位

m10 -> margin:10px;
m10-20 -> margin:10px 20px;
m-10--20 -> margin:-10px -20px;

使用浮点值的缩写,会自动在后面添加em单位

m1.5 -> margin:1.5em;

使用字母字符，就会自动明确单位

m1.5ex -> margin:1.5ex;

如果已经明确单位了，就不需要使用连字符了

m10ex20em -> margin:10ex 20em;
m10ex-5 -> margin:10ex -5px;

值的别名

p -> %
e -> em
x -> ex

颜色

Emmet支持十六进制的颜色，

c#3 -> color:#333;

#是一个值的分离器，所以不需要连字符来分离。

bd5#0s -> border:5px #000 solid;

可以写一个、两个、三个字符作为颜色的值

#1 -> #11111
#e0 -> #e0e0e0
#fc0 -> #ffcc00

无单位属性

一些CSS属性是没有单位，

lh2 -> line-height: 2;
fw400 -> font-weight: 400;

!important

可以在css缩写后加!，会自动添加!important

p! -> padding: !important;
p!+ m10e -> padding: !important; margin : 10em;

供应商前缀

属性前加-，会自动添加供应商前缀，

-bdrs -> 
        -webkit-border-radius: ;
        -moz-border-radius: ;
        -ms-border-radius: ;
        -o-border-radius: ;
        border-radius: ;

输入之后，只需要输入一次数值，就会给所有属性添加此数值。

如果不需要所有供应商前缀，则使用缩写来指定

w: webkit
m: moz
s: ms
o: o

-wm-bdrs -> 
    -webkit-border-radius: ;
    -moz-border-radius: ;

渐变

使用lg(...)，就会自动添加渐变属性

lg(left,#0,top,black) 
-> 
background-image: -webkit-linear-gradient(left, #0, top, black);
background-image: -o-linear-gradient(left, #0, top, black);
background-image: linear-gradient(to right, #0, top, black);