Emmet 快速編寫html代碼

簡介

快速編寫HTML代碼

語法簡單，語法相似css選擇器，30分鐘內你就能夠搞定它。開發商爲sublime、atom、brackets、hbuilder、webstrom等編輯器或IDE提供對應的插件，你能夠在你喜歡的編輯器中使用它。它還支持對css快速編輯功能。

• Emmet官網
• Emmet官方文檔
• Emmet官方下載

縮寫

縮寫是emmet工具包的核心：這些特殊的表達式在運行時被解析，並轉化爲對應的結構化代碼塊（例如html)。縮寫語法像css選擇器，這樣web開發人員能夠輕易的使用它，一般狀況下按下tab或ctrl+e會生成對應的代碼。

#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>

語法

官網語法介紹文檔：http://docs.emmet.io/abbreviations/syntax/

元素

好比p、h1元素，會生成標籤<p></p>、<h1></h1>，而且你能夠寫任意文字將會轉化爲標籤tt-><tt></tt，意味着emmet能夠用於編輯xml等標記語言。

嵌套的運算符

用嵌套的運算符來表明html中dom元素的樹形結構

子層：>

div>ul>li

生成...

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

兄弟層：+

header+nav+section+footer

生成...

<header></header>
<nav></nav>
<section></section>
<footer></footer>

上層：^

header>h1^nav

生成...

<header>
        <h1></h1>
    </header>
    <nav></nav>

乘法：*

ul>li*4

生成...

<ul>
    <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>

屬性運算符

用於修改輸出元素的屬性。例如，能夠在html和xml中生成元素的class屬性。

ID和CLASS：# .

在css中能夠使用div#id和div.class來設置指定元素並指定id或class的樣式。在emmet中，一樣能夠使用這些語法來爲html元素添加屬性，並指定值。

div#header+div.navigation+div.footer

生成...

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

自定義屬性：[]

您能夠使用[attr1="value1" attr2=value2]的形式來添加元素屬性值。

a[href=index.html title=index]

生成...

<a href="index.html" title="index"></a>

• 空格分隔多個屬性
• 值處的引號能夠省略
• emmet自動爲元素生成必須的屬性

項目編號： ### #### 隨着乘法運算符能夠重複的元素，但$`你能夠編號*它們。

ul>li.item$*3

生成...

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

您能夠使用多個$成一排用零墊編號：

ul>li.item$$$*3

生成...

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

修改編號方向：$@-

在序號$後添加@-，實現項目標號的反序。

ul>li.item$@-*3

生成...

<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

開始值：$@3

修改計算基值，在序號$後添加@數字。

ul>li.item$@2*3

...轉換爲

<ul>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
</ul>

您能夠一塊兒使用這些修飾符：

ul>li.item$@-3*5

文本：{}

a{hello}

生成...

<a href="">hello</a>

複雜一點的

<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>

<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>

隱式標記

emmet解析器根據表達式上下文（父子關係），推導出被省略元素的類型。從而對emmet語法的表達式再次簡寫。

.header>h1#title+ul>.item*2

生成...

<div class="header">
    <h1 id="title"></h1>
    <ul>
        <li class="item"></li>
        <li class="item"></li>
    </ul>
</div>

常見規則：

1. 上下文沒法得到元素時，產生div元素；
2. li對應於ul ol，例如，ul>.item -> <ul><li class="item"></li></ul>；
3. tr對應於table thead tbody tfoot；
4. td對應於tr；
5. option對於select optgroup；

填充文本：lorem

編寫的靜態網頁經常作爲動態網頁的模版，你不得不填寫一些無用的文原本撐起整個頁面。

ul>li*2>lorem2

生成...

<ul>
    <li>Lorem ipsum.</li>
    <li>Alias, dolorum?</li>
</ul>

• lorem而後執行emmet會生成30個單詞;
• lorem10會生成10個單詞;