Emmet-前端開發神器

Emmet是一款編輯器插件，支持多種編輯器支持。在前端開發中，Emmet 使用縮寫語法快速編寫 HTML、CSS 以及實現其餘的功能，極大的提升前端開發效率。

下載地址http://emmet.io/download/

縮寫

Emmet使用特殊的表達式Abbreviations，也就是縮寫：這種特殊的表達式會被Emmet解析並轉義成結構化的代碼塊。Emmet使用相似CSS選擇器的語法來描述元素在DOM樹節點的位置和屬性。

例如

#page>div.logo+ul#navigation>li*5>a{Item $}

會被轉義成

<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

HTML元素

在Emmet中能夠使用元素名例如 div 或 p 生成HTML標籤。Emmet沒有預設任何標籤名，因此能夠使用任何可用名稱來生成HTML標籤：div → <div></div> 或 foo → <foo></foo>

嵌套操做符

嵌套操做用來生成元素的DOM樹中的兄弟節點或子節點

child：>

使用 > 生成元素子節點

div>ul>li

會被轉義成

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

Sibling: +

使用 + 生成元素兄弟節點

div+p+bq

會被轉義成

<div></div>
<p></p>
<blockquote></blockquote>

Climb-up: ^

使用 ^ 在元素父節點生成新的元素節點

操做符 ^ 的做用和 > 恰好相反

用 > 能夠在子級生成新的節點

div+div>p>span+em

會被轉義成

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

用 ^ 能夠在父級生成新的節點

div+div>p>span+em^bq

會被轉義成

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

用n個 ^ ，就能夠在第n父級生成新的節點

div+div>p>span+em^^^bq

會被轉義成

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

Multiplication: *

使用 * 生成多個相同元素

ul>li*5

會被轉義成

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

Grouping: ()

圓括號 () 是Emmet的高級用法，用來實現比較複雜的DOM結構

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

Emmet給元素添加ID和CLASS的方法和CSS的語法相似

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]標記來添加自定義屬性

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

會被轉義爲

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

元素編號

使用 $ 操做符能夠對重複元素進行有序編號

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>

文本操做符

Emmet使用 Text:{} 給元素添加文本內容

a{Click me}

會被轉義爲

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

注意： {text} 在Emmet中是被當成單獨的元素來解析的，但當和其餘元素結合使用時會有特殊的含義

例如：
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>

在 a>{click}+b{here} 中， <b> 元素是<a>元素的子節點。這個就是區別：當 {text} 直接寫在元素後面時，並不會改變父元素的上下文。

下面是一個更復雜的案例:

p>{Click }+a{here}+{ to continue}

會被轉義爲

<p>Click <a href="">here</a> to continue</p>

而

p{Click }+a{here}+{ to continue}

則會被轉義爲

<p>Click </p>
<a href="">here</a> to continue