Emmet使用类似于CSS选择器的语法来描述元素在生成的树中的位置和元素的属性。
您可以使用元素的名字，如div或p以生成 HTML标签。Emmet没有一组预定义的可用标签名称，您可以编写任何单词并将其转换为标签：div→ <div></div>，foo→ <foo></foo>等。
嵌套运算符用于将缩写元素放置在生成的树内：是否将其放置在context元素内或附近。
>您可以使用>运算符将元素相互嵌套：
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></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和elem.class表示法来访问具有指定id或class属性的元素。在Emmet中，可以使用完全相同的语法将这些属性添加到指定的元素：
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]会<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>您可以$连续使用多个以零填充数字：
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>元素，我们必须使用>运算符after 显式地将其移至树下p，但是对于a元素而言，则不必这样做，因为我们只需要<a>带有here单词的元素，而无需更改父上下文。
为了进行比较，这是不带子>运算符的相同缩写：
p{Click }+a{here}+{ to continue}...产生
<p>Click </p><a href="">here</a> to continue当您熟悉Emmet的缩写语法时，您可能希望使用某种格式来使您的缩写更具可读性。例如，在元素和运算符之间使用空格，如下所示：
(header > ul.nav > li*5) + footer但这是行不通的，因为空格是Emmet停止缩写解析的停止符号。
许多用户错误地认为，每个缩写都应该用新行写成，但是他们是错误的：您可以在文本的任何位置键入和扩展缩写：
这就是为什么Emmet需要一些指示符（例如空格），在该指示符处应停止解析以不扩展不需要的内容。如果您仍认为复杂的缩写需要这种格式，以使其更具可读性：
缩写不是模板语言，它们不必“可读”，而必须“可快速扩展和删除”。
您实际上不需要编写复杂的缩写。不要再认为“键入”是Web开发中最慢的过程。您会很快发现，构造一个复杂的缩写比构造和键入一些简短的缩写要慢得多并且容易出错。
联系客服
