vscode之emmet语法快速生成代码
- 生成 HTML 文件结构体
html:5 tab键
<!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><div id="box"></div></body></html>
简化版
! tab键
2.生成一个 ID 为 box 的 div 容器
div#box tab键
3.生成一个 class 为 header 的 div 容器
div.header tab键
4.超级简化版
#box tab 快速生成一个 id 为 box 的 div 容器，默认元素是 div.box tab 快速生成一个 class 为 box 的 div 容器，默认元素是 div
5.快速生成一段文本内容,元素是 p
p{hello world} tab键
- 内容为：
hello world
6.快速生成代码段(包含)
- 快键方式:
div>p>a tab键
- 代码为:
<div><p><a></a></p></div>
7.快速生成代码段(兄弟)
- 快捷方式:
div+p+a tab键
- 代码为:
<div></div><p></p><a></a>
8.生成固定数量的元素
- 快捷方式:
a*5 tab键
- 代码为:
<a href=""></a><a href=""></a><a href=""></a><a href=""></a><a href=""></a>
9.生成一段代码
- 快捷方式:
ul>li*6>a{link} tab键
- 代码为:
<ul><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li><li><a href=""></a></li></ul>