Emmet 快速编写

约 1367 字大约 5 分钟

Emmet前端VSCode

2020-05-08

Emmet 是前端开发者的必备工具，通过简洁的缩写语法，让你用一行代码生成复杂的 HTML 结构。

背景与动机

如果你厌倦了重复敲 <div>、<ul>、<li> 这些标签，Emmet 会改变你的工作方式。它内置于 VSCode、Sublime Text、Atom 等主流编辑器，输入缩写后按 Tab 键即可展开成完整代码。

适合读者：有一定 HTML/CSS 基础的前端开发者

核心价值：

减少重复敲击键盘的时间
提高编码效率和准确性
让你专注于结构设计而非标签输入

Emmet HTML 语法

元素级联结构

操作符	功能	示例
`>`	子元素	`ul>li` → `<ul><li></li></ul>`
`+`	相邻元素	`div+p` → `<div></div><p></p>`
`^`	返回上层	`ul>li^p` → `<ul><li></li></ul><p></p>`
`*`	乘法	`li*3` → 三个 `<li>`
`()`	分组	`(ul>li)*2` → 两组 ul>li

创建 HTML 文档骨架：

输入 ! 然后按 Tab：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

子元素示例：

<!-- 输入: ul>li>img + Tab -->
<ul>
    <li><img src="" alt=""></li>
</ul>

相邻元素示例：

<!-- 输入: section+div+p + Tab -->
<section></section>
<div></div>
<p></p>

返回上层示例：

<!-- 输入: ul>li>img^li + Tab -->
<ul>
    <li><img src="" alt=""></li>
    <li></li>
</ul>

乘法示例：

<!-- 输入: ul>li*5 + Tab -->
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

分组示例：

<!-- 输入: ul>(li>a)*3 + Tab -->
<ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
</ul>

元素属性

操作符	功能	示例
`#`	添加 ID	`div#header` → `<div id="header"></div>`
`.`	添加类名	`div.container` → `<div class="container"></div>`
`[]`	自定义属性	`input[type="text"]`
`{}`	添加文本	`a{点击这里}` → `<a href="">点击这里</a>`

组合示例：

<!-- 输入: div#first.first[width="500"]{内容文本} + Tab -->
<div id="first" class="first" width="500">内容文本</div>

实际应用示例：

<!-- 输入: div.card>h3.title+p.description+a.btn{了解更多} + Tab -->
<div class="card">
    <h3 class="title"></h3>
    <p class="description"></p>
    <a href="" class="btn">了解更多</a>
</div>

编号与递增

使用 $ 生成递增数字，$@- 生成递减数字：

<!-- 输入: ul>li.item$*3 + Tab -->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
</ul>

<!-- 输入: ul>li.item$@-*3 + Tab -->
<ul>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

<!-- 输入: ul>li.item$$$*3 + Tab (三位数字) -->
<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
</ul>

Emmet CSS 语法

Emmet 的 CSS 缩写遵循简单的规则：属性首字母 + 数值 + 单位。

常用属性缩写

缩写	展开结果
`w100`	`width: 100px;`
`h50`	`height: 50px;`
`m10`	`margin: 10px;`
`p20`	`padding: 20px;`
`df`	`display: flex;`
`dib`	`display: inline-block;`

边框与背景

/* 输入: bd1-s-red */
border: 1px solid red;

/* 输入: bdb2-d-#ccc */
border-bottom: 2px dashed #ccc;

/* 输入: bgc#fff */
background-color: #fff;

/* 输入: bgi */
background-image: url();

定位相关

/* 输入: posa */
position: absolute;

/* 输入: posr */
position: relative;

/* 输入: t10 */
top: 10px;

/* 输入: l0 */
left: 0;

属性拼接

多个属性可以连续输入：

/* 输入: m10+p20+df */
margin: 10px;
padding: 20px;
display: flex;

/* 输入: w100+h50+bga */
width: 100px;
height: 50px;
background-color: rgba(0,0,0,0);

实战示例

快速创建导航栏

<!-- 输入: nav>ul.nav-list>(li>a.nav-link{链接$})*5 + Tab -->
<nav>
    <ul class="nav-list">
        <li><a href="" class="nav-link">链接1</a></li>
        <li><a href="" class="nav-link">链接2</a></li>
        <li><a href="" class="nav-link">链接3</a></li>
        <li><a href="" class="nav-link">链接4</a></li>
        <li><a href="" class="nav-link">链接5</a></li>
    </ul>
</nav>

快速创建卡片组件

<!-- 输入: div.card-group>(div.card>img.card-img+h3.card-title+p.card-text+button.btn{按钮})*3 + Tab -->
<div class="card-group">
    <div class="card">
        <img src="" alt="" class="card-img">
        <h3 class="card-title"></h3>
        <p class="card-text"></p>
        <button class="btn">按钮</button>
    </div>
    <div class="card">
        <img src="" alt="" class="card-img">
        <h3 class="card-title"></h3>
        <p class="card-text"></p>
        <button class="btn">按钮</button>
    </div>
    <div class="card">
        <img src="" alt="" class="card-img">
        <h3 class="card-title"></h3>
        <p class="card-text"></p>
        <button class="btn">按钮</button>
    </div>
</div>

快速创建表单

<!-- 输入: form>div.form-group*3>label{标签}+input.form-control + Tab -->
<form action="">
    <div class="form-group">
        <label for="">标签</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for="">标签</label>
        <input type="text" class="form-control">
    </div>
    <div class="form-group">
        <label for="">标签</label>
        <input type="text" class="form-control">
    </div>
</form>