Emmet语法
HTML结构
- 输入
1
! - 补全
1
2
3
4
5
6
7
8
9
10
11<!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>
元素
语法
- 直接输入标签名
示例
- 输入
1
2
3div
p
span - 补全
1
2
3<div></div>
<p></p>
<span></span>
class 与 id
语法
- class:
. - id:
#
示例
- 输入
1
2div.container
p#1 - 补全
1
2<div class="container"></div>
<p id="1"></p>
组合
- 输入
1
2div.container.fl
div.item#first_item - 补全
1
2<div class="container fl"></div>
<div class="item" id="first_item"></div>
属性
其他属性
语法
[属性名="属性值"]
示例
- 输入
1
2div[name="main" data="114"]
a[href="www.baidu.com"] - 补全
1
2<div name="main" data="114"></div>
<a href="www.baidu.com"></a>
4.重复
语法
标签*n
示例
- 输入
1
2div.container>div.item*6
ul>li*3 - 补全
1
2
3
4
5
6
7
8
9
10
11
12
13<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
编号
语法
- 使用
$ - 配合
*使用$表示从1开始自动递增的编号
示例
- 输入
1
ol>li.item$*4 - 补全
1
2
3
4
5
6<ol>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
</ol>
补充
多位数字(一个
$代表一位数字, 连写多个会补0)- 输入
1
ul>li.item$$$*6 - 补全
1
2
3
4
5
6
7
8<ul>
<li class="item001"></li>
<li class="item002"></li>
<li class="item003"></li>
<li class="item004"></li>
<li class="item005"></li>
<li class="item006"></li>
</ul>
- 输入
逆序 ($@-)
- 输入
1
ul>li.item$@-*6 - 补全
1
2
3
4
5
6
7
8<ul>
<li class="item6"></li>
<li class="item5"></li>
<li class="item4"></li>
<li class="item3"></li>
<li class="item2"></li>
<li class="item1"></li>
</ul>
- 输入
起始 ($@N)
- 输入
1
ul>li$@4*3 - 补全
1
2
3
4
5<ul>
<li4></li4>
<li5></li5>
<li6></li6>
</ul>
- 输入
7.文本({})
语法
示例
- 输入
1
- 补全
1
节点
3.子节点(>)、上级节点(^)、兄弟节点(+)
3.1子节点(>)
3.2上级节点(^)
3.3兄弟节点(+)
8.分组(())
语法
示例
- 输入
1
- 补全
1
综合：