HTML縮寫
Emmet使用類似於CSS選擇器的語法來描述元素在生成的樹中的位置和元素的屬性。
元素
- 您可以使用元素的名字，如div或p以生成 HTML標簽。
- Emmet沒有一組預定義的可用標簽名稱，您可以編寫任何單詞並將其轉換為標簽：div→
，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^bq
<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
可以根據需要使用任意多個^運算符，每個運算符將上移一個級別：
乘法 *
使用*運算符，您可以定義元素應輸出多少次：
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>
如果您正在使用瀏覽器的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[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>
在第二個示例中，元素放置在元素內部。那就是區別：當{text}在元素之后立即編寫時，它不會更改父上下文。這是一個更復雜的示例，顯示了為什么它很重要：
p>{Click }+a{here}+{ to continue}
<p>Click <a href="">here</a> to continue</p>
在此示例中，要寫入Click here to continue內部
元素，我們必須使用>運算符after 顯式地將其移至樹下p，但是對於a元素而言，則不必這樣做，因為我們只需要帶有here單詞的元素，而無需更改父上下文。
為了進行比較，這是不帶子>運算符的相同縮寫：
p{Click }+a{here}+{ to continue}
<p>Click </p>
<a href="">here</a> to continue
隱式生成的標簽
span>.item
<span><span class="item"></span></span>
ul>.item
<ul>
<li class="item"></li>
</ul>
縮寫注意事項
- 運算符左右不要使用空格
“Lorem Ipsum” 構造器
- 您可以在縮寫中指定應生成多少個單詞。例如，lorem100將生成一個100字的偽文本。
- 您可以lorem在重復元素內使用生成器來創建填充有完全隨機句子的標簽。例如，p*4>lorem縮寫將生成如下內容：
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!</p>
<p>Ad dolore dignissimos asperiores dicta facere optio quod commodi nam tempore recusandae. Rerum sed nulla eum vero expedita ex delectus voluptates rem at neque quos facere sequi unde optio aliquam!</p>
<p>Tenetur quod quidem in voluptatem corporis dolorum dicta sit pariatur porro quaerat autem ipsam odit quam beatae tempora quibusdam illum! Modi velit odio nam nulla unde amet odit pariatur at!</p>
<p>Consequatur rerum amet fuga expedita sunt et tempora saepe? Iusto nihil explicabo perferendis quos provident delectus ducimus necessitatibus reiciendis optio tempora unde earum doloremque commodi laudantium ad nulla vel odio?</p>
- 當元素是自重復元素時，lorem生成器會使用隱式標簽名稱解析器，lorem因此您可以縮短縮寫：
ul.generic-list>lorem10.item*4+
<ul class="generic-list">
<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
<li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
<li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
<li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>