HTML/CSS速写神器Emmet

在前端开发的过程中，一个最繁琐的工作就是写HTML、CSS代码。数量繁多的标签、属性、尖括号、标签闭合等，让前端们甚是苦恼。于是，我向大家推荐Emmet，它提供了一套非常简单的语法规则，书写起来非常爽快，然后只需要敲一个快捷键就立刻生成对应HTML或CSS代码，极大提高了代码书写效率。
Emmet的前身是大名鼎鼎的Zen coding，它是一个编辑器插件，需要基于指定的编辑器使用，官方网站提供多编辑器支持，目前它支持的编辑器如下：

Sublime Text
Eclipse/Aptana
TextMate
Coda
Espresso
Chocolat
Komodo Edit
Notepad++
PSPad
textarea
CodeMirror
Brackets
NetBeans
Adobe Dreamweaver
请参照上面列表安装对应的编辑器插件，我一般使用Sublime Text 3，下面就以Sublime Text 3为例，讲解Emmet的安装、基础语法。

在Sublime text 3中安装Emmet

目前，Emmet已经可以通过Package Control安装了。如果你的Sublime Text 3还没有安装Package Control，请参照以下方法安装，已经安装的童鞋请自行跳过。

为Sublime Text 3安装Package Control组件：
1.按Ctrl + `打开控制台，粘贴以下代码到底部命令行并回车：

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp =   sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

1.重启Sublime Text 3
2.在Perferences->Package Settings中看到Package Control，则表示安装成功

使用Package Control安装Emmet插件：
1.在Package Control中选择Install package或者按Ctrl+Shift+P，打开命令板
2.输入pci然后选择Install Package
3.搜索输入emmet找到Emmet Css Snippets，点击就可以自动完成安装。

快速体验Emmet

Emmet可以快速的编写HTML、CSS以及实现其他的功能。它根据当前文件的解析模式来判断要使用HTML语法还是CSS语法来解析。例如当前文件的后缀为.html，那么Sublime text 3就会用HTML的解析模式来解析高亮这个文件，Emmet遇到里面的指令就会根据HTML的语法把它编译成HTML结构。如果是在一个.c的C语言文件中，你写出来的用于编译HTML指令就不会被Emmet识别编译。
此外，在没有后缀的文件中，你可以按下shift+ctrl+p呼出面板，输入seth就可以设置当前文件的解析模式为HTML。了解这些之后，下面我们来见证强大的Emmet。
如果让你编写下面的这个HTML结构，你需要多长时间？

<div id="page"><div class="logo"></div><ul id="navigation"><li><a href="">Item 1</a></li><li><a href="">Item 2</a></li><li><a href="">Item 3</a></li><li><a href="">Item 4</a></li><li><a href="">Item 5</a></li></ul>
</div>

然而，这一切你只需要编写下面这一句按照Emmet语法写出来的语句，然后用Emmet编译一下，就可以生成了！

#page>div.logo+ul#navigation>li*5>a{Item $}

我们把它复制到Sublime text 3中已经打开的HTML文件中，这时候紧跟着敲击一下TAB键，见证奇迹的时刻到来了。
怎么样？很神奇吧，仅仅写一行代码，就可以生成这么一个复杂的HTML结构，而且还可以生成对应的class、id和有序号的内容。而且Emmet的语法很简单，虽然你现在可能还看不懂，后面的系列教程会详细讲解它的语法，你现在只需要知道Emmet的工作流程：

打开HTML或CSS文件->按语法编写指令->按下TAB键->生成

快速编写HTML代码

生成HTML文档初始结构
HTML文档需要包含一些固定的标签，比如doctype、html、head、body以及meta等等，现在你只需要1秒钟就可以输入这些标签。比如输入！或html:5，然后按Tab键：

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

这就是一个HTML5的标准结构，也是默认的HTML结构。如果你想生成HTML4的过渡型结构，那么输入指令html:xt即可生成如下结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title>
</head>
<body></body>
</html>

Emmet会自动把doctype给你补全了，怎么样，这样的功能会不会让你动心？
简单总结一下常用的HTML结构指令：

html:5或者!生成HTML5结构
html:xt生成HTML4过渡型
html:4s生成HTML4严格型

生成带有id、class的THML标签
Emmet默认的标签为div，如果我们不给出标签名称的话，默认就生成div标签。生成id为page的div标签，我们只需要编写下面指令：

div#page

或者使用默认标签的方式：

#page

如果编写一个class为content的p标签，我们需要编写下面指令：

p.content

同时指定标签的id和class，如生成id为navigation，class为nav的ul标签：

ul#navigation.nav

指定多个class，如上例中还需要给ul指定一个class为dropdown：

ul#navigation.nav.dropdown

生成HTML结构如下：

<ul id="navigation" class="nav dropdown"></ul>

兄弟：+

生成标签的兄弟标签，即平级元素，使用指令+，例如下面指令：

div+ul+bq

生成的HTML结构如下：

    <div></div><ul></ul><blockquote></blockquote>

后代：>

表示后面要生成的内容是当前标签的后代。例如我要生成一个无序列表，而且被class为nav的div包裹，那么可以使用下面的指令：

div.nav>ul>li

生成的HTML结构如下：

<div class="nav"><ul><li></li></ul>
</div>

上级元素:^

上级（Climb-up）元素是什么意思呢？前面咱们说过了生成下级元素的符号“>”，当使用div>ul>li的指令之后，再继续写下去，那么后续内容都是在li下级的。如果我想编写一个跟ul平级的span标签，那么我需要先用“^”提升一个层次。例如：

div.nav>ul>li^span

就会生成如下结构：

<div class="nav"><ul><li></li></ul><span></span>
</div>

如果我想相对于div生成一个平级元素，那么就再上升一个层次，多用一个“^”符号：

div.nav>ul>li^^span

结果如下：

<div class="nav"><ul><li></li></ul>
</div>
<span></span>

重复多份：*

特别是一个无序列表，ul下面的li肯定不只是一份，通常要生成很多个li标签。那么我们可以直接在li后面*上一些数字：

ul>li*5

这样就直接生成五个项目的无序列表了。如果想要生成多份其他结构，方法类似。

分组：()

用括号进行分组，表示一个代码块，分组内部的嵌套和层级关系和分组外部无关，例如：

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>

可以看出整个分组成为div的后代，并且分组与footer平级。此外，分组还可以很方便的结合上面说的“*”符号生成重复结构：

(div>dl>(dt+dd)*3)+footer>p

生成结构如下：

<div><dl><dt></dt><dd></dd><dt></dt><dd></dd><dt></dt><dd></dd></dl>
</div>
<footer><p></p>
</footer>

属性:[attr]

a标签中往往需要附带href属性和title属性，如果我们想生成一个href为“http://bubkoo.com”，title为“bubkoo’s blog”的a标签，可以这样写：

a[href="http://bubkoo.com" title="bubkoo's blog"]

此外，也可以生成一些自定义属性：

div[data-title="bubkoo's blog" data-content="CUCKOO USHERS SPRING IN"]

就会生成：

<div data-title="bubkoo's blog" data-content="CUCKOO USHERS SPRING IN"></div>

编号：$

例如无序列表，我想为五个li增加一个class属性值item1，然后依次递增1-5，那么就需要使用$符号：

ul>li.item$*5

结构是：

<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li>
</ul>

$表示一位数字，只出现一个的话，就从1开始，如果出现多个，就从0开始。如果我想生成三位数的序号，那么要写三个$ ：

ul>li.item$$$*5

输出：

<ul><li class="item001"></li><li class="item002"></li><li class="item003"></li><li class="item004"></li><li class="item005"></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>

同时，还可以使用@N指定开始的序号：

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

就可以生成以3为底倒序列表：

<ul><li class="item7"></li><li class="item6"></li><li class="item5"></li><li class="item4"></li><li class="item3"></li>
</ul>

文本内容：{}

生成超链接一般要加上可点击的文本内容，如上面的连接：

a[href="http://bubkoo.com" title="bubkoo's blog"]{猛击这里}

就会生成

<a href="http://bubkoo.com" title="bubkoo's blog">猛击这里</a>

另外，在生成内容的时候，特别要注意前后的符号关系，虽然a>{Click me}和a{Click me}生成的结构是相同的，但是加上其他的内容就不一定了，例如：

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b><!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

隐式标签

隐式标签表示Emmet可以省略某些标签名，例如，表明一个带类的div，只需输入.item，就会生成

。另外，Emmet还会根据父标签进行判定，例如，输入ul>.item$*5，就可以生成：

<ul><li class="item1"></li><li class="item2"></li><li class="item3"></li><li class="item4"></li><li class="item5"></li>
</ul>

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

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

不要有空格

在写指令的时候，你可能为了代码的可读性，使用一些空格什么的排版一下。这就会导致代码无法使用。例如下面这句：

<!-- a{click}+b{here} -->
(header > ul.nav > li*5) + footer

执行结果会不是你所希望的那样，所以，指令之间不要有空格。

HTML简写规则简单总结

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的上级元素。

飞一般的CSS书写

首先，Sublime Text 3已经提供了比较强大的CSS样式缩写方法来提高CSS编写效率。例如编写position: absolute;这一属性，我们只需要输入posa这四个字母即可。可以在平时书写过程中，留意一下ST3提供了哪些属性的缩写方法，这样就可以提高一定的效率了。但是Emmet提供了更多的功能，请往下看。

简写属性和属性值

比如要定义元素的宽度，只需输入w100，即可生成：

width: 100px;

Emmet的默认设置w是width的缩写，后面紧跟的数字就是属性值。默认的属性值单位是px，你可以在值的后面紧跟字符生成单位，可以是任意字符。例如，w100foo会生成：

width: 100foo;

同样也可以简写属性单位，如果你紧跟属性值后面的字符是p，那么将会生成：

width: 100%;

下面是单位别名列表：

p表示%
e表示em
x表示ex
像margin这样的属性，可能并不是一个属性值，生成多个属性值需要用横杠（-）连接两个属性值，因为Emmet的指令中是不允许空格的。例如使用m10-20可以生成：

margin: 10px 20px;

如果你想生成负值，多加一条横杠即可。例如：m10–20可以生成：

margin: 10px -20px;

需要注意的是，如果你对每个属性都指定了单位，那么不需要使用横杠分割。例如使用m10e20e可以生成：

margin: 10em 20em;

如果使用了横杠分割，那么属性值就变成负值了。例如使用m10e-20e就生成：

margin: 10em -20em;

如果你想一次生成多条语句，可以使用“+”连接两条语句，例如使用h10p+m5e可以生成：

height: 10%;
margin: 5em;

颜色值也是可以快速生成的，例如c#3生成color: #333;，更复杂一点的，使用bd5#0s可以生成border: 5px #000 solid;。
下面是颜色值生成规则：

‘#1’ -> #111111
‘#e0’ -> #e0e0e0
‘#fc0’ -> #ffcc00
生成!important这条语句也当然很简单，只需要一个“！”就可以了。

附加属性

使用@f即可生成CSS3中的font-face的代码结构：

@font-face {font-family:;src:url();
}

但是这个结构太简单，不包含一些其他的font-face的属性，诸如background-image、border-radius、font、@font-face、text-outline、text-shadow等属性，我们可以在生成的时候输入“+”生成增强的结构，例如我们可以输入@f+命令，即可输出选项增强版的font-face结构：

@font-face {font-family:'FontName';src:url('FileName.eot');src:url('FileName.eot?#iefix') format('embedded-opentype'),url('FileName.woff') format('woff'),url('FileName.ttf') format('truetype'),url('FileName.svg#FontName') format('svg');font-style:normal;font-weight:normal;
}

模糊匹配

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

overflow: hidden;

供应商前缀

CSS3等现在还没有出正式的W3C规范，但是很多浏览器已经实现了对应的功能，仅作为测试使用，所以在属性前面加上自己独特的供应商前缀，不同的浏览器只会识别带有规定前缀的样式。然而为了实现兼容性，我们不得不编写大量的冗余代码，而且要加上对应的前缀。使用Emmet可以快速生成带有前缀的CSS3属性。
在任意字符前面加上一条横杠（-），即可生成该属性的前缀代码，例如输入-foo-css，会生成：

-webkit-foo-css: ;
-moz-foo-css: ;
-ms-foo-css: ;
-o-foo-css: ;
foo-css: ;

虽然foo-css并不是什么属性，但是照样可以生成。此外，你还可以详细地控制具体生成哪几个浏览器前缀或者先后顺序，使用-wm-trf即可生成：

-webkit-transform: ;
-moz-transform: ;
transform: ;

可想而知，w就是webkit前缀的缩写，m是moz前缀缩写，s是ms前缀缩写，o就是opera浏览器前缀的缩写。如果使用-osmw-abc即可生成：

-o-abc: ;-ms-abc: ;-moz-abc: ;-webkit-abc: ;abc: ;

渐变背景

CSS3中新增加了一条属性linear-gradient使用这个属性可以直接制作出渐变的效果。但是这个属性的参数比较复杂，而且需要添加实验性前缀，无疑需要生成大量代码。而在Emmet中使用lg()指令即可快速生成，例如：使用lg(left, #fff 50%, #000)可以直接生成：

background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(to right, #fff 50%, #000);

附加功能

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem harum accusamus placeat nam quisquam eaque quod, assumenda cupiditate praesentium voluptas culpa, corrupti voluptatum, fuga deserunt doloremque. Alias nulla possimus ipsa!

定制

你还可以定制Emmet插件：

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

快捷键

Ctrl+，展开缩写
Ctrl+M，匹配对
Ctrl+H，使用缩写包括
Shift+Ctrl+M，合并行
Ctrl+Shift+?，上一个编辑点
Ctrl+Shift+?，下一个编辑点
Ctrl+Shift+?，定位匹配对

最后

Emmet的官方API列表在这里，有一个图片版本可以【点此下载】