Emmet.vim的安裝

請看：http://www.cnblogs.com/yunie-akira/p/3554065.html

Emmet.vim簡介

Emmet,原來叫Zen Coding,，由Sergey Chikuyonok開發(fā)，是快速開發(fā)HTML和CSS的編輯器插件,。支持 Sublime Text,、Notepad++、
Eclipse等等,。官方的Emmet并不支持vim,，Emmet.vim是Yasuhiro Matsumoto 開發(fā)的。

開始使用Emmet.vim

生成doctype

輸入 html:xs,， 按ctrl+y, 最后按下“,”（逗號）生成XHTML strict doctype

• html:5  生成HTML5 doctype
• html:xt 生成XHTML transitional doctype
• html:4s 生成HTML4 strict doctype

輕松書寫html代碼

輸入 p.class#id,， 生成：<p id="id" class="class"></p>

輸入， h1{foo},， 生成： <h1>foo</h1>

輸入,， h1+h2, 生成： <h1></h1>

　　　　　　　　　　  <h2></h2>

輸入， img^a, 生成： <img src="">

　　　　　　　　　　  <a href="" alt=""></a>

輸入,， h1>h2, 生成： <h1>

　　　　　　　　　　　　　　<h2></h2>

　　　　　　　　　　　</h1>

輸入,， (.foo>h1)， 生成：<div class="foo">

　　　　　　　　　　　　　　　　<h1></h1>

　　　　　　　　　　　　　 </div>

輸入,， div.item,， 生成： <div class="item">

　　　　　　　　　　 　 </div>

或者直接輸入 .item， 生成： <div class="item">

　　　　　　　　　　　　   </div>

輸入,， ul>li*3,， 生成：  <ul>

　　　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　　　　　　<li></li>

　　　　　　　　　　　 　</ul>

輸入， ul>li.item$*3,， 生成： <ul>

　　　　　　　　　　　　　　　　　　<li class="item1"></li>

　　　　　　　　　　　　　　　　　　<li class="item2"></li>

　　　　　　　　　　　　　　　　　　<li class="item3"></li>

　　　　　　　　　　　　　　　</ul>

基本規(guī)則

（1）：E 代表HTML標簽

（2）：E#id 代表標簽E有id屬性

（3）：E.class 代表E有class屬性

（4）：E[attr=foo] 代表某個特定屬性

（5）：E{info} 代表標簽E包含的內容是info

（6）：E>N 代表N是E的子元素

（7）：E+N 代表N是E的同級元素

（8）：E^N 代表N是E的上級元素

參考

特別推薦：ZenCodingCheatSheet
vim下編寫html的超級利器emmet
Goodbye, Zen Coding. Hello, Emmet!