Emmet插件用法指南

時間 2019-11-08

標籤 emmet 插件用法指南简体版

原文原文鏈接

安裝Emmet插件

Emmet只是文本編輯器一個插件，要想讓他發揮應用的功能，就得將其安裝到你喜歡的文本編輯器中。到目前爲止，不少流行的文本編輯器都支持Emmet插件，也就是說不少流行的文本編輯器均可以安裝這款插件。css

點擊下面的連接，按照說明文檔能夠給對應的文本編輯器安裝Emmet插件：html

它是如何工做的？

在Web前端開發中，咱們不得不面對一個殘酷的現實。在寫HTML代碼時須要必定的時間，由於咱們要花大把的時間寫HTML標籤，屬性，引號等；一樣在編寫CSS時，咱們要寫不少的屬性、屬性值，大括號和分號等。固然，大多數的文本編輯器都或多或少帶有代碼自動提示功能，在開發之時，幫了很大的忙，但仍然須要人工輸入不少代碼。而Emmet插件，集成了不少縮寫，你們在開發時只須要輸入簡單的縮寫，按tab鍵或ctrl+E鍵就能擴展出所需的代碼片斷。前端

Emmet和HTML

假定你已經爲您本身喜歡的文本編輯器成功的安裝好了Emmet插件，接下來咱們來簡單的看看如何使用Emmet幫助您快速編寫您的HTML標籤。git

Emmet使用定義的縮寫來生成元素。他的語法和CSS的選擇器很是相似：github

ul>li>img+p

一旦你寫好縮寫以後，按一下tab鍵(我使用的是Sublime Text編輯器)就能生成你所請求的代碼。上面的例子將會產生下面的代碼：web

<ul> <li> <img src="" alt=""> <p></p> </li> </ul>

早前在《前端開發必備！Emmet使用手冊》一文中詳列了Emmet生成HTML代碼的一些代碼示例。接下來，讓咱們來深刻一點了解Emmet語法，來看看如何經過一些更復雜的縮寫建立HTML標籤。c#

建立初始文檔

任何一個HTML文件，都具備一些默認的文檔結構。使用Emmet來建立須要的時間不到一秒。只要輸入!或html:5，而後點擊tab鍵，你就會看到一個HTML5的doctype默認標籤。app

html:5或!：HTML5文檔類型
html:xt：XHTML過渡型文檔類型
html:xs：XHTML嚴格型文檔類型
html:4t：HTML4過渡型文檔類型
html:4s：HTML4嚴格型文檔類型

子元素`>`

使用>運算符能夠用來生成彼此嵌套的元素：eclipse

section>div>p

上面的代碼會生成下面的代碼：編輯器

<section> <div> <p></p> </div> </section>

相鄰元素`+`

使用+運算符能夠用來生成彼此相鄰的元素：

section+div+p

上面代碼會生成下面的代碼：

<section></section> <div></div> <p></p>

返回上一層`^`

使用^運算符，可讓你的代碼返回上一層。當你使用>嵌套元素時，想讓後面的回到上一層，那麼這個方法很適用。

section>div>p>a^p

這個縮寫將兩個段落元素都放置在div內，但只有第一個段落裏會包含一個連接。

<section> <div> <p><a href=""></a></p> <p></p> </div> </section>

其實這個就至關於：

section>div>(p>a)+p

乘法`*`

若是你想一次性生成多個相同的元素，好比列表中的li，那麼就可使用乘法運算符*:

ul>li*5

上面代碼會生成不個li：

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

除了能一次性生成多個相同的標籤以外，咱們還能夠經過$符號作遞增；經過$@-符號作遞減；經過$@3*5這樣的方式從第三個開始命名：

組合

爲了更有效的利用嵌套，咱們常會製做一些代碼片斷。在Emmet中你能夠經過()將一個塊組合在一塊兒，來看一個簡單的示例：

ul>(li>a)*3

上面的代碼就會生成3個li，並且每一個li中套了一個a:

<ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>

在咱們一個頁面中，常會包括頁頭、主體和頁腳三個部分，咱們不少時候就能夠經過對全們進行一個組合，快速生成有效的代碼：

快速添加類名、ID、文本和屬性

在Emmet中，還有一個功效，能快速幫助你添加類名、ID、文本和屬性。

使用E#ID添加ID名
使用E.class添加類名
使用E[attr]添加屬性
使用E{text}添加文本

省略標籤名

在Emmet中能夠省略標籤名，默認狀況下，如.item和div.item起到的做用是一致的<div class="item"></div>。在實際中還有幾種狀況：

ul和 ol中輸入指的是li
table、tbody、thead和tfoot指的是tr
tr中指的是td
select和optgroup指的是option

Emmet和HTML更詳盡的介紹能夠閱讀：Matt West的《Using Emmet to Speed Up Front-End Web Development》、Zeno Rocha的《Goodbye, Zen Coding. Hello, Emmet!》和白牙的《前端開發必備！Emmet使用手冊》

Emmet和CSS

不少文章都是介紹Emmet和HTML之間的實現方式，但Josh Medeski的《Turbo-Charge Your CSS With Emmet》一文詳細介紹了Emmet和CSS之間的實現方式。接下來的代碼和圖片主要來自於此文章。

屬性

CSS提供了屬性的值，好比font-size，margin和 padding等等：

Emmet定義了全部已知的CSS屬性和縮寫。因此border-bottom縮寫是bdb，border-top縮寫是bdt。正以下面的示例font-size縮寫是fz：

假設你在你的編輯器中輸入fz，而後按一下tab鍵，Emmet就像一個魔法師同樣將縮寫變成有效的CSS，而且放在你的光標之處。

屬性值

如今咱們已經瞭解了CSS的屬性，它只須要添加一個值。這是經過一個組合縮寫和所須要的值一塊兒來完成。例如，fz18將輸出font-size:18px。你不須要輸入px，由於Emmet將會其單位是px。若是一個項目沒有一個單位（如font-weight），Emmet會很聰明，他不會添加像素單位。