记录一些HTML的快捷键

自动补全

输入标签名字后按下tab键,可以自动补全

比如输入h1,然后按下tab,可以得到<h1></h1>

输入多个相同标签

可以直接使用乘法,比如h1*6,就可以生成一排h1

1
2
3
4
5
6
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>

增量补全

采用$符号,表示增量补全,比如h$*6可以得到

1
2
3
4
5
6
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

生成html基本架构

输入!然后按下tab键,可以在页面中生成一个html的基本架构

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>

CSS和JS链接

输入link:css,按下tab,可以生成css链接

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

输入script:js,按下tab,可以生成js链接

1
<script src=""></script>

标签信息生成

采用#可以生成id,.生成类class,用[]可以生成属性,{}生成包裹的内容

举个🌰

#circle1.circle[color]

生成<div id="circle1" class="circle"></div>

div[123]{123}

生成<div 123="">123</div>

标签间关系

>表示嵌套标签,+表示同级标签,^表示上级标签,(()可以让>嵌套多个同级块

举个🌰

div1>p+p^div2>p+p

就可以生成

1
2
3
4
5
6
7
8
<div1>
<p></p>
<p></p>
</div1>
<div2>
<p></p>
<p></p>
</div2>

div1>(div2>p+p)(p+p)

可以生成

1
2
3
4
5
6
7
8
<div1>
<div2>
<p></p>
<p></p>
</div2>
<p></p>
<p></p>
</div1>

生成随机文本

输入lorem会生成30个随机单词

输入lorem10会生成10个随机单词

注释

单行注释:ctrl+/