如何用VSCode的Emmet功能快速编写HTML？

VSCode内置Emmet功能，输入!或html:5按Tab生成HTML5结构；用>创建父子级元素，+添加同级元素，*.#分别定义类、ID和属性，结合$实现重复与编号，大幅提升HTML编写效率。

VSCode 内置了强大的 Emmet 功能，能让你用简写语法快速生成完整的 HTML 结构，大幅提升编码效率。只要输入缩写并按下 Tab 或 Enter 键，就能自动生成对应的标签。

1. 生成基本HTML结构

在新建的 .html 文件中输入 ! 或 html:5，然后按 Tab 键，Emmet 会自动生成标准的 HTML5 文档结构：

• ! → 快速生成包含 doctype、html、head、body 的完整页面框架
• html:5 → 同样生成 HTML5 模板，语义清晰

2. 快速创建嵌套元素

使用 > 表示父子关系，+ 表示同级并列，> 和 + 可组合使用：

• div>ul>li*3 → 生成一个 div，里面嵌套 ul，ul 中有 3 个 li
• header+h1+p → 生成三个同级元素：header、h1、p
• section>div>p> → 多层嵌套，快速构建复杂布局

3. 添加类名、ID 和属性

通过 . 和 # 分别添加 class 和 id，[attr] 添加自定义属性：

立即学习“前端免费学习笔记（深入）”；

知网AI智能写作

知网AI智能写作，写文档、写报告如此简单

38

查看详情

• div.container → 生成 <div class="container"></div>
• nav#main-nav → 生成带 ID 的 nav 元素
• a[href="#"][title="首页"] → 自定义属性也很方便
• input[type="text"].form-control → 组合 class 和属性

4. 重复生成元素（使用 *）

用 * 指定要生成的元素数量：

• li*5 → 生成 5 个 li 标签
• article.post*3 → 生成 3 个带 class 的 article

5. 实际应用技巧

结合项目需求，可以写出更高效的缩写：

• ul>li.item$*4 → 生成 4 个 li，class 为 item1 到 item4（$ 是计数符号）
• table>tr>td{$}*3 → 创建一行三列的表格，内容自动编号
• form>label+input[type="text"] → 快速搭建表单项

基本上就这些。熟练掌握 Emmet 缩写后，写 HTML 就像打字一样快，不需要反复敲闭合标签。VSCode 默认开启 Emmet，无需额外配置，直接在 HTML 文件中试试上面的例子就能看到效果。

以上就是如何用VSCode的Emmet功能快速编写HTML？的详细内容，更多请关注php中文网其它相关文章！