Emmet插件介绍
Emmet插件(前身为Zen Coding)是一个能大幅度提高前端开发效率的一个工具。
基本上，大多数的文本编辑器都会允许你存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动你得生产力，但大多数的实现都有这样一个缺点：你必须先定义你得代码片段，并且不能在运行时进行拓展。
Emmet把片段这个概念提高到了一个新的层次：你可以设置CSS形式的能够动态被解析的表达式，然后根据你所输入的缩写来得到相应的内容。Emmet是很成熟的并且非常适用于编写HTML/XML和CSS代码的前端开发人员，但也可以用于编程语言。
Emmet插件的下载和安装
Emmet为大部分流行的编辑器都提供了安装插件，许多编辑器都可以从Emmet官网下载安装使用Emmet插件。
Emmet插件的使用
由于博主使用的是Mac环境 + Sublime Text 3编辑器，所以下边的演示示例都是在Mac系统下的Sublime Text 3编辑器下进行的。
使用方法
Emmet的使用方法也非常简单，直接在编辑器中输入HTML或CSS的代码的缩写，然后按tab键就可以拓展为完整的代码片段。
语法示例
后代：
>例如缩写
nav>ul>li，按下Tab键会生成以下代码：<nav>
<ul>
<li></li>
</ul>
</nav>兄弟：
+缩写
div+p+bq，按下Tab键会生成以下代码：<div></div>
<p></p>
<blockquote></blockquote>上级：
^缩写
div+div>p>span+em^bq，按下Tab键会生成以下代码：<div></div>
<div>
<p><span></span><em></em></p>
<blockquote></blockquote>
</div>缩写
div+div>p>span+em^^bq，按下Tab键会生成以下代码：<div></div>
<div>
<p><span></span><em></em></p>
</div>
<blockquote></blockquote>
分组：
()利用
()可以给缩写分组，组合生成各种需要的代码结构。
缩写：div>(header>ul>li*2>a)+footer>p，按下Tab键会生成以下代码：<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，按下Tab键会生成以下代码：<div>
<dl>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
<dt></dt>
<dd></dd>
</dl>
</div>
<footer>
<p></p>
</footer>
乘法：
*例如缩写
ul>li*3，按下Tab键会生成以下代码：<ul>
<li></li>
<li></li>
<li></li>
</ul>缩写
div+div>nav>i*3，按下Tab键会生成以下代码：<div></div>
<div>
<nav>
<i></i>
<i></i>
<i></i>
</nav>
</div>
自增符号：
$缩写
div>nav>ul>li.iterm$*3，按下Tab键会生成以下代码：<iv>
<nav>
<ul>
<li class="iterm1"></li>
<li class="iterm2"></li>
<li class="iterm3"></li>
</ul>
</nav>
</iv>缩写
h$[title=item$]{Header $}*3，按下Tab键会生成以下代码：<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>缩写
ul>li.item$$$*5，按下Tab键会生成以下代码：<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
</ul>缩写
ul>li.item$@-*5，按下Tab键会生成以下代码：<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，按下Tab键会生成以下代码：<ul>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
</ul>
ID和类属性
#header<div id="header"></div>
.title<div class="title"></div>
form#search.wide<form action="" id="search" class="wide"></form>
p.class1.class2.class3<p class="class1 class2 class3"></p>
div#main>section.paper>nav>ul>li.iterm$*5>a.classname<div id="main">
<section class="paper">
<nav>
<ul>
<li class="iterm1"><a href="" class="classname"></a></li>
<li class="iterm2"><a href="" class="classname"></a></li>
<li class="iterm3"><a href="" class="classname"></a></li>
<li class="iterm4"><a href="" class="classname"></a></li>
<li class="iterm5"><a href="" class="classname"></a></li>
</ul>
</nav>
</section>
</div>
HTML
html结构代码
html语法时在英文输入状态下输入
!，然后按下Tab键，即可自动生成HTML整体结构代码
效果如下：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>a:link<a href="http://"></a>
a:mail<a href="mailto:"></a>
link<link rel="stylesheet" type="text/css" href="">
meta:vp<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
img<img src="">
input<input type="" name="">
input:search<input type="search" name="" id="">
btn:s<button type="submit"></button>
form:get<form action="" method="get"></form>
参考文章：