利用Emmet缩写在VS Code中极速编写HTML/CSS

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：<div class="container"></div>
• ul>li*5 → 生成包含 5 个 li 的无序列表
• header>nav>a[href="#"]{链接$}*3 → 快速创建带文本和链接的导航菜单
• section#main.content → 同时设置 id 和 class：<section id="main" class="content"></section>

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 不仅能生成代码，还能提升编辑体验。

ProWritingAid

AI写作助手软件

114

查看详情

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

• 在标签内输入 Ctrl+Shift+P → Emmet: Wrap with Abbreviation，可将选中内容包裹在新标签中
• 使用 Ctrl+Alt+→（Windows）扩展当前行的 Emmet 缩写
• 输入部分标签后，可用 Ctrl+E 触发自动完成建议

基本上就这些。多练习常见缩写组合，你会发现自己写页面骨架的速度快了好几倍。不复杂但容易忽略。

以上就是利用Emmet缩写在VS Code中极速编写HTML/CSS的详细内容，更多请关注php中文网其它相关文章！