Emmet使用详解

太过爱你忘了你带给我的痛 2021-09-26 13:36 407阅读 0赞

Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，而且作为一款插件能够大部分的代码编辑器，文章后面列出了支持的代码编辑器类型。请看下面演示：

![301ff5c9-3604-3dd3-a206-6d3516861ec4.jpg][]   
Zen coding下的编码演示

一、快速编写HTML代码   
  
1.  初始化   
  
HTML文档需要包含一些固定的标签，比如<html>、<head>、<body>等，现在你只需要1秒钟就可以输入这些标签。比如输入“!”或“html:5”，然后按Tab键：

![0070e820-1cbf-3f42-8c5b-838e5774d02b.gif][]

*  html:5 或!：用于HTML5文档类型
 *  html:xt：用于XHTML过渡文档类型
 *  html:4s：用于HTML4严格文档类型

2.  轻松添加类、id、文本和属性   
  
连续输入元素名称和ID，Emmet会自动为你补全，比如输入p\#foo：

![cb250aef-3b60-3297-86ba-8c3ed36cacad.gif][]

连续输入类和id，比如p.bar\#foo，会自动生成：

Html代码

1.  <p class="bar" id="foo"></p>

下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1\{foo\}和a\[href=\#\]，就可以自动生成如下代码：

Html代码

1.  <h1>foo</h1>  
2.  <a href="\#"></a>

![167e1956-4ac6-3b6d-9025-8bf90fee1250.gif][]

3.  嵌套   
  
现在你只需要1行代码就可以实现标签的嵌套。

*  >：子元素符号，表示嵌套的元素
 *  \+：同级标签符号
 *  ^：可以使该符号前的标签提升一行

效果如下图所示：

![47ae82f5-4fd8-36a1-9b4e-d148237537ee.gif][]

4.  分组   
  
你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：

Html代码

1.  <div class="foo">  
2.    <h1></h1>  
3.  </div>  
4.  <div class="bar">  
5.    <h2></h2>  
6.  </div>

![ae3a8b58-244a-3680-9f0c-d0cab459fc41.gif][]

5.  隐式标签   
  
声明一个带类的标签，只需输入div.item，就会生成<div class="item"></div>。   
  
在过去版本中，可以省略掉div，即输入.item即可生成<div class="item"></div>。现在如果只输入.item，则Emmet会根据父标签进行判定。比如在<ul>中输入.item，就会生成<li class="item"></li>。

![363af658-650f-38d1-ad0e-9608df9d2873.gif][]

下面是所有的隐式标签名称：

*  li：用于ul和ol中
 *  tr：用于table、tbody、thead和tfoot中
 *  td：用于tr中
 *  option：用于select和optgroup中

6.  定义多个元素   
  
要定义多个元素，可以使用\*符号。比如，ul>li\*3可以生成如下代码：

Html代码

1.  <ul>  
2.    <li></li>  
3.    <li></li>  
4.    <li></li>  
5.  </ul>

![cf5613ac-4198-326e-a651-a08ad206800a.gif][]

7.  定义多个带属性的元素   
  
如果输入 ul>li.item$\*3，将会生成如下代码：

Html代码

1.  <ul>  
2.    <li class="item1"></li>  
3.    <li class="item2"></li>  
4.    <li class="item3"></li>  
5.  </ul>

![a1c5f9d8-d187-3bde-895b-2e14fb428184.gif][]

二、CSS缩写   
  
1.  值   
  
比如要定义元素的宽度，只需输入w100，即可生成

Css代码

1.  width: 100px;

![21a47a7c-2d38-3231-8b4b-7d15f38be57a.gif][]

除了px，也可以生成其他单位，比如输入h10p+m5e，结果如下：

Css代码

1.  height: 10%;  
2.  margin: 5em;

单位别名列表：

*  p 表示%
 *  e 表示 em
 *  x 表示 ex

2.  附加属性   
  
可能你之前已经了解了一些缩写，比如 @f，可以生成：

Css代码

1.  @font-face \{  
2.    font-family:;  
3.    src:url();  
4.  \}

一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+”符号来生成，比如输入@f+，将生成：

Css代码

1.  @font-face \{  
2.    font-family: 'FontName';  
3.    src: url('FileName.eot');  
4.    src: url('FileName.eot?\#iefix') format('embedded-opentype'),  
5.       url('FileName.woff') format('woff'),  
6.       url('FileName.ttf') format('truetype'),  
7.       url('FileName.svg\#FontName') format('svg');  
8.    font-style: normal;  
9.    font-weight: normal;  
10. \}

![2c8cccf4-be54-3190-b1e7-3713717e2a78.gif][]

3.  模糊匹配   
  
如果有些缩写你拿不准，Emmet会根据你的输入内容匹配最接近的语法，比如输入ov:h、ov-h、ovh和oh，生成的代码是相同的：

Css代码

1.  overflow: hidden;

![4c2c81e2-ebba-367e-a4fd-4f667d08ca84.gif][]

4.  供应商前缀   
  
如果输入非W3C标准的CSS属性，Emmet会自动加上供应商前缀，比如输入trs，则会生成：

Css代码

1.  \-webkit-transform: ;  
2.  \-moz-transform: ;  
3.  \-ms-transform: ;  
4.  \-o-transform: ;  
5.  transform: ;

![a68eda57-f573-343c-81b8-19e0a48c08fe.gif][]

你也可以在任意属性前加上“-”符号，也可以为该属性加上前缀。比如输入-super-foo：

Css代码

1.  \-webkit-super-foo: ;  
2.  \-moz-super-foo: ;  
3.  \-ms-super-foo: ;  
4.  \-o-super-foo: ;  
5.  super-foo: ;

如果不希望加上所有前缀，可以使用缩写来指定，比如-wm-trf表示只加上-webkit和-moz前缀：

Css代码

1.  \-webkit-transform: ;  
2.  \-moz-transform: ;  
3.  transform: ;

前缀缩写如下：

*  w 表示 -webkit-
 *  m 表示 -moz-
 *  s 表示 -ms-
 *  o 表示 -o-

5.  渐变   
  
输入lg(left, \#fff 50%, \#000)，会生成如下代码：

Css代码

1.  background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, \#fff), to(\#000));  
2.  background-image: -webkit-linear-gradient(left, \#fff 50%, \#000);  
3.  background-image: -moz-linear-gradient(left, \#fff 50%, \#000);  
4.  background-image: -o-linear-gradient(left, \#fff 50%, \#000);  
5.  background-image: linear-gradient(left, \#fff 50%, \#000);

![f39213f9-5d68-3728-8cf3-7964aaa02bae.gif][]

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

引用

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

![87a3d500-1798-3050-b7e0-df51c94bd203.gif][]

四、定制   
  
你还可以定制Emmet插件：

*  添加新缩写或更新现有缩写，可修改snippets.json文件
 *  更改Emmet过滤器和操作的行为，可修改preferences.json文件
 *  定义如何生成HTML或XML代码，可修改syntaxProfiles.json文件

五、针对不同编辑器的插件   
  
Emmet支持的编辑器如下（链接为针对该编辑器的Emmet插件）：

*  Sublime Text 2
 *  TextMate 1.x
 *  Eclipse/Aptana
 *  Coda 1.6 and 2.x
 *  Espresso
 *  Chocolat （通过“Install Mixin”对话框添加)
 *  Komodo Edit/IDE （通过Tools → Add-ons菜单添加)
 *  Notepad++
 *  PSPad
 *  <textarea>
 *  CodeMirror2/3
 *  Brackets

语法及标签缩写方法如下：

#### 后代：> ####

缩写：nav>ul>li

#### 兄弟：+ ####

缩写：div+p+bq

#### 上级：^ ####

缩写：div+div>p>span+em^bq

缩写：div+div>p>span+em^^bq

#### 分组：() ####

缩写：div>(header>ul>li\*2>a)+footer>p

缩写：(div>dl>(dt+dd)\*3)+footer>p

#### 乘法：\* ####

缩写：ul>li\*5

#### 自增符号：$ ####

缩写：ul>li.item$\*5

缩写：h$\[title=item$\]\{Header $\}\*3

<h1 title="item1">Header 1</h1> <h2 title="item2">Header 2</h2> <h3 title="item3">Header 3</h3>

缩写：ul>li.item$$$\*5

缩写：ul>li.item$@-\*5

缩写：ul>li.item$@3\*5

#### ID和类属性 ####

缩写：\#header

缩写：.title

缩写：form\#search.wide

缩写：p.class1.class2.class3

#### 自定义属性 ####

缩写：p\[title="Hello world"\]

缩写：td\[rowspan=2 colspan=3 title\]

缩写：\[a='value1' b="value2"\]

#### 文本：\{\} ####

缩写：a\{Click me\}

<a href="">Click me</a>

缩写：p>\{Click \}+a\{here\}+\{ to continue\}

<p>Click <a href="">here</a> to continue</p>

#### 隐式标签 ####

缩写：.class

缩写：em>.class

缩写：ul>.class

缩写：table>.row>.col

### HTML ###

所有未知的缩写都会转换成标签，例如，foo → <foo></foo>

缩写：!

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

缩写：a

缩写：a:link

缩写：a:mail

缩写：abbr

缩写：acronym

缩写：base

缩写：basefont

缩写：br

<br />

缩写：frame

缩写：hr

<hr />

缩写：bdo

缩写：bdo:r

缩写：bdo:l

缩写：col

<col />

缩写：link

缩写：link:css

缩写：link:print

缩写：link:favicon

缩写：link:touch

缩写：link:rss

缩写：link:atom

缩写：meta

缩写：meta:utf

缩写：meta:win

缩写：meta:vp

缩写：meta:compat

缩写：style

缩写：script

缩写：script:src

缩写：img

缩写：iframe

缩写：embed

缩写：object

缩写：param

缩写：map

缩写：area

缩写：area:d

缩写：area:c

缩写：area:r

缩写：area:p

缩写：form

缩写：form:get

缩写：form:post

缩写：label

缩写：input

缩写：inp

缩写：input:hidden

别名：input\[type=hidden name\]

缩写：input:h

别名：input:hidden

缩写：input:text, input:t

别名：inp

缩写：input:search

别名：inp\[type=search\]

缩写：input:email

别名：inp\[type=email\]

缩写：input:url

别名：inp\[type=url\]

缩写：input:password

别名：inp\[type=password\]

缩写：input:p

别名：input:password

缩写：input:datetime

别名：inp\[type=datetime\]

缩写：input:date

别名：inp\[type=date\]

缩写：input:datetime-local

别名：inp\[type=datetime-local\]

缩写：input:month

别名：inp\[type=month\]

缩写：input:week

别名：inp\[type=week\]

缩写：input:time

别名：inp\[type=time\]

缩写：input:number

别名：inp\[type=number\]

缩写：input:color

别名：inp\[type=color\]

缩写：input:checkbox

别名：inp\[type=checkbox\]

缩写：input:c

别名：input:checkbox

缩写：input:radio

别名：inp\[type=radio\]

缩写：input:r

别名：input:radio

缩写：input:range

别名：inp\[type=range\]

缩写：input:file

别名：inp\[type=file\]

缩写：input:f

别名：input:file

缩写：input:submit

缩写：input:s

别名：input:submit

缩写：input:image

缩写：input:i

别名：input:image

缩写：input:button

缩写：input:b

别名：input:button

缩写：isindex

缩写：input:reset

别名：input:button\[type=reset\]

缩写：select

缩写：option

缩写：textarea

缩写：menu:context

别名：menu\[type=context\]>

缩写：menu:c

别名：menu:context

缩写：menu:toolbar

别名：menu\[type=toolbar\]>

缩写：menu:t

别名：menu:toolbar

缩写：video

缩写：audio

缩写：html:xml

缩写：keygen

缩写：command

缩写：bq

别名：blockquote

缩写：acr

别名：acronym

缩写：fig

别名：figure

缩写：figc

别名：figcaption

缩写：ifr

别名：iframe

缩写：emb

别名：embed

缩写：obj

别名：object

缩写：src

别名：source

缩写：cap

别名：caption

缩写：colg

别名：colgroup

缩写：fst, fset

别名：fieldset

缩写：btn

别名：button

缩写：btn:b

别名：button\[type=button\]

缩写：btn:r

别名：button\[type=reset\]

缩写：btn:s

别名：button\[type=submit\]

[301ff5c9-3604-3dd3-a206-6d3516861ec4.jpg]: /images/20210923/e106e0bc2d5e4484a567c5718d7e6ec3.png
[0070e820-1cbf-3f42-8c5b-838e5774d02b.gif]: /images/20210923/856bf83c08134132bb28dcd8a4e48b53.png
[cb250aef-3b60-3297-86ba-8c3ed36cacad.gif]: /images/20210923/71523b6e120a4e42a49bdae65c4d48f5.png
[167e1956-4ac6-3b6d-9025-8bf90fee1250.gif]: /images/20210923/8345646d9e074e5dbf0e4aec3c3a625e.png
[47ae82f5-4fd8-36a1-9b4e-d148237537ee.gif]: /images/20210923/f94317bbfcdb4ef6b68936419f3b1ae3.png
[ae3a8b58-244a-3680-9f0c-d0cab459fc41.gif]: /images/20210923/39e0ba3a6c12479ab77ba9c646b756cc.png
[363af658-650f-38d1-ad0e-9608df9d2873.gif]: /images/20210923/79789516fe54474db1b9889b4525baeb.png
[cf5613ac-4198-326e-a651-a08ad206800a.gif]: /images/20210923/eb1f23cb3ca949fdb84166327ee5a32a.png
[a1c5f9d8-d187-3bde-895b-2e14fb428184.gif]: /images/20210923/f81857a497a54e849bed7ffc5d533063.png
[21a47a7c-2d38-3231-8b4b-7d15f38be57a.gif]: /images/20210923/a5fb35e7d3c44c4780c53331bb6e0dbb.png
[2c8cccf4-be54-3190-b1e7-3713717e2a78.gif]: /images/20210923/30cfda3ab2f048b99ba965d9c18ccde0.png
[4c2c81e2-ebba-367e-a4fd-4f667d08ca84.gif]: /images/20210923/b8fa1a9bf8564f8896889d643e4bf701.png
[a68eda57-f573-343c-81b8-19e0a48c08fe.gif]: /images/20210923/209a411c1aa54a6682f291c32ce4c963.png
[f39213f9-5d68-3728-8cf3-7964aaa02bae.gif]: /images/20210923/3b1dde2a164a4f85a565bf7564ea9690.png
[87a3d500-1798-3050-b7e0-df51c94bd203.gif]: /images/20210923/2cd336eae1ca4330a341e06a0e06bdf2.png