emment插件语法.md
元素
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^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>
分组: ()
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>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>
ID 和 CLASS
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=”“>编号: $
使用 * 运算符可以重复生成元素，如果带 $ 就可以为它们编号。把 $ 放在元素名、属性名或者属性值中，将为每个元素生成正确的编号：
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缩写格式的注意事项
当熟悉了 Emmet 的缩写语法后，可能会想要使用一些格式来生成更可读的缩写。例如，在元素和运算符之间使用空格间隔：
(header > ul.nav > li*5) + footer
但是这种写法是错误的，因为空格是 Emmet 停止缩写解析的标识符。
请多用户误以为每个缩写都应写在新行上，但是他们错了：可以在文本的任意位置键入和扩展缩写。