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 会自动转换成对应标签。
形如:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 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 >
文本操作符 如果想在生成元素的同时添加文本内容,可以使用 {}
:
1 2 3 4 5 div{这是一段文本} <div > 这是一段文本</div > a{点我点我} <a href ="" > 点我点我</a >
属性操作符 属性运算符用于修改输出元素的属性。
Id 和 Class:
1 2 div.test => <div class ="test" > </div > div#pageId => <div id ="pageId" > </div >
隐式标签则会自动联想生成对应元素,根据配置规则不同生成的结果也是不同的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 .class => <div class > </div > em>.class => <em > <span class > </span > </em > table>.row>.col => <table > <tr class ="row" > <td class ="col" > </td > </tr > </table >
绑定多个类名用 .
符号连续起来即可:
1 2 3 div.test1.test2.test3 => <div class ="test1 test2 test3" > </div >
自定义属性使用 [attr1='' attr2='']
:
1 2 3 a[href='#' data-title='customer' target='_blank'] => <a href ="#" data-title ="customer" target ="_blank" > </a >
嵌套操作符 嵌套操作符用于将缩写元素放置在生成的树中,不管它应放置在上下文元素的内部或附近。
子级 通过 >
标识元素可以生成嵌套子级元素,可以配合元素属性进行连写。
1 2 3 4 5 6 7 div#pageId>ul>li => <div id ="pageId" > <ul > <li > </li > </ul > </div >
同级 +
字符表示生成兄弟级元素。
1 2 3 4 div#pageId+div.child => <div id ="pageId" > </div > <div class ="child" > </div >
父级 ^
用于生成父级元素的同级元素。从这个 ^
字符所在位置开始,查找左侧最近的元素的父级元素并生成其兄弟级元素。
1 2 3 4 5 6 7 8 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 将与 ()
内的元素同级。
1 2 3 4 5 6 7 8 9 div>(ul>li+span)+a => <div > <ul > <li > </li > <span > </span > </ul > <a href ="" > </a > </div >
乘法 使用 *
运算符,可以定义元素应输出的次数:
1 2 3 4 5 6 7 ul>li*3 => <ul > <li > </li > <li > </li > <li > </li > </ul >
自动编号 在生成重复项时,增加一个序号,只需要加上 $
符号即可。
1 2 3 4 5 6 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 >
编号方向 使用 @
修饰符,可以更改编号方向(升序或降序)和基数(例如起始值)。注意这个操作符在 $
之后添加。
@-
表示降序,@+
表示升序。默认使用升序。
1 2 3 4 5 6 7 ul>li.item$@-*3 => <ul > <li class ="item3" > </li > <li class ="item2" > </li > <li class ="item1" > </li > </ul >
若要两位数的序号,就得写两个 $
:
1 2 3 4 5 6 7 ul>li.item$$*3 => <ul > <li class ="item01" > </li > <li class ="item02" > </li > <li class ="item03" > </li > </ul >
编号基数 @N
可以改变起始值。需要注意的是,如果配合升降序使用的话,N 放到 +-
符后。
1 2 3 4 5 6 7 ul>li.item$@-10*3 => <ul > <li class ="item12" > </li > <li class ="item11" > </li > <li class ="item10" > </li > </ul >