Emmet(早期版本叫做Zen coding)是一款跨平台的web前端开发编辑器插件(支持常用的Notepad++，Sublime Text，Dreamweaver，Eclipse，Netbeans，Vim等)，借助它我们可以很轻松的用类似css选择器的简写结构来快速书写html代码和CSS，从而提高开发效率(WordPress后台也支持zen coding我会告诉你么XD)。
下面我以Notepad++为例来讲解Emmet的具体使用方法：
一、展开缩写
输入标签名或自定义缩写结构，按下快捷键(Ctrl+E)即可输出目标代码结构，下面代码示例中的”→”代表转换指向：
1、HTML编写的使用方法：
1.1 html的DOCTYPE声明
1.1.1 输出html5的doctype声明：! 或 html:5
|
1
2
3
4
5
6
7
8
9
10
|
<!doctype html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Document</
title
>
</
head
>
<
body
>
</
body
>
</
html
>
|
1.1.2 html:xt :输出xhtml过渡类型的doctype声明
html:xs :输出xhtml1.0严格类型的doctype声明
html:xxs :输出xhtml1.1的doctype声明
1.2、html注释
c
|
1
|
<!-- -->
|
cc:ie6
|
1
2
3
|
<!--[if lte IE 6]>
<![endif]-->
|
1.3常用html元素书写规则
1.3.1、添加附带ID元素E#name:
|
1
|
p#myID → <
p
id
=
"myID"
></
p
>
|
1.3.2、添加附带class的元素E.name：
|
1
|
p.myClass → <
p
class
=
"myClass"
></
p
>
|
混合添加id和多个类，靠前的属性先输出
|
1
2
3
|
div#test.one.two → <
div
id
=
"test"
class
=
"one two"
></
div
>
div.one.two#test → <
div
class
=
"one two"
id
=
"test"
></
div
>
div.one#test.two → <
div
class
=
"one two"
id
=
"test"
></
div
>
|
1.3.3、嵌套输出子元素E>F：
|
1
2
3
4
|
ul>li>a →
<
ul
>
<
li
><
a
href
=
""
></
a
></
li
>
</
ul
>
|
混合使用
|
1
2
3
4
|
ul#nav>li>a.link →
<
ul
id
=
"nav"
>
<
li
><
a
href
=
""
class
=
"link"
></
a
></
li
>
</
ul
>
|
1.3.4、输出兄弟元素E+E：
|
1
2
3
4
|
div+p+bq →
<
div
></
div
>
<
p
></
p
>
<
blockquote
></
blockquote
>
|
1.3.5、”^”后的元素位置由内层提升到上一层级，^^表示上升两层，以此类推(Emmet新增)^F：
^后元素提升一个层级
|
1
2
3
4
5
6
|
div+div>p>span+em^bq →
<
div
></
div
>
<
div
>
<
p
><
span
></
span
><
em
></
em
></
p
>
<
blockquote
></
blockquote
>
</
div
>
|
^^后元素提升两个层级
|
1
2
3
4
5
6
|
div+div>p>span+em^^bq →
<
div
></
div
>
<
div
>
<
p
><
span
></
span
><
em
></
em
></
p
>
</
div
>
<
blockquote
></
blockquote
>
|
^^^后元素提升三个层级
|
1
2
3
4
5
6
7
8
|
div+div>ul>li>a>span^^^span →
<
div
></
div
>
<
div
>
<
ul
>
<
li
><
a
href
=
""
><
span
></
span
></
a
></
li
>
</
ul
>
<
span
></
span
>
</
div
>
|
1.3.6、输出元素的属性，多个属性以空格间隔，属性值可以加单双引号或不加引号[attribute1=value attribute2=value ...]：
|
1
2
3
4
5
6
7
8
|
p[title="He11o wor1d"] →
<
p
title
=
"He11o wor1d"
></
p
>
td[rowspan=2 co1span=3 tit1e] →
<
td
rowspan
=
"2"
co1span
=
"3"
tit1e
=
""
></
td
>
[a='valuel' b="va1ue2"] →
<
div
a
=
"valuel"
b
=
"va1ue2"
></
div
>
|
1.3.7、输出包含文本的元素E{text}：
|
1
2
3
4
|
a{click me} →
<
a
href
=
""
>click me</
a
>
p>{Click }+a{here}+{ to continue} →
<
p
>Click <
a
href
=
""
>here</
a
> to continue</
p
>
|
1.3.8、省略写法
id和类书写不加元素时默认输出div标签，还可以根据上下文匹配
|
1
2
|
#myID → <
div
id
=
"myID"
></
div
>
.myID → <
div
class
=
"myID"
></
div
>
|
|
1
2
3
4
|
.wrap>.content → div.wrap>div.content
em>.info → em>span.info
ul>.item*3 → ul>li.item*3
table>#row$*4>[colspan=2] → table>tr#row$*4>td[colspan=2]
|
输出包含基本元素的结构E+：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
ul+ →
<
ul
>
<
li
></
li
>
</
ul
>
table+ →
<
table
>
<
tr
>
<
td
></
td
>
</
tr
>
</
table
>
dl+
<
dl
>
<
dt
></
dt
>
<
dd
></
dd
>
</
dl
>
select+
<
select
name
=
""
id
=
""
>
<
option
value
=
""
></
option
>
</
select
>
|
以下两处官方速查手册中显示输出对应结构，但在Notepad++下测试并未通过(未加元素名称的地方输出了div)，可能官方后期会做支持：
|
1
2
3
4
5
6
7
8
9
10
|
u1>.c1ass →
<
ul
>
<
li
class
=
"class"
></
li
>
</
ul
>
tab1e>.row>.co1 →
<
table
>
<
tr
class
=
"row"
>
<
td
class
=
"col"
></
td
>
</
tr
>
</
table
>
|
1.3.9、组合结构单元()：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
div>(header>ul>li*2>a)+footer>p
<
div
>
<
header
>
<
ul
>
<
li
><
a
href
=
""
></
a
></
li
>
<
li
><
a
href
=
""
></
a
></
li
>
</
ul
>
</
header
>
<
footer
>
<
p
></
p
>
</
footer
>
</
div
>
|
1.3.10、输出多个元素
输出指定数目的元素E*num：
|
1
2
3
4
5
6
|
ul>li*3 →
<
ul
>
<
li
></
li
>
<
li
></
li
>
<
li
></
li
>
</
ul
>
|
输出带序号的多个元素E-$*num：
|
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
ul>1i.item$*3 →
<
ul
>
<
1i
class
=
"item1"
></
1i
>
<
1i
class
=
"item2"
></
1i
>
<
1i
class
=
"item3"
></
1i
>
</
ul
>
h$[tit1e=item$]{Header $}*3 →
<
h1
tit1e
=
"item1"
>Header 1</
h1
>
<
h2
tit1e
=
"item2"
>Header 2</
h2
>
<
h3
tit1e
=
"item3"
>Header 3</
h3
>
ul>li.item_$$$*3 →
<
ul
>
<
li
class
=
"item_001"
></
li
>
<
li
class
=
"item_002"
></
li
>
<
li
class
=
"item_003"
></
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
>
|
1.3.11、“Lorem Ipsum” 测试文本生成器
输入lorem或者lipsum展开即可得到一段30个单词的示例文本：
|
1
|
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam harum soluta vitae eaque delectus eligendi odit fugit magni molestiae dolorem.
|
你还可以加上指定的单词个数:
|
1
2
3
4
5
6
7
8
9
10
11
|
lorem5 →
Lorem ipsum dolor sit amet.
lorem100 →
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum vel error vitae qui cum voluptate eveniet recusandae perferendis consequatur sapiente iste similique beatae incidunt dignissimos quas. Nesciunt quibusdam nostrum officiis laborum adipisci tempore blanditiis tempora. Quam molestiae voluptatem deleniti veritatis minus neque magnam fugit sunt debitis velit reprehenderit error odit earum libero sed doloremque qui tenetur aliquid eos nemo laudantium aut magni unde eaque hic? Dolores et quos rem corrupti veniam incidunt beatae distinctio voluptates aliquam totam aspernatur consequuntur eaque odit nihil dicta debitis minima facilis maxime amet vitae ullam nostrum perferendis facere non aut quas laborum! Magnam expedita magni.
ul.generic-list>lorem10.item*4 → 输出多段
<
ul
class
=
"generic-list"
>
<
li
class
=
"item"
>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</
li
>
<
li
class
=
"item"
>Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</
li
>
<
li
class
=
"item"
>Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</
li
>
<
li
class
=
"item"
>Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</
li
>
</
ul
>
|
2、css的缩写规则
2.1常规缩写
|
1
2
3
4
5
|
m →
margin
: ;
p →
padding
: ;
td →
text-decoration
: ;
bg →
background
: ;
bd →
border
: ;
|
2.2带有字母属性值的
|
1
2
3
|
m:a →
margin
:
auto
;
bg:n →
background
:
none
;
td:u →
text-decoration
:
underline
;
|
2.3复合属性的拆分写法
|
1
2
3
4
5
6
|
mt → maring-
top
: ;
pl →
padding-left
: ;
bgi →
background-image
:
url
();
bgc →
background-color
:
#fff
;
bdl →
border-left
: ;
bdlc →
border-left-color
:
#000
;
|
2.4自定义属性值（Emmet新增）
除了以上css的缩写方式之外，Emmet还新增了自定义的写法，适用于有数字值的属性：
|
1
2
3
4
5
6
7
8
9
|
m
10
→
margin
:
10px
;
m
10
-20
→
margin
:
10px
20px
;
m
10
-20
-30
→
margin
:
10px
20px
30px
;
m
10
-20
-30
-40
→
margin
:
10px
20px
30px
40px
;
m
10
p →
margin
:
10%
; (百分比单位，可与数字格式混用)
m
0
-a →
margin
:
0
auto
;
负值写法：
m
-10
-20
-30
→
margin
:
-10px
20px
20px
;
m
-10
-
-20
-
-30
→
margin
:
-10px
-20px
-30px
;
|
二、缩写包含
选中一组文字，按下快捷键(默认是Ctrl+Shift+A)后在弹出的对话框里键入要嵌套的结构
篇幅限制，这里只显示了部分缩写用法，更多其他用法和信息请查阅官方文档。刚开始用的时候可能觉得记忆困难，其实这些缩写都很有规律的，组合使用，你会发现写代码也可以这么优雅快捷。
三、安装
Notepad++下Emmet安装方法：下载相应的插件包，解压缩后放入Notepad++的插件目录即可。
另外我们还可以根据自己的需要修改配置文件来添加自己的缩写结构和调整快捷键(都是以json格式设定的)：
添加自定义缩写结构：…\Notepad++\plugins\jN\includes\snippets.json
修改快捷键：…\Notepad++\plugins\jN\includes\keymap.json
Eclipse(Zend Studio)下安装：
操作：Help→ Install New Software→输入http://emmet.io/eclipse/updates/site.xml→按照提示即可。
Netbeans IDE下安装：
访问http://plugins.netbeans.org/plugin/48315/ 下载对应版本的插件（目前支持7.2,7.3，其他版本可以使用早期的zen coding）。
操作：工具→插件→已下载→添加插件，选择下载的插件安装即可。
老版本的Netbeans可以访问 http://plugins.netbeans.org/plugin/41792下载zen coding 插件，方法同上。
Dreamweaver下安装：
访问https://github.com/emmetio/dreamweaver下载插件，安装后，打开快捷键面板，复制一个副本，然后修改快捷键，遇到冲突的，请删除原有的然后再配置。
Emmet官方网站：http://docs.emmet.io/ 官方速查手册http://docs.emmet.io/cheat-sheet/
扫一扫
1832
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
