Web 前端利器Emmet 的HTML用法總結

在tutsplus 那裏看到一篇文章介紹Emmet 的用法，形象的gif圖片一目瞭然，原本想翻譯過來的（雖然翻譯用法倒不是很難），但搜索發現已經有國人翻譯過了，遂直接拿來轉載在這裏。

Emmet 簡介

Emmet插件之前被稱做爲Zen Coding，是一個文本編輯器的插件，它能夠幫助您快速編寫HTML和CSS代碼，從而加速Web前端開發。

安裝Emmet 插件

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

在這裏主要介紹一下Sublime Text中安裝Emmet 插件的方法，首先確保你已經安裝Sublime Text。Jeff 用的是Sublime Text3，方法有兩種：

一、直接下載該壓縮包，解壓後放到「程序包」內（sb中 點擊 preferens-瀏覽程序包 後打開的文件夾）。而後重啓Sublime Text 便可。

二、先安裝 Package Control，而後搜索找到Emmet 插件安裝。

Emmet：HTML用法

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

1	ul>li>img+p

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

1 2 3 4 5 6

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

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

建立初始文檔

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

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

子元素>

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

1	section>div>p

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

1 2 3 4 5

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

相鄰元素+

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

1	section+div+p

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

1 2 3

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

返回上一層^

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

1	section>div>p>a^p

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

1 2 3 4 5 6

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

其實這個就至關於：

1	section>div>(p>a)+p

乘法*

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

1

ul>li*5

上面代碼會生成5個li：

1 2 3 4 5 6 7

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

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

組合

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

1	ul>(li>a)*3

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

1 2 3 4 5

<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></div>。在實際中還有幾種狀況：

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

 

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會很聰明，他不會添加像素單位。

單位

若是你在CSS不常用的像素(px)單位，那會是什麼？是em、rem、%、ex和px嗎？那麼這些單位在Emmet中都是可使用的。在Emmet中每個單位都有其縮寫形式：

•  px→ 默認
•  p→ %
•  e→ em
•  r→ rem
•  x→ ex

要使用一個單位，只須要在值的後面使用縮寫的單位值。下面的例子是使用em定義font-size：

多個單位

CSS中的某些屬笥，好比margin，容許多個值。在Emmet中要作到這一點，只須要每一個值之間使用破折號(-)。來看看下面的例子，給body定義margin的四個值：

顏色

在Emmet中使用#前綴，後面緊跟顏色值，但不一樣的字符數將會輸出不一樣的十六進制代碼。來看一些例子：

•  ＃1→ ＃111111
•  ＃E0→ ＃e0e0e0
•  ＃FC0→ ＃FFCC00

下面定義經過c#2定義body的顏色值，將會輸出#222：

!important

儘管在CSS中!important並不常用，但在Emmet也帶有必定的縮寫。添加!就能夠自動生成：

多屬性

如今咱們具Emmet的CSS特性的一個基本瞭解，也是將它們放在一塊兒的時候。就相似於Emmet和HTML中的相鄰元素的功能。可使用加號+運算符來建立多個屬性。咱們來看一個簡單的示例：

示例

記住，你可使用全部縮寫或者將其分開。這並非很重要，關鍵的是你要使用得正確，它能更容易讓你編寫你的CSS。這裏有一個動畫，他給div.panel建立一些樣式：

以上示例代碼與演示圖來自於Josh Medeski的《Turbo-Charge Your CSS With Emmet》一文。

總結

Emmet是一個強大的工具，也被稱爲是一款高速的編碼工具，它可讓你花更少的時間作一樣的事情，而無需手動建立本身的代碼片斷。Emmet的靈感來自於CSS選擇器以及能夠用於全部主要的文本編輯器，以適應開發者的工做流程。

請記住，你能夠在你的工做流中添加任何新工具，這個學習過程也是一個曲線的過程，但你不要花費更多的時間作那些相同的事情。你只是須要按期的訪問 Emmet文檔，你就會慢慢熟悉Emmet中HTML和CSS的全部特性。讓你少想，少寫，實現更多想要的代碼。

本文轉載自http://devework.com/emmet-html.html