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 => 
 
foo =>  
html:5 => 将生成 HTML5 标准的包含空 body 的基本 DOM
html:xt => 生成 XHTM L过渡文档类型，DOCTYPE 为 XHTML
html:4s => 生成 HTML4 严格文档类型，DOCTYPE 为 HTML 4.01
a:mail          => 
a:link          => 
base            => 
br              => 

link            => 
script:src      => 
form:get        => 

label           => 
input           => 
inp             => 
input:hidden    =>  input:h 亦可
input:email     => 
input:password  => 
input:checkbox  => 
input:radio     => 
select          => 
option          => 
bq              => 

btn             => 
btn:s           => 
btn:r           => 

文本操作符

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

div{这是一段文本}
这是一段文本

a{点我点我}
点我点我

属性操作符

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

Id 和 Class：

div.test  => 

div#pageId => 

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

.class
=>


em>.class
=>


table>.row>.col
=>

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

div.test1.test2.test3
=>

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

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

嵌套操作符

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

子级

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

div#pageId>ul>li
=>

    

        

    

同级

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

div#pageId+div.child
=>

父级

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

div>p.parent>span.child^ul.brother>li
=>

    

    

        

    

分组操作符

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

div>(ul>li+span)+a
=>

    

        

        
    
    

乘法

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

ul>li*3
=>

    

    

    

自动编号

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

ul>li.item${item number:$}*3

    
item number:1
    
item number:2
    
item number:3

编号方向

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

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

ul>li.item$@-*3
=>

    

    

    

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

ul>li.item$$*3
=>

    

    

    

编号基数

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

ul>li.item$@-10*3
=>