Emmet 是 VS Code 内置工具，通过缩写快速生成 HTML/CSS 代码。输入 html:5 按 Tab 生成 HTML5 结构，div.container 创建带 class 的 div，ul>li*5 生成五个列表项，header>nav>a[href="#"]{链接$}*3 创建三链接导航，section#main.content 同设 id 与 class；CSS 中 m10 展为 margin:10px，pt15 为 padding-top:15px，bgc 设背景色，fw 加粗字体，d:n 隐藏元素；支持 +（兄弟）、>（子级）、^（上级）、*（重复）、$（编号）构建层级；可用 Ctrl+Shift+P 包裹内容，Ctrl+Alt+→ 扩展缩写，Ctrl+E 触发补全。熟练使用可大幅提升前端开发效率。
emmet 是 vs code 内置的强大工具，能通过简短的缩写快速生成完整的 html 结构和 css 代码。熟练掌握 emmet 可大幅提高前端开发效率。
HTML 中的常用 Emmet 缩写
在 HTML 文件中输入缩写后按 Tab 或 Enter 即可展开。
- html:5 → 生成标准 HTML5 文档结构
- div.container → 创建带有 class 的 div：
- ul>li*5 → 生成包含 5 个 li 的无序列表
- header>nav>a[href="#"]{链接$}*3 → 快速创建带文本和链接的导航菜单
- section#main.content → 同时设置 id 和 class：
CSS 中的 Emmet 加速技巧
在 CSS 文件中同样可以使用 Emmet 快速编写样式规则。
- m10 → 展开为 margin: 10px;
- pt15 → padding-top: 15px;
- bgc → background-color: #fff;
- fw → font-weight: bold;
- d:n → display: none;
嵌套与兄弟节点操作符
利用符号控制结构关系，精准构建 DOM 层级。
- +：兄弟节点，如 h1+p 生成标题后紧跟段落
- >：子元素，如 div>p>span 表示 span 是 p 的子元素
- ^：上一级，如 div>p>span+^a 让 a 与 p 并列
- *：重复次数，li.item$*3 生成三个带递增编号的 class
- $：计数占位符，支持 item$$$ 控制补零格式
实时反向匹配与编辑功能
Emmet 不仅能生成代码，还能提升编辑体验。
立即学习“前端免费学习笔记（深入）”；
- 在标签内输入 Ctrl+Shift+P → Emmet: Wrap with Abbreviation，可将选中内容包裹在新标签中
- 使用 Ctrl+Alt+→（Windows）扩展当前行的 Emmet 缩写
- 输入部分标签后，可用 Ctrl+E 触发自动完成建议
基本上就这些。多练习常见缩写组合，你会发现自己写页面骨架的速度快了好几倍。不复杂但容易忽略。
