Emmet不徹底總結

最近看了Emmet文檔，此處爲不徹底總結一下，之後會慢慢充實，與官方文檔有較多重合，請勿拍磚。

Emmet在HTML和CSS上面的強大就再也不贅述了，本文主要講述的內容以下：

• 功能

• 語法

• 配置文件

  • preferences.json

  • snippets.json

• 推薦連接

功能

下面羅列的功能並非 Emmet 所有功能，如需查看所有，請參看推薦連接 Actions 部分

1. 展開縮寫：對HTML和CSS均有奇效，鑑於此處內容較多，具體使用見語法部分

2. 向內、向外匹配標籤：從插入符處開始選中

3. 在開始和結束標籤之間切換

4. 特定內容包裹選中內容

5. 上一個/下一個編輯點：編輯點指的是標籤之間、空標籤以及縮進的新行

6. 選中上一個/下一個代碼： 可選中的包括html標籤名、屬性及屬性值和css的選擇器、屬性及屬性值

7. 切換註釋：和其餘切換註釋的方法不一樣的是，當沒有選中代碼時，Emmet 切換當前上下文的註釋。對於 HTML 是整個標籤內容，對於 CSS 是一條規則或整個屬性

8. 刪除標籤：當佔位符在標籤上時，刪除自身，其他狀況刪除父標籤；自動調整縮進

9. 增減數字：分別以0.一、1和10爲單位

語法

• Emmet的語法與css的語法相相似

• Emmet 遇到空格後中止解析縮寫，因此請不要使用空格

• 能夠在文本的任意位置書寫並展開縮寫

元素

使用元素的名字，好比 div、 p 來生成 HTML 標籤。 Emmet 沒有預約義標籤集合，因此能夠用任意單詞來生成對應的標籤：

div → <div></div>
foo → <foo></foo>

嵌套操做符

• 子元素： >

div>ul>li

展開爲

<div>
    <ul>
        <li></li>
    </ul>
</div>

• 兄弟元素： +

h1>div>p>

展開爲

<h1></h1>
<div></div>
<p></p>

• 返回上層： ^

div>h2>p^div

展開爲

<div>
    <h2>
        <p></p>
    </h2>
    <div></div>
</div>

該符號也能夠連續使用多個，例如：

div>p>span+em^^^bq

展開爲

<div>
    <p><span></span><em></em></p>
</div>
<blockquote></blockquote>

• 乘法： *

div>ul>li\*5

展開爲

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</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 和 code

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>

• 自定義屬性

td[title="Hello world!" colspan=3]

展開爲

<td title="Hello world!" colspan="3"></td>

須要清楚的是：可使用單引號或者雙引號包裹屬性值，甚至屬性值若是不包含空格能夠省略引號

• 文本： ｛｝

a{Click me}

展開爲

<a href="">Click me</a>

配置文件

待填坑...

preferences.json

snippets.json

推薦連接

1. EMMET官方文檔

2. EMMET中文文檔參考 yanxyz@github

3. Cheat Sheet