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. 重复生成元素（使用 *）

用 html:50 指定要生成的元素数量：

• html:51 → 生成 5 个 li 标签
• html:52 → 生成 3 个带 class 的 article

5. 实际应用技巧

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

• html:53 → 生成 4 个 li，class 为 item1 到 item4（$ 是计数符号）
• html:54 → 创建一行三列的表格，内容自动编号
• html:55 → 快速搭建表单项

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