Emmet的前身是大名鼎鼎的Zen coding，如果你从事Web前端开发的话，对该插件一定不会陌生。它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度，比如下面的演示：
Zen coding下的编码演示
去年年底，该插件已经改名为Emmet。但Emmet不只改名，还带来了一些新特性。本文就来直观地演示给你。
一、快速编写HTML代码
1. 初始化
HTML文档需要包含一些固定的标签，比如、
2. 轻松添加类、id、文本和属性
连续输入元素名称和ID，Emmet会自动为你补全，比如输入p#foo：
连续输入类和id，比如p.bar#foo，会自动生成：
Html代码
下面来看看如何定义HTML元素的内容和属性。你可以通过输入h1{foo}和a[href=#]，就可以自动生成如下代码：
Html代码
3. 嵌套
现在你只需要1行代码就可以实现标签的嵌套。
效果如下图所示：
4. 分组
你可以通过嵌套和括号来快速生成一些代码块，比如输入(.foo>h1)+(.bar>h2)，会自动生成如下代码：
Html代码
5. 隐式标签
声明一个带类的标签，只需输入div.item，就会生成
以下はすべて暗黙のタグ名です:
6. 複数の要素を定義します
複数の要素を定義するには、* 記号を使用できます。たとえば、ul>li*3 は次のコードを生成できます。 t; li> 属性を持つ複数の要素を定義する
CSS コード
width: 100px; ピクセルに加えて、他の単位も生成できますh10p+m5e と入力すると、結果は次のようになります:
CSS コード
height: 10%
2 を意味します。 追加の属性
CSS コード
@font-face { font-family:;
src:url(); }
フォントファミリー: 'フォント名';
src: url('FileName.eot?#iefix') format('embedded-opentype' ),
フォント スタイル: 通常;
フォントの太さ: 通常;
3.
いくつかの略語がわからない場合, Emmet は、ov:h、ov-h、ovh と入力するなど、入力内容に基づいて最も近い構文を照合します。生成されるコードは同じです:
overflow: hidden ;
非 W3C 標準 CSS 属性を入力すると、Emmet は TRS を入力するなど、サプライヤー プレフィックスを自動的に追加します。 webkit-transform: ;
-moz-transform: ; -transform: ;
属性の前に「-」記号を追加することもできます。または、属性に接頭辞を追加することもできます。たとえば、「-super-foo:
CSS コード
接頭辞の省略形は次のとおりです:
w は -webkit-
を意味します
m は -moz-
s は -ms-
を意味します
o は -o-
を意味します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: -o -linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%) , #000);
3 つの追加機能
Emmet フィルタと操作の動作を変更し、preferences.json ファイルを変更します HTML または XML コードを生成する方法を定義します。 syntaxProfiles.json ファイル
5. さまざまなエディター用のプラグイン
Emmet でサポートされているエディターは次のとおりです (リンクはこのエディターの Emmet プラグインです):
Notepad++
PSPad
