Emmet简述

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具. 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。
在后缀为.html/.css中输入缩写后按Tab键即会自动生成相应代码. 语法基本规则如下:

html:5

输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补全html基本结构：
示例：

<!doctype html>
<html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title></head><body></body>
</html>

link:css

输入link:css引入css样式文件：

<link rel="stylesheet" href="style.css">

script:src

输入script:src引入js文件：

<script src=""></script>

输入标签名自动补齐

输入标签名，按tab键自动补齐，{}可输入标签内的文本：
示例：

h1{好好学习，天天向上！}
生成：
<h1>好好学习，天天向上！</h1>

在这里插入图片描述

lipsumN

输入随机文本

使用"#“生成id，”.“生成class，”[]"生成属性

示例：

p#name.ui.button[op='jia']
生成：
<p id="name" class="ui button" op="jia"></p>

在这里插入图片描述

使用">“生成子标签，”+" 生成兄弟标签，"^"生成上级的兄弟标签

示例：

div>p{梁云亮}
生成：
<div><p>梁云亮</p>
</div>div.ui.button+div#info
生成：
<div class="ui button"></div>
<div id="info"></div>div>p{梁云亮}^div[p=321]
生成：
<div><p>梁云亮</p>
</div>
<div p="321"></div>

"*"生成多个相同的标签

示例：

ol>li*5>lipsum2
生成：
<ol><li>Lorem ipsum.</li><li>Laboriosam, velit.</li><li>Illum, iure!</li><li>Aliquid, enim.</li><li>Aperiam, eum.</li>
</ol>

"()"对标签分组

示例：

div>(ul>li*5>lipsum1)+(span>lipsum10)+a[href="#"]
生成：
<div><ul><li>Lorem.</li><li>Officia.</li><li>Illum.</li><li>Dolor.</li><li>Repellendus.</li></ul><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, maiores!</span><a href="#"></a>
</div>

"$"生成1到n的自动编号

ul>li*3>img[src=imgs/$.jpg][alt=$]
生成：
<ul><li><img src="imgs/1.jpg" alt="1"></li><li><img src="imgs/2.jpg" alt="2"></li><li><img src="imgs/3.jpg" alt="3"></li>
</ul>
ul>li*3>img[src=imgs/$$$.jpg][alt={img $}]
生成
<ul><li><img src="imgs/001.jpg" alt="{img 1}"></li><li><img src="imgs/002.jpg" alt="{img 2}"></li><li><img src="imgs/003.jpg" alt="{img 3}"></li>
</ul><!-- “$” 后添加 “@n” 修改编号的起始值为n -->
ul>li*3>img[src=imgs/$$$@8.jpg][alt={img $}]
生成：
<ul><li><img src="imgs/008.jpg" alt="{img 1}"></li><li><img src="imgs/009.jpg" alt="{img 2}"></li><li><img src="imgs/010.jpg" alt="{img 3}"></li>
</ul><!-- “$” 后添加 “@-” 修改编号的方向 -->
ul>li*3>img[src=imgs/$$$@-8.jpg][alt={img $}]
生成：
<ul><li><img src="imgs/008.jpg" alt="{img 1}"></li><li><img src="imgs/007.jpg" alt="{img 2}"></li><li><img src="imgs/006.jpg" alt="{img 3}"></li>
</ul>

包装文本行

原始文本：

首页
产品介绍
相关案例
关于我们
联系我们
而我们预期的效果是这样

选中文本，按快捷键：ctrl+alt+j，或选择主菜单上的：代码|环绕着|实时模板。

在这里插入图片描述
选中Emmet，然后在打开的窗口中输入：ul>li*
注意：右侧的下拉列表。单击向下箭头以查看最近应用的Emmet实时模板的历史记录：
还要注意颜色指示。如果键入有效的Emmet缩写，则背景为绿色。但是，输入不存在的缩写时，背景变为红色：
在这里插入图片描述
回车，最终效果：

<ul><li>首页</li><li>产品介绍</li><li>相关案例</li><li>关于我们</li><li>联系我们</li><li>而我们预期的效果是这样</li>
</ul>

其它

a:mail          => <a href="mailto:"></a>
a:link          => <a href="http://"></a>
form:get        => <form action="" method="get"></form>
form:post        => <form action="" method="post"></form>
input           => <input type="text">
inp             => <input type="text" name="" id="">
input:hidden    => <input type="hidden" name=""> input:h亦可
input:email     => <input type="email" name="" id="">
input:password  => <input type="password" name="" id="">
input:checkbox  => <input type="checkbox" name="" id="">
input:radio     => <input type="radio" name="" id="">
select          => <select name="" id=""></select>
option          => <option value=""></option>
bq              => <blockquote></blockquote>
btn             => <button></button>
btn:s           => <button type="submit"></button>
btn:r           => <button type="reset"></button>