本文主要是介绍Vscode 速写 HTML，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
Vscode 速写 HTML
文章目录
- Vscode 速写 HTML
- 1. 快速生成HTML结构
- 2. 快速生成标签
- 3. 生成指定标签
- 4. 插件
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 WorldHello WorldHello 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 插件
安装该插件后, 资源管理器中会自动在文件前加上图标
这篇关于Vscode 速写 HTML的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
