Emmet使用类似于CSS选择器的语法来描述元素在生成树中的位置和元素的属性。
您可以使用元素的名称 (如div或p) 来生成HTML标记。Emmet 没有一组预定义的标记名称，您可以编写任何单词并将其转换为一个标签：div → <div></div>，foo → <foo></foo> 等等。
嵌套操作符用于在生成的树中定位缩写元素：它应该放在上下文元素内部还是附近。
可以使用 > 操作符在彼此内部嵌套元素，例如：
div>ul>li
将在 div 元素下面生成 ul 元素，ul 元素下面生成 li 元素。生成代码如下：
<div> <ul> <li></li> </ul> </div>
使用 + 运算符将元素放在一起，将元素放在同一层。例如：
div+p+bq
将div、p、bq三个元素生成在同一层次。生成代码如下：
<div></div> <p></p> <blockquote></blockquote>
使用 > 操作符，您将沿着生成的树向下移动，所有兄弟元素的位置将针对最深的元素进行解析。此时，你可以使用 ^ 操作符向上提升某个元素在树种的层次。例如：
div+div>p>span+em
上面讲在 div 下面生成 p，p下面生成 span 和 em 元素。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
表示li元素将被重复输出5次。生成代码如下：
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
Emmets的高级用户使用圆括号对复杂缩写中的子树进行分组。例如：
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>
属性运算符用于修改输出元素的属性。例如，在HTML和XML中，您可以快速地向生成的元素添加 class 属性。
在CSS中，使用 elem#id 和 element.class 符号来访问具有指定 id 或 class 属性的元素。在Emmet中，您可以使用相同的语法将这些属性添加到指定的元素：
div#header+div.page+div#footer.class1.class2.class3
上面为div指定了多个class，分别为：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] 将生成 <td colspan="" title="">
可以使用单引号或双引号来引用属性值
如果不包含空格，则不需要引用值：td[title=hello colspan=3] 将正常工作
使用乘法*运算符可以重复元素，但是有了$，你可以给它们编号。将$运算符放入元素名称、属性名称或属性值中，输出当前重复元素的数量。例如：
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>
您可以在一行中使用多个$来填充带有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
生成代码如下：
<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等)使用和解析的，但是在元素后面写的时候有特殊的含义。例如，一个 {click} 和一个 >{click} 将产生相同的输出，但是一个 {click}+b{here} 和一个 >{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 写入到 <p> 元素中，我们已经显式地使用 > 操作符在p之后沿树向下移动，但是对于<a>元素，我们不必这样做，因为我们需要元素包含文本。
为了便于比较，下面是不使用子 > 运算符的相同缩写：
p{Click }+a{here}+{ to continue}生成的代码如下：
<p>Click </p> <a href="">here</a> to continue
当您熟悉Emmet的缩写语法时，您可能希望使用一些格式来使缩写更易于阅读。例如，在元素和操作符之间使用空格，如下所示：
(header> ul.nav > li*5) + footer
但这行不通，因为空格是一个stop符号，Emmet在这里停止缩写解析。
许多用户错误地认为每个缩写都应该写在一行；但他们错了，你可以在文本的任何地方输入和展开缩写。
川公网安备51010802032098
