缩写语法
Emmet使用类似于CSS选择器的语法来描述生成的树和元素属性内的元素的位置。
！ html 5
html:xt html 4过渡
分子
您可以使用元素的名字，如div或p以生成 HTML标签。Emmet没有一组可用的标签名称，您可以写任何单词并将其转换为标签：div→ <div></div>，foo→ <foo></foo>等等。
嵌套操作员
嵌套操作符用于将缩写元素放在生成的树中：是否应放置在上下文元素的内部或附近。
儿童： >
您可以使用>操作符将元素嵌套在彼此中：
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属性到生成的元素。
ID和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="">在每个空属性（如果您的编辑器支持它）中使用tabstops 生成。
您可以使用单引号或双引号引用属性值。
如果不包含空格，则不需要引用值：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>元素，我们已经明确地使用>运算符向下移动树p，但是在a元素的情况下，我们不需要，因为我们只需要单词的<a>元素here，而不改变父上下文。
为了比较，这里是没有子>操作符的相同的缩写：
p{Click }+a{here}+{ to continue}
...产生
<p>Click </p><a href="">here</a> to continue
