Emmet 笔记

Emmet（前身为 Zen Coding）是一个能大幅提高前端开发效率的工具。在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大地提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。

基本规则

语法基本规则如下：

• E 代表 HTML 标签。
• E#id 代表 id 属性。
• E.class 代表 class 属性。
• E[attr=foo] 代表某一个特定属性。
• E{foo} 代表标签包含的内容是 foo。
• E>N 代表 N 是 E 的子元素。
• E+N 代表 N 是 E 的同级元素。
• E^N 代表 N 是 E 的上级元素。

基础用法

元素

可以使用元素的名称，如 div 或 p 来生成 HTML 标签。Emmet 没有一组可用的标签名称，可以写任何单词并将其转换为标签。也就是只要知道元素的缩写，Emmet 会自动转换成对应标签。

形如：

div => <div> </div>
foo => <foo> </foo>
html:5 => 将生成 HTML5 标准的包含空 body 的基本 DOM
html:xt => 生成 XHTM L过渡文档类型，DOCTYPE 为 XHTML
html:4s => 生成 HTML4 严格文档类型，DOCTYPE 为 HTML 4.01
a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
base            => <base href="">
br              => <br>
link            => <link rel="stylesheet" href="">
script:src      => <script src=""></script>
form:get        => <form action="" method="get"></form>
label           => <label for=""></label>
input           => <input type="text">
inp             => <input type="text" name="" id="">
input:hidden    => <input type="hidden" name=""> input:h 亦可
input:email     => <input type="email" name="" id="">
input:password  => <input type="password" name="" id="">
input:checkbox  => <input type="checkbox" name="" id="">
input:radio     => <input type="radio" name="" id="">
select          => <select name="" id=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>

文本操作符

如果想在生成元素的同时添加文本内容，可以使用 {}：

div{这是一段文本}
<div>这是一段文本</div>

a{点我点我}
<a href="">点我点我</a>

属性操作符

属性运算符用于修改输出元素的属性。

Id 和 Class：

div.test  => <div class="test"></div>
div#pageId => <div id="pageId"></div>

隐式标签则会自动联想生成对应元素，根据配置规则不同生成的结果也是不同的。

.class
=>
<div class></div>

em>.class
=>
<em><span class></span></em>

table>.row>.col
=>
<table>
    <tr class="row">
        <td class="col"></td>
    </tr>
</table>

绑定多个类名用 . 符号连续起来即可：

div.test1.test2.test3
=>
<div class="test1 test2 test3"></div>

自定义属性使用 [attr1='' attr2='']：

a[href='#' data-title='customer' target='_blank']
=>
<a href="#" data-title="customer" target="_blank"></a>

嵌套操作符

嵌套操作符用于将缩写元素放置在生成的树中，不管它应放置在上下文元素的内部或附近。

子级

通过 > 标识元素可以生成嵌套子级元素，可以配合元素属性进行连写。

div#pageId>ul>li
=>
<div id="pageId">
    <ul>
        <li></li>
    </ul>
</div>

同级

+ 字符表示生成兄弟级元素。

div#pageId+div.child
=>
<div id="pageId"></div>
<div class="child"></div>

父级

^ 用于生成父级元素的同级元素。从这个 ^ 字符所在位置开始，查找左侧最近的元素的父级元素并生成其兄弟级元素。

div>p.parent>span.child^ul.brother>li
=>
<div>
    <p class="parent"><span class="child"></span></p>
    <ul class="brother">
        <li></li>
    </ul>
</div>

分组操作符

分组使用 () 来实现缩写的分离。比如这个例子，如果不加括号那么 a 将作为 span 的同级元素生成，加上括号 a 将与 () 内的元素同级。

div>(ul>li+span)+a
=>
<div>
    <ul>
        <li></li>
        <span></span>
    </ul>
    <a href=""></a>
</div>

乘法

使用 * 运算符，可以定义元素应输出的次数：

ul>li*3
=>
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

自动编号

在生成重复项时，增加一个序号，只需要加上 $ 符号即可。

ul>li.item${item number:$}*3
<ul>
    <li class="item1">item number:1</li>
    <li class="item2">item number:2</li>
    <li class="item3">item number:3</li>
</ul>

编号方向

使用 @ 修饰符，可以更改编号方向（升序或降序）和基数（例如起始值）。注意这个操作符在 $ 之后添加。

@- 表示降序，@+ 表示升序。默认使用升序。

ul>li.item$@-*3
=>
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

若要两位数的序号，就得写两个 $：

ul>li.item$$*3
=>
<ul>
    <li class="item01"></li>
    <li class="item02"></li>
    <li class="item03"></li>
</ul>

编号基数

@N 可以改变起始值。需要注意的是，如果配合升降序使用的话，N 放到 +- 符后。

ul>li.item$@-10*3
=>
<ul>
    <li class="item12"></li>
    <li class="item11"></li>
    <li class="item10"></li>
</ul>