VSCode内置Emmet支持，通过缩写快速生成HTML和CSS代码；2. 输入如div.container或ul>li*5等缩写后按Tab即可展开为完整标签结构；3. CSS中m10、pb5等简写可自动转换为对应属性值；4. 使用$生成递增数字，Ctrl+E手动触发补全，支持嵌套与兄弟选择器；5. 熟练掌握后显著提升编码效率与准确性。
VSCode 内置了 Emmet 支持，能显著提升 HTML 和 CSS 的编写效率。只需输入简短的缩写，按 Tab 或 Enter 就能生成完整代码结构，特别适合快速搭建页面骨架或重复样式。
HTML 中的 Emmet 用法
在 .html 文件中，Emmet 提供了丰富的缩写语法来快速生成标签结构。
- div.container → 生成 <div class="container"></div>
- ul>li*5 → 创建包含 5 个列表项的无序列表
- a[href="#"]{点击这里} → 生成带链接文本的锚点
- header>nav>ul>li.item$*3 → 快速构建带编号类名的导航菜单
- #page-title → 生成带有 id 的元素：<div id="page-title"></div>
CSS 中的 Emmet 快捷方式
在 .css 文件里，Emmet 可以帮你快速写出常用属性值组合。
- m10 → 展开为 margin: 10px;
- pb5 → padding-bottom: 5px;
- fz14 → font-size: 14px;
- bgc → background-color: #fff;
- d:n → display: none;
提高效率的小技巧
掌握几个实用操作，让 Emmet 更顺手。
立即学习“前端免费学习笔记（深入）”；
- 输入缩写后按 Tab 是最常用的展开方式
- 使用 $ 符号生成递增数字，比如 section.article$*3
- 在任意位置按下 Ctrl+E（macOS 上是 CMD+E）可手动触发 Emmet 补全
- 支持嵌套操作：.box>.title+.content 能生成父子和兄弟结构
基本上就这些。熟练使用 Emmet 后，写前端代码会快很多，结构清晰也不容易出错。不复杂但容易忽略。
