標籤：檔案路徑 注意 引號 span 12px 其他 page div mon
一、簡寫文法
Emmet 用和 CSS 選取器相似的文法來描述元素的嵌套層級關係和屬性，實現 HTML/XML/CSS 等代碼的智能自動補全。
其通過檔案名稱尾碼識別檔案類型，從而使用對應的自動補全文法。預設自動補全快速鍵為定位字元（Tab）。
下文中的“自動補全”均指“按下快速鍵後自動補全”。
注意：Emmet 文法中的空格表示結束解析，所以書寫語句中不能出現空格。
1、元素
在編輯器中輸入元素名稱，即可自動補全產生 HTML 標籤，即使不是標準的 HTML 標籤。
// before
div
foo
// after
<div></div>
<foo></foo>
輸入 ! 或者 html:5 可以自動補全為 HTML5 基本結構。想要輸出 HTML4 文本類型申明可以輸入 html:4s 或者 html:4t 。
// before! (或html:5)// after<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body></html>
2、嵌套操作
1）child：使用 “>” 產生子項目
// beforediv>ul>li// after<div> <ul> <li></li> </ul></div>
2) Sibling: 使用符號 “+” 產生兄弟元素
// beforediv+p+bq// after<div></div><p></p><blockquote></blockquote>
3) Climb-up:使用 “^” 產生父元素，與 “>” 相反
// beforediv+div>p>span+em^bq// after<div></div><div> <p><span></span><em></em></p> <blockquote></blockquote></div>
你甚至可以使用多個 “^”。
// beforediv+div>p>span+em^^^bq
// after<div></div><div> <p><span></span><em></em></p></div><blockquote></blockquote>
4) Multiplication:使用 “*” 操作符產生多個元素
// beforediv>ul>li*5// after<div> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul></div>
5) Grouping:使用 “()” 操作符將元素分組，實現更複雜的簡寫任務
// before
// "+" 後面的元素與括弧中的第一個元素屬於兄弟關係div>(header>ul>li*2)+footer>p//after<div> <header> <ul> <li></li> <li></li> </ul> </header> <footer> <p></p> </footer></div>
3. 屬性操作
在簡寫時就可以為元素設定屬性。
1) id 與 class
簡寫時，元素與 id 屬性值之間用 “#” 分隔，與 class 屬性值之間用 “.” 分隔。
// beforediv#header+div.page+div#footer.class1.class2.class3// after<div id="header"></div><div class="page"></div><div id="footer" class="class1 class2 class3"></div>
2) 其他屬性
使用 [attr] 標記添加其他屬性。
// beforetd[title=‘hello‘ colspan=3]// after<td title="hello" colspan="3"></td>
注意：
不給定屬性值，則屬性值為""。td[colspan title]將得到 <td colspan="" title=""></td>3) 為條目編號
使用 “*” 符號產生的多個元素，可用 “$” 操作符實現從1到 N 自動編號。
// beforeli.item$*3// after<li class="item1"></li><li class="item2"></li><li class="item3"></li>
可在 “$” 後添加 “@n” 修改編號的起始值為n。
// before[email protected]*3// after<li class="item3"></li><li class="item4"></li><li class="item5"></li>
可在 “$” 後添加 “@-” 修改編號的方向。
// before[email protected]*3// after<li class="item5"></li><li class="item4"></li><li class="item3"></li>
4. 添加文本
使用花括弧 “{}” 操作符為元素添加文本節點。
// beforea[href=me.htm]{click me}// after<a href="me.htm">click me</a>
因為文本也是節點，所以 a[href=me.htm]{click me} 與 a[href=me.htm]>{click me} 等價。
但有多個元素時則要注意。
// beforea[href=me.htm]{click me}+p{ok}a[href=me.htm]>{click me}+p{ok}// after<a href="me.htm">click me</a><p>ok</p><a href="me.htm">click me <p>ok</p></a>
Emmet 的簡寫方式在 snippets.json 中定義，更多使用方式可通過查看該檔案瞭解。
對於 visual studio code 編輯器來說，該檔案路徑為： [安裝根目錄]\Microsoft VS Code\resources\app\node_modules\emmet\lib\snippets.json
參考：Emmet官方文檔
Emmet 之 HTML 文法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
