Gvim下Emmet安装及使用教程

PreviousDjango View视图层学习 NextHTTP协议简介

Last updated 3 years ago

Gvim下Emmet安装及使用教程

前言

在编写html和css文件时，因为各种各样的标签写得让人头疼，上网看到这款插件，在使用后能极大地提高代码编写效率。Emmet的前身是Zen coding，它使用仿CSS选择器的语法来生成代码，大大提高了HTML/CSS代码编写的速度。

安装教程

我没有选择先安装、等插件管理器，而是直接安装Emmet vim插件。但是推荐先安装插件管理器再安装Emmet。安装方法：

下载并解压；
将解压的文件里面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生成

<nav>
        <ul>
                <li></li>
        </ul>
</nav>

+：同级

div+p+bq生成

<div></div>
<p></p>
<blockquote></blockquote>

^：上级

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

<div></div>
<div>
        <p>
                <span></span>
                <em></em>
        </p>
        <blockquote></blockquote>
</div>

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

<div></div>
<div>
        <p>
                <span></span>
                <em></em>
        </p>
</div>
<blockquote></blockquote>

()：分组

div>(header>ul>li*2>a)+footer>p生成

<div>
        <header>
                <ul>
                        <li><a href=""></a></li>
                        <li><a href=""></a></li>
                </ul>
        </header>
        <footer>
                <p></p>
        </footer>
</div>

(div>dl>(dt+dd)*3)+footer>p生成

<div>
        <dl>
                <dt></dt>
                <dd></dd>
                <dt></dt>
                <dd></dd>
                <dt></dt>
                <dd></dd>
        </dl>
</div>
<footer>
        <p></p>
</footer>

*：乘法

ul>li*5生成

<ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
</ul>

$：自增符号

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>

h$[title=item$]{Header $}*3生成

<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>

ul>li.item$@-*5生成

<ul>
        <li class="item5"></li>
        <li class="item4"></li>
        <li class="item3"></li>
        <li class="item2"></li>
        <li class="item1"></li>
</ul>                           //反向增

ul>li.item$@3*5生成

<ul>
        <li class="item3"></li>
        <li class="item4"></li>
        <li class="item5"></li>
        <li class="item6"></li>
        <li class="item7"></li>
</ul>                          //从3开始

{}：文本内容

a{click me}生成

<a href="">click me</a>

p>{click}+a{here}+{to continue}生成

<p>
        click
        <a href="">class</a>
        to continue
</p>

ID和类属性

#header生成

<div id="header"></div>

.title生成

<div class="title"></div>

form#search.wide生成

<form id="search" class="wide" action=""></form>

p.class1.class2.class3生成

<p class="class1 class2 class3"></p>

自定义属性

p[a="value1" b=value2 c='value3' d]生成

<p a="value1" b="value2" c="value3" d=""></p>

隐式标签

.class生成

<div class="class"></div>

em>.class生成

<em><span class="class"></span></em>

ul>.class生成

<ul>
        <li class="class"></li>
</ul>

各类标签

例如： link生成

<link rel="stylesheet" href="">

link:favicon生成

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">

CSS

举例： pos-->position:relative; pos:s-->position:static; pos:a-->position:absolute; pos:r-->position:relative; pos:f-->position:fixed;

附录