> 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/) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://lewiszlw.gitbook.io/notebooks/blogs/history/gvim-xia-emmet-an-zhuang-ji-shi-yong-jiao-cheng.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.