Emmet 语法
空格是 Emmet 停止缩写解析的标识符。
HTML 缩写
元素
使用元素名生成 HTML 标签，Emmet 没有预定义的有效元素名的集合，可以将任何单词当做标签来生成和使用。
嵌套运算符
嵌套运算符用于以缩写的方式安排元素在生成文档树中的位置：将其放在内部或成为相邻的元素。
子：>
可以使用>运算徐符指定嵌套元素在另一个元素内部。
<!-- 简写 -->
div>ul>li
<!-- 生成 -->
<div>
<ul>
<li></li>
</ul>
</div>
兄弟：+
使用+运算符将相邻其他元素作为同级
<!-- 简写 -->
div+p+bq
<!-- 生成 -->
<div></div>
<p></p>
<blockquote></blockquote>
上升：^
<!-- 使用 > 运算符将会降低所有后续所有元素在生成树中的级别，每一级的兄弟元素也被解析成相同深度的元素： -->
<!-- >运算符 -->
<!-- 简写 -->
div+div>p>span+em
<!-- 生成 -->
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<!-- 使用 ^ 运算符，能够提升元素在生成树中的一个级别，并同时影响其后的元素： -->
<!-- ^运算符 -->
<!-- 简写 -->
div+div>p>span+em^bq
<!-- 生成 -->
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
<!-- 可以连续使用多个 ^ 运算符，每次提高一个级别： -->
<!-- 简写 -->
div+div>p>span+em^^^bq
<!-- 生成 -->
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
重复：*
<!-- 使用 * 运算符可以定义一组元素： -->
<!-- 简写 -->
ul>li*5
<!-- 生成 -->
ul>li*5
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
分组：（）
<!-- 括号用于在复杂的 Emmet 缩写中处理一组子树： -->
<!-- 简写 -->
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>
<!-- 如果想与浏览器 DOM 协同工作，可能想要对文档片段分组：每个组包含一个子树，所有的后续元素都插入到与组中第一个元素相同的级别中。
能够在组中嵌套组并且使用 * 运算符绑定它们： -->
<!-- 简写 -->
(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>
<!-- 使用分组，可以使用单个缩写逐个写出整页的标签，不过尽量不要这么做。 -->
编号：$
使用 * 运算符可以重复生成元素，如果带 $ 就可以为它们编号。把 $ 放在元素名、属性名或者属性值中，将为每个元素生成正确的编号：
<!-- 简写 -->
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>
<!-- 使用多 $ 可以填充前导的零： -->
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
<ul>
<li class="item7"></li>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
</ul>
文本：{}
可以用花括号向元素中添加文本：
a{Click me}
<!-- 将生成： -->
<a href="">Click me</a>
<!-- 注意，这个 {text} 是被当成独立元素解析的（类似于 div, p ），但当其跟在其它元素后面时则有所不同。例如， a{click} 和 a>{click} 产生相同的输出，但是 a{click}+b{here} 和 a>{click}+b{here} 的输出就不同了： -->
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
<!-- 在第二示例中， <b> 元素放在了 <a> 元素的里面。差别如下：当 {text} 写在元素的后面，它不影响父元素的上下文。下面是展示这种差别的重要性的较复杂的例子： -->
p>{Click }+a{here}+{ to continue}
<!-- 生成： -->
<p>Click <a href="">here</a> to continue</p>
<!-- 在这个例子里， 我们用 > 运算符明确的将 Click here to continue 下移一级，放在 <p> 元素内，但对于 a 元素的内容就不需要了，因为 <a> 仅有 here 这一部分内容，它不改变父元素的上下文。
作为比较，下面是不带有 > 运算符的相同缩写： -->
p{Click }+a{here}+{ to continue}
<!-- 生成： -->
<p>Click</p>
<a href="">here</a> to continue
其他
<!-- 隐式标签 -->
<!-- 缩写：.class -->
<div class="class"></div>
<!-- 缩写：em>.class -->
<em><span class="class"></span></em>
<!-- 缩写：ul>.class -->
<ul>
<li class="class"></li>
</ul>
<!-- 缩写：table>.row>.col -->
<table>
<tr class="row">
<td class="col"></td>
</tr>
</table>
<!-- HTML所有未知的缩写都会转换成标签，例如，foo → <foo></foo> -->
<!-- 缩写：! -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body></body>
</html>
<!-- 缩写：a -->
<a href=""></a>
<!-- 缩写：a:link -->
<a href="http://"></a>
<!-- 缩写：a:mail -->
<a href="mailto:"></a>
<!-- 缩写：abbr -->
<abbr title=""></abbr>
<!-- 缩写：acronym -->
<acronym title=""></acronym>
<!-- 缩写：base -->
&l
属性运算符
属性运算符用于编辑所生成的元素的属性，在 HTML 和 XML 中可以快速地为生成元素添加 class 属性。
ID 和 CLASS
在 CSS 中，可以使用 elem#id 和 elem.class 注解来达到为元素指定 id 或 class 属性的目的。在 Emmet 中，可以使用几乎相同的语法来为指定的元素添加这些属性：element:
<!-- 简写 -->
div#header+div.page+div#footer.class1.class2.class3
<!-- 生成 -->
<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>
自定义属性
可以使用 [attr] 注解（就像在 CSS 中一样）来为元素添加自定义属性：
<!-- 简写 -->
td[title="Hello world!" colspan=3]
<!-- 生成 -->
<td title="Hello world!" colspan="3"></td>
- 能够在方括号中放置许多属性，
- 可以不为属性指定值： td[colspan title] 将生成 ，如果你的编辑器支持，可以使用 tab 来跳到每个空属性中填写。
- 属性可以用单引号或双引号作为定界符。
- 如果属性不包含空格，不需要用定界符括住它：td[title=hello colspan=3] 是正确的。
css 缩写
- 1 值：
w100 =>100px;
h10p+m5e =>height:10%;margin:5em
单位别名列表：p => %;e =>em;x =>ex - 2 附加属性：
/* @f，可以生成： Css 代码 */
@font-face {
font-family: ;
src: url();
}
/* 一些其他的属性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等额外的选项，可以通过“+ ”符号来生成，比如输入@f+，将生成：Css代码 */
@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;
}
-
3 模糊匹配
如果有些缩写你拿不准，Emmet 会根据你的输入内容匹配最接近的语法，比如输入 ov:h、ov-h、ovh 和 oh，生成的代码是相同的：Css 代码overflow: hidden; -
4 针对不同编辑器的插件
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