> For the complete documentation index, see [llms.txt](https://lewiszlw.gitbook.io/notebooks/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lewiszlw.gitbook.io/notebooks/blogs/history/gvim-xia-emmet-an-zhuang-ji-shi-yong-jiao-cheng.md). # Gvim下Emmet安装及使用教程 ## 前言 在编写html和css文件时，因为各种各样的标签写得让人头疼，上网看到这款插件，在使用后能极大地提高代码编写效率。Emmet的前身是Zen coding，它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度。 ## 安装教程 我没有选择先安装[vundle](https://github.com/VundleVim/Vundle.vim)、[pathogen](https://github.com/tpope/vim-pathogen)等插件管理器，而是直接安装Emmet vim插件。但是推荐先安装插件管理器再安装Emmet。 安装方法： * 下载[Emmet.vim](https://github.com/mattn/emmet-vim)并解压； * 将解压的文件里面plugin目录下文件复制到vim目录下plugin文件夹里（非vimfile文件夹）； * 将解压的文件里面autoload目录下文件及文件夹复制到vim目录下autoload文件夹里。 ## Emmet语法及常用缩写 输入缩写然后按`,`，光标要在紧跟最后一个字符。 ### HTML #### 模板 `html:5`和`!`生成 ```html ``` #### >：下级 `nav>ul>li`生成 ```html ``` #### +：同级 `div+p+bq`生成 ```html

``` #### ^：上级 `div+div>p>span+em^bq`生成 ```html

``` `div+div>p>span+em^^bq`生成 ```html

``` #### ()：分组 `div>(header>ul>li*2>a)+footer>p`生成 ```html

``` `(div>dl>(dt+dd)*3)+footer>p`生成 ```html
``` #### \*：乘法 `ul>li*5`生成 ```html ``` #### $：自增符号 `ul>li.item$*5`生成 ```html ``` `h$[title=item$]{Header $}*3`生成 ```html

Header 1

Header 2

Header 3

``` `ul>li.item$@-*5`生成 ```html //反向增 ``` `ul>li.item$@3*5`生成 ```html //从3开始 ``` #### {}：文本内容 `a{click me}`生成 ```html click me ``` `p>{click}+a{here}+{to continue}`生成 ```html

click class to continue

``` #### ID和类属性 `#header`生成 ```html ``` `.title`生成 ```html
``` `form#search.wide`生成 ```html ``` `p.class1.class2.class3`生成 ```html

``` #### 自定义属性 `p[a="value1" b=value2 c='value3' d]`生成 ```html

``` #### 隐式标签 `.class`生成 ```html
``` `em>.class`生成 ```html ``` `ul>.class`生成 ```html ``` #### 各类标签 例如： `link`生成 ```html ``` `link:favicon`生成 ```html ``` ### CSS 举例： pos-->position:relative; pos:s-->position:static; pos:a-->position:absolute; pos:r-->position:relative; pos:f-->position:fixed; ## 附录 * [Emmet official site](http://emmet.io/) * [Emmet所有缩写](http://docs.emmet.io/cheat-sheet/)