**來自：
emmet的前身是大名鼎鼎的zen coding，如果你從事web前端開發的話，對該外掛程式一定不會陌生。它使用仿css選擇器的語法來生成**，大大提高了html/css**編寫的速度，比如下面的演示：
zen coding下的編碼演示
但emmet不只改名，還帶來了一些新特性。本文就來直觀地演示給你。
一、快速編寫html**
1. 初始化
html文件需要包含一些固定的標籤，比如、、等，現在你只需要1秒鐘就可以輸入這些標籤。比如輸入「!」或「html:5」，然後按tab鍵：
下面來看看如何定義html元素的內容和屬性。你可以通過輸入h1和a[href=#]，就可以自動生成如下**：
在過去版本中，可以省略掉div，即輸入.item即可生成
。現在如果只輸入.item，則emmet會根據父標籤進行判定。比如在
html**
li>
li>
li>
ul>
html**
li>
li>
li>
ul>
二、css縮寫
1. 值
比如要定義元素的寬度，只需輸入w100，即可生成
一些其他的屬性，比如background-image、border-radius、font、@font-face,text-outline、text-shadow等額外的選項，可以通過「+」符號來生成，比如輸入@f+，將生成：
如果不希望加上所有字首，可以使用縮寫來指定，比如-wm-trf表示只加上-webkit和-moz字首：
css**
-webkit-transform: ;
-moz-transform: ;
transform: ;
字首縮寫如下：
css**
background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);
三、附加功能
生成lorem ipsum文字
lorem ipsum指一篇常用於排版設計領域的拉丁文文章，主要目的是測試文章或文字在不同字型、版型下看起來的效果。通過emmet，你只需輸入lorem 或 lipsum即可生成這些文字。還可以指定文字的個數，比如lorem10，將生成：
四、定製
你還可以定製emmet外掛程式：
snippets.json
五、針對不同編輯器的外掛程式
emmet支援的編輯器如下（鏈結為針對該編輯器的emmet外掛程式）：
sublime text 2
其中包含了乙個demo，你可以試驗文中所提到的這些縮寫） 頂1
踩0
Emmet外掛程式使用
一 生成html5的文件的emmet語法 1 語法一 html5 tab鍵 2 語法二 html 5 tab鍵 3 語法三 tab鍵 二 用在html文件中的head中的emmet語法 1 規定html文件的字符集編碼 meta utf tab鍵 2 建立當前的html的視窗 meta vp tab...
前端Emmet的使用
emmet快速語法 emmet可以快速的生成我們需要的一些 使得我們編寫 更加輕便。emmet語法不是說可以直接在前端軟體中運用，emmet是一種外掛程式，大部分編輯器都支援。注釋 在輸入 後按 tab 鍵執行。且 間不可以加入空格。emmet語法名稱操作符 child 子標籤 sibling 兄弟...
Emmet外掛程式的使用
或者html 5快速生成h5。p.p1 p1生成class與id a href www.baidu.com 生成結果 是新增內容是設定屬性 我是a標籤 div div div div span，生成結果 分組，用 將命令分組 我試了很多次，我的編譯器不識別分組語法，所以我就把語法放上去，自己嘗試吧 ...