縮寫(xiě)語(yǔ)法
Emmet 使用類(lèi)似于 CSS 選擇器的語(yǔ)法描述元素在生成的文檔樹(shù)中的位置及其屬性迁沫。
元素
可以使用元素名（如 div 或者 p）來(lái)生成 HTML 標(biāo)簽担神。Emmet 沒(méi)有預(yù)定義的有效元素名的集合怕磨，可以把任何單詞當(dāng)作標(biāo)簽來(lái)生成和使用：div → <div></div>, foo → <foo></foo> 等。
嵌套運(yùn)算符
嵌套運(yùn)算符用于以縮寫(xiě)的方式安排元素在生成文檔樹(shù)中的位置：將其放在內(nèi)部或成為相鄰的元素置尔。
element >
可以使用 > 運(yùn)算符指定嵌套元素在另一個(gè)元素內(nèi)部：
div>ul>li
生成的結(jié)果為：
<div>
<ul>
<li></li>
</ul>
</div>
兄弟: +
使用 + 運(yùn)算符將相鄰的其它元素處理為同級(jí)：
div+p+bq
生成的結(jié)果為：
<div></div>
<p></p>
<blockquote></blockquote>
上升: ^
使用 > 運(yùn)算符將會(huì)降低所有后續(xù)所有元素在生成樹(shù)中的級(jí)別杠步，每一級(jí)的兄弟元素也被解析成相同深度的元素：
div+div>p>span+em
將生成：
<div></div>
<div>
<p><span></span><em></em></p>
</div>
使用 ^ 運(yùn)算符，能夠提升元素在生成樹(shù)中的一個(gè)級(jí)別榜轿，并同時(shí)影響其后的元素：
div+div>p>span+em^bq
將生成：
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
可以連續(xù)使用多個(gè) ^ 運(yùn)算符幽歼，每次提高一個(gè)級(jí)別：
div+div>p>span+em^^^bq
將生成：
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
重復(fù): *
使用 * 運(yùn)算符可以定義一組元素：
ul>li*5
將生成：
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
分組: ()
括號(hào)用于在復(fù)雜的 Emmet 縮寫(xiě)中處理一組子樹(shù)：
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 協(xié)同工作，可能想要對(duì)文檔片段分組：每個(gè)組包含一個(gè)子樹(shù)谬盐，所有的后續(xù)元素都插入到與組中第一個(gè)元素相同的級(jí)別中甸私。
能夠在組中嵌套組并且使用 * 運(yùn)算符綁定它們：
(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>
使用分組，可以使用單個(gè)縮寫(xiě)逐個(gè)寫(xiě)出整頁(yè)的標(biāo)簽飞傀，不過(guò)盡量不要這么做皇型。
屬性運(yùn)算符
屬性運(yùn)算符用于編輯所生成的元素的屬性，在 HTML 和 XML 中可以快速地為生成元素添加 class 屬性砸烦。
ID 和 CLASS
在 CSS 中弃鸦，可以使用 elem#id 和 elem.class 注解來(lái)達(dá)到為元素指定 id 或 class 屬性的目的。在 Emmet 中幢痘，可以使用幾乎相同的語(yǔ)法來(lái)為指定的元素添加這些屬性：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 中一樣）來(lái)為元素添加自定義屬性：
td[title="Hello world!" colspan=3]
將生成：
<td title="Hello world!" colspan="3"></td>
能夠在方括號(hào)中放置許多屬性唬格，
可以不為屬性指定值： td[colspan title] 將生成 <td colspan="" title=""> ，如果你的編輯器支持颜说，可以使用 tab 來(lái)跳到每個(gè)空屬性中填寫(xiě)购岗。
屬性可以用單引號(hào)或雙引號(hào)作為定界符。
如果屬性不包含空格门粪，不需要用定界符括住它：td[title=hello colspan=3] 是正確的喊积。
編號(hào): $
使用 * 運(yùn)算符可以重復(fù)生成元素，如果帶 $ 就可以為它們編號(hào)玄妈。把 $ 放在元素名乾吻、屬性名或者屬性值中，將為每個(gè)元素生成正確的編號(hào)：
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>
使用多 $ 可以填充前導(dǎo)的零：
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>
改變編號(hào)的基數(shù)和方向
使用 @ 措近，可以改變數(shù)字的走向（升序或降序）和基數(shù)（例如起始值）溶弟。
在 $ 后添加 @- 來(lái)改變數(shù)字走向：
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 改變編號(hào)的基數(shù)：
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>
這些附加的運(yùn)算符可以同時(shí)使用：
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>
文本: {}
可以用花括號(hào)向元素中添加文本：
a{Click me}
將生成：
<a href="">Click me</a>
注意，這個(gè) {text} 是被當(dāng)成獨(dú)立元素解析的（類(lèi)似于 div, p ）瞭郑，但當(dāng)其跟在其它元素后面時(shí)則有所不同辜御。例如， a{click} 和 a>{click} 產(chǎn)生相同的輸出屈张，但是 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/> 元素的里面袱巨。差別如下：當(dāng) {text} 寫(xiě)在元素的后面，它不影響父元素的上下文碳抄。下面是展示這種差別的重要性的較復(fù)雜的例子：
p>{Click }+a{here}+{ to continue}
生成：
<p>Click <a href="">here</a> to continue</p>
在這個(gè)例子里愉老， 我們用 > 運(yùn)算符明確的將 Click here to continue 下移一級(jí)，放在 <p> 元素內(nèi)剖效，但對(duì)于 a 元素的內(nèi)容就不需要了嫉入，因?yàn)?<a/> 僅有 here 這一部分內(nèi)容，它不改變父元素的上下文璧尸。
作為比較咒林，下面是不帶有 > 運(yùn)算符的相同縮寫(xiě)：
p{Click }+a{here}+{ to continue}
生成：
<p>Click </p>
<a href="">here</a> to continue
縮寫(xiě)格式的注意事項(xiàng)
當(dāng)熟悉了 Emmet 的縮寫(xiě)語(yǔ)法后，可能會(huì)想要使用一些格式來(lái)生成更可讀的縮寫(xiě)爷光。例如垫竞，在元素和運(yùn)算符之間使用空格間隔：
(header > ul.nav > li*5) + footer
但是這種寫(xiě)法是錯(cuò)誤的，因?yàn)榭崭袷?Emmet 停止縮寫(xiě)解析的標(biāo)識(shí)符蛀序。
請(qǐng)多用戶(hù)誤以為每個(gè)縮寫(xiě)都應(yīng)寫(xiě)在新行上欢瞪，但是他們錯(cuò)了：可以在文本的任意位置鍵入和擴(kuò)展縮寫(xiě)。
縮寫(xiě)不是模板語(yǔ)言徐裸，它們不需要”易讀“遣鼓，它們必須”可快速擴(kuò)展和移動(dòng)“。
不需要寫(xiě)復(fù)雜的縮寫(xiě)倦逐。不要認(rèn)為在 web 編程中”鍵入“是最慢的運(yùn)算譬正。想快速找出構(gòu)建單個(gè)的復(fù)雜縮寫(xiě)比構(gòu)造和鍵入一些較短較簡(jiǎn)單的縮寫(xiě)更慢宫补。
