Gvim下Emmet安装及使用教程
前言
在编写html和css文件时，因为各种各样的标签写得让人头疼，上网看到这款插件，在使用后能极大地提高代码编写效率。Emmet的前身是Zen coding，它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度。
安装教程
我没有选择先安装vundle、pathogen等插件管理器，而是直接安装Emmet vim插件。但是推荐先安装插件管理器再安装Emmet。 安装方法：
下载Emmet.vim并解压；
将解压的文件里面plugin目录下文件复制到vim目录下plugin文件夹里（非vimfile文件夹）；
将解压的文件里面autoload目录下文件及文件夹复制到vim目录下autoload文件夹里。
Emmet语法及常用缩写
输入缩写然后按<c-y>,，光标要在紧跟最后一个字符。
HTML
模板
html:5和!生成
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>>：下级
nav>ul>li生成
+：同级
div+p+bq生成
^：上级
div+div>p>span+em^bq生成
div+div>p>span+em^^bq生成
()：分组
div>(header>ul>li*2>a)+footer>p生成
(div>dl>(dt+dd)*3)+footer>p生成
*：乘法
ul>li*5生成
$：自增符号
ul>li.item$*5生成
h$[title=item$]{Header $}*3生成
ul>li.item$@-*5生成
ul>li.item$@3*5生成
{}：文本内容
a{click me}生成
p>{click}+a{here}+{to continue}生成
ID和类属性
#header生成
.title生成
form#search.wide生成
p.class1.class2.class3生成
自定义属性
p[a="value1" b=value2 c='value3' d]生成
隐式标签
.class生成
em>.class生成
ul>.class生成
各类标签
例如： link生成
link:favicon生成
CSS
举例： pos-->position:relative; pos:s-->position:static; pos:a-->position:absolute; pos:r-->position:relative; pos:f-->position:fixed;
附录
Last updated