Emmet语法的使用

前言

  1. Emmet语法的前身是Zen coding,它使用缩写来提高HTML/CSS的编写速度,VScode内部已经集成该语法。

  2. Emmet是⼀款⽂本编辑器/IDE的插件，⽤来快速⽣成复杂的HTML代码，只要掌握⼀些常⽤的语法（类似于CSS选择器），就可以减少重复编码的⼯作。

  3. 做什么?

    • 快速生成HTML结构语法
    • 快速生成CSS样式语法

HTML中的使用

如何使用

  1. 调用方法

    Emmet使⽤Tab键作为⾃动⽣成HTML代码的触发器。

  2. 使用方法

    输⼊完⽣成HTML的缩写语句后，按下Tab，即可⽣成对应的HTML代码

生成标签

生成HTML框架

  • 在VScode中 新建一个html文件直接输入!(英文)，按下回车键即可生成html框架
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 实例
!
# 结果:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

生成一对标签

  • 直接输入标签的名称按Tab标签即可
1
2
3
4
# 实例
div
# 结果:
<div></div>

生成多个标签

  • 给标签加上*即可
  • 比如div*3 就可以快速生成3个div标签

注意: div*3 中间不能有空格!

1
2
3
4
5
6
# 实例
div*3
# 结果:
<div></div>
<div></div>
<div></div>

生成父级标签

  • 如果有父子级的标签可以用>

注意: ul>li 中间不能有空格!

1
2
3
4
5
6
# 实例
ul>li
# 结果:
<ul>
    <li></li>
</ul>

生成兄弟标签

  • 如果有兄弟关系的标签，可以使用+

    注意: div+p 中间不能有空格!

1
2
3
4
5
# 实例
div+p
# 结果:
<div></div>
<p></p>

生成类名标签

默认输入

  • 如果想生成类名或者带有id名字的
    • 直接写.demo或者#nav按下Tab键即可

注意: 默认为div标签

1
2
3
4
5
# 实例
.demo或者#nav
# 结果:
<div class="demo"></div>
<div id="nav"></div>

自定义标签输入

  • 如果想生成自定义的标签输入:
  • 在.demo或者#nav前面输入想要的标签即可
1
2
3
4
5
# 实例
p.demo或者table#nav
# 结果:
<p class="demo"></p>
<table id="nav"></table>

使用自增符号

  • 如果生成的div类名是有顺序的,可以使用增项符号$
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 实例
.demo$*3
# 结果:
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
# 扩充
p#nav$*5
# 结果:
<p id="nav1"></p>
<p id="nav2"></p>
<p id="nav3"></p>
<p id="nav4"></p>
<p id="nav5"></p>

标签内部内容

  • 如果想要在生成的标签内部写内容可以用{}来表示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 实例
div{这里是内容}
# 结果
<div>这里是内容</div>

# 扩充
div{这里是内容}*3
<div>这里是内容</div>
<div>这里是内容</div>
<div>这里是内容</div>

# 扩充2
div{$}*3
# 结果:
<div>1</div>
<div>2</div>
<div>3</div>

CSS中的使用

快速生成CSS样式语法