本文介绍了Vscode中快速创建HTML结构、生成标签、插入指定标签及利用插件提升效率的方法。通过快捷键和特殊输入组合，可以实现快速编写HTML，如使用!生成基本结构，用*n生成多个标签，用^>+构建父子、兄弟标签，用$自动计数等。此外，还推荐了LiveServer插件实时预览页面和vscode-icons插件美化文件图标。
Vscode 速写 HTML
1. 快速生成HTML结构
输入 ! 后按 Tab
<!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>
2. 快速生成标签
输入 元素 后按 Tab , 生成完整标签
3. 生成指定标签
用 *n 生成多个标签
输入 h2*3 后按Tab
<h2></h2>
<h2></h2>
<h2></h2>
用 ^ > + 生成父标签、子标签、兄弟标签
输入 div>p 后按Tab
<div>
<p></p>
</div>
输入 div>p^h2 后按Tab
<div>
<p></p>
</div>
<h2></h2>
输入 div>p+a^h2 后按Tab
<div>
<p></p>
<a href=""></a>
</div>
<h2></h2>
用 $ 自动计数
输入 p{第$章}*3 后按Tab,其中 {} 为文本操作符，可添加文字内容
<p>第1章</p>
<p>第2章</p>
<p>第3章</p>
用 [ ] # . 生成带属性的标签
- [ ] 用于添加任意属性
- # 用于添加id属性
- . 用于添加class属性
输入 h2[id="head1"] 后按Tab
<h2 id="head1"></h2>
输入 h2#head1 后按Tab
<h2 id="head1"></h2>
输入 p.paragraph 后按Tab
<p class="paragraph"></p>
用 ( ) 分组操作
输入 p>{Hello World}*3 后按Tab
<p>
Hello World
Hello World
Hello World
</p>
输入 (p>{Hello World})*3 后按Tab
<p>Hello World</p>
<p>Hello World</p>
<p>Hello World</p>
隐式标签 , 以[ ] # .开头
| 隐式标签 | 父级标签 |
|---|---|
| div | 无 |
| li | ul,ol |
| tr | table,tbody,thead,tfoot |
| td | tr |
| option | select,optgroup |
在Vscode中, 默认隐式标签均为<div>
输入 .aaa 后按Tab
<div class="aaa"></div>
输入 ul>.aaa 后按Tab
<ul>
<li class="aaa"></li>
</ul>
4. 插件
Live Server 插件
在 Vscode 中使用 Open with Live Server 打开 HTML 文件后
在 Vscode 中保存代码后, 会自动更新网页中的内容，不需要 刷新网页
vscode-icons 插件
安装该插件后, 资源管理器中会自动在文件前加上图标
扫一扫
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
