记录一些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+/