基本操作
文章入力後にカーソルを行末に置いたまま、<C-y>,（Ctrl+yのあとにカンマ）を押す。
html:5
（もしくは）
!
↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
階層構造を作る
div>ul>li
↓
<div>
<ul>
<li></li>
</ul>
</div>
アスタリスクで複数のタグを作る
div>ul>li*3
↓
<div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
+で同階層のタグを配置する
p+a+p
↓
<p></p>
<a href=""></a>
<p></p>
id（#）やclass（.）を指定して配置する
div#head+div.class+dive#id.class1.class2.class3
↓
<div id="head"></div>
<div class="class"></div>
<dive id="id" class="class1 class2 class3"></dive>
アスタリスクと$を組み合わせて連番を作る
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>
[]で属性を挿入
input[type=text class=hoge]
↓
<input class="hoge" type="text">
{}でテキストを挿入
a{Click}
↓
<a href="">Click</a>
タグ名を省略すると、上位階層のタグ（下記の例だとdiv）が挿入される
div#hoge>#header+#content+#footer
↓
<div id="hoge">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
主な記号
| 記号 | 機能 |
|---|---|
| # | IDとして展開する |
| . | classとして展開する |
| > | 階層を1つ下げる |
| + | 要素を同階層に展開する |
| * | 要素を繰り返す |
| $ | アスタリスクと一緒に使うことで連番を振る |
| () | 1つのブロックとしてまとめる |
| [] | srcやhrefなどの属性の追加を行う |
| {} | テキストの挿入 |
参考
emmet-vimの使い方
[技術][Vim]Vimmerなプログラマは迷わずZen-Codingしろ！
zen-coding - ZenHTMLElementsEn.wiki
Emmet Documentation - Abbreviations Syntax