前面我們通過《超高速前端開發(fā)工具——Emmet》簡單介紹了Emmet以及在編輯器中的安裝垫挨，今天我們再來看用Emmet超高速的編寫HTML代碼。
縮寫是Emmet工具的核心触菜，這些特殊的表達(dá)式通過Emmet解析并轉(zhuǎn)化為結(jié)構(gòu)化的代碼塊九榔，而語法用CSS選擇器，HTML標(biāo)簽和一些Emmet特定的代碼生成涡相，所以對于任何一個前端開發(fā)人員都可以很容易地掌握和使用哲泊。
你可以使用標(biāo)簽名稱為div、p等生成HTML標(biāo)簽催蝗，Emmet沒有一組預(yù)定義可用的標(biāo)記名稱切威，您可以編寫任何單詞并把它轉(zhuǎn)化為一個標(biāo)簽，例如：
div → <div></div>, footer → <footer></footer>
Emmet代碼雖然沒有特定的標(biāo)簽生逸，但編寫時還是有一定的規(guī)則與技巧牢屋，下面我們就看一看：
生成HTML文件的初始結(jié)構(gòu)：
之前我們會用軟件直接新建一個HTML文檔，初始結(jié)構(gòu)就生成了槽袄，但有些編輯器是不帶這個功能的烙无，手動輸入是件痛苦的事，有了Emmet一切變得如此簡單遍尺。生成HTML4（過渡）結(jié)構(gòu)初始文檔只需輸入“html:4t”截酷，HTML4（嚴(yán)格）結(jié)構(gòu)初始文檔只需輸入“html:4s”，將生成標(biāo)準(zhǔn)的HTML4（嚴(yán)格）標(biāo)準(zhǔn)結(jié)構(gòu)：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
而HTML5就更簡單省事了乾戏，像HTML4的輸入格式“html:5”迂苛，更狠的是HTML5只需輸入“!”,就可以生成HTML5文檔的初始結(jié)構(gòu)：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
1. 父子關(guān)系：>，使用>操作符在內(nèi)部相互嵌套的標(biāo)簽：
div>ul>li
將生成：
<div>
<ul>
<li></li>
</ul>
</div>
2. 兄弟關(guān)系：+鼓择，使用+操作符將標(biāo)簽處于同一個層級：
div+p+footer
將生成：
<div></div>
<p></p>
<footer></footer>
生成兄弟關(guān)系時三幻，像ul dl這樣的列表標(biāo)簽，使用+操作符將生成一個標(biāo)準(zhǔn)的列表結(jié)構(gòu)：
ul+
將生成：
<ul>
<li></li>
</ul>
dl+
將生成：
<dl>
<dt></dt>
<dd></dd>
</dl>
3. 上級關(guān)系：呐能，使用操作符使標(biāo)簽與前一標(biāo)簽的父級處于相同的級別：
div+div>p>span+em^bq
將生成：
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>
使用兩^操作符就與前一標(biāo)簽的爺爺級是相同級別念搬，依此類推：
div+div>p>span+em^^bq
將生成：
<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
4. 乘法：空闲，使用操作符可以輸出多個標(biāo)簽：**
div>ul>li*5
將生成：
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
5. 分組：()闸英，用()操作符進(jìn)行分組包券，使編寫的代碼結(jié)構(gòu)更加清晰娜庇、明了，一組標(biāo)簽就相當(dāng)一個元素：
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>
CSS選擇器有缆，給標(biāo)簽指定id和class選擇器，只需在標(biāo)簽的后面直接添加温亲，但必需以.或#開頭：
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>
Emmet默認(rèn)的標(biāo)簽是div棚壁，所以我們在寫帶有CSS選擇器的div標(biāo)簽時，可以省去div铸豁，你可以試試灌曙。
自定義屬性：[]（英文下的中括號），使用[]操作符給標(biāo)簽添加自定義屬性：
td[title="Hello world!" colspan=3]
將生成：
<td title="Hello world!" colspan="3"></td>
可以把你喜歡的一些屬性放在[]內(nèi)节芥，如果不指定屬性值，代碼將生成不帶屬性值的HTML默認(rèn)標(biāo)簽：
td[colspan title]
將生成：
<td colspan="" title=""></td>
屬性值必需使用單引號或雙引號逆害，不然就會出現(xiàn)你可能想到的效果头镊。
6. 項目編號：
可以使標(biāo)簽生成有序列表相艇，輸出的值為數(shù)字：
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>
除了生成無序列表，其它的標(biāo)簽也是一樣：
h$[title=item$]{Header $}*3
將生成：
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
你也可以使用多個$操作符用0（零）來分填充數(shù)字：
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>
7. 更改列表的起始數(shù)字與順序纯陨，看下面的代碼就一目了然：數(shù)字的倒序坛芽，只需在前添加@-：*
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>
起始數(shù)字，在前添加@起始數(shù)字：*
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>
而從起始數(shù)字為3的列表倒序翼抠，只需把上面的Emmet代碼item后面的數(shù)字寫成@-3*5咙轩。
8. 文本：{}，使用花括號來添加文本元素：
a{Click me}
將生成：
<a href="">Click me</a>
注意：當(dāng){}作為單獨的一個操作符使用時阴颖，a{click}和a>{click}將生成相同的標(biāo)簽活喊，但當(dāng)使用了多個，或用了其它操作符時將會生成不同的標(biāo)簽：
<!-- a{click}+b{here} -->
<a href="">click</a><b>here</b>
<!-- a>{click}+b{here} -->
<a href="">click<b>here</b></a>
當(dāng)元素用+連接時量愧，文本{}編寫正確后钾菊，并不能改變標(biāo)簽的層級關(guān)系：
p>{Click }+a{here}+{ to continue}
將生成：
<p>Click <a href="">here</a> to continue</p>
對于一些特殊的標(biāo)簽類型，比如：a偎肃、img煞烫、link、input等帶有屬性值的標(biāo)簽累颂，在編寫Emmet插件時已經(jīng)為我們編寫好了基本的結(jié)構(gòu)滞详。
比如a標(biāo)簽，在編輯中輸入a，即可解析成一個基本的a標(biāo)簽：
<a href=""></a>
a標(biāo)簽有幾個屬性值茵宪，在編寫Emmet代碼時可以添加這些值來覆蓋默認(rèn)的屬性值：
a[ title="遠(yuǎn)方的雪山" class="logo"]{遠(yuǎn)方的雪山}
將生成：
<a title="遠(yuǎn)方的雪山" class="logo">遠(yuǎn)方的雪山</a>
因為屬性值是不可以縮寫的最冰，所以看起來編寫帶屬性值是相似的。
在許多情況下稀火，你可以跳過輸入標(biāo)簽名稱和Emmet代碼暖哨，得到HTML代碼，例如下面的例子：
<div>
.item
</div>
<span>.item</span>
<ul class="nav">
.item
</ul>
將生成：
<div>
<div class="item"></div>
</div>
<span><span class="item"></span></span>
<ul class="nav">
<li class="item"></li>
</ul>
從上面的例子中我們可以看到凰狞，插件會根據(jù)id或class所在的父級標(biāo)簽生成相應(yīng)的標(biāo)簽篇裁，這種寫法也是遵循HTML的編寫規(guī)則，通過下面的代碼你會更明白：
.wrap>.content div.wrap>div.content
em>.info em>span.info
ul>.item*3 ul>li.item*3
table>#row$*4>[colspan=2] table>tr#row$*4>td[colspan=2]
上面對應(yīng)的四組代碼最終生成的代碼對應(yīng)為：
<div class="wrap">
<div class="content"></div>
</div>
<em><span class="info"></span></em>
<ul>
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<table>
<tr id="row1">
<td colspan="2"></td>
</tr>
<tr id="row2">
<td colspan="2"></td>
</tr>
<tr id="row3">
<td colspan="2"></td>
</tr>
<tr id="row4">
<td colspan="2"></td>
</tr>
</table>
我們應(yīng)該了解到赡若，CSS選擇器在塊級元素中默認(rèn)的HTML標(biāo)簽為div达布，在內(nèi)聯(lián)級元素中為span，而對于HTML一些特殊的標(biāo)簽：ul li逾冬、table tr td黍聂，將會生成對應(yīng)的內(nèi)部標(biāo)簽。
這篇文章介紹了HTML的基本標(biāo)簽在Emmet下的寫法身腻，薩龍龍把它當(dāng)做學(xué)習(xí)筆記产还，可以隨時查看，如果對你有幫助就更好嘀趟。
Emmet編寫代碼的格式最重要的就是不能有空格脐区，如果有空格將不會完全解析和生成HTML代碼。
Emmet最核心的就是縮寫她按，而它也不屬于一門語言牛隅，編寫時也不需要有很強(qiáng)的可讀性，最重要的就是能高速的生成HTML代碼酌泰。只要你多練習(xí)媒佣，多看下官方的英文文檔，很快你將掌握Emmet的編寫方式宫莱，同時也將大大提高你的前端開發(fā)速度丈攒。
