Emmet通过缩写快速生成HTML和CSS代码，提升前端开发效率。输入div.container生成带class的div，#header创建id元素，ul>li5生成五个列表项，div>p>a实现嵌套结构，img[src=logo.png alt=Logo]添加自定义属性，h1{Hello World}插入文本内容；CSS中m10展开为margin:10px，p5-10生成padding，bgc输入background-color，fw900转font-weight，d:n写display:none，pos:a得position:absolute；结合.item$3生成编号类，section>(header>h1)+article+p构建复杂布局，input[type=text]*2批量创建表单，trf展开为transform，熟练使用可大幅减少手动输入。
Emmet 是前端开发中非常实用的工具，能通过简写快速生成完整的 HTML 和 CSS 代码，极大提升编码效率。它被集成在 VS Code、Sublime Text、Atom 等主流编辑器中，只需输入缩写并按下 Tab 键即可展开为标准代码。
HTML 常用 Emmet 快捷键
使用 Emmet 缩写可以快速构建 HTML 结构，无需重复输入标签。
-
div.container → 生成带有 class 的 div：
<div class="container"></div> -
#header → 创建带 ID 的元素：
<div id="header"></div> -
ul>li*5 → 生成包含 5 个列表项的无序列表：
<ul><li></li><li></li><li></li><li></li><li></li></ul> -
div>p>a → 快速嵌套结构：
<div><p><a href=""></a></p></div> -
img[src=logo.png alt=Logo] → 自定义属性写法：
<img src="logo.png" alt="Logo"> -
h1{Hello World} → 添加文本内容：
<h1>Hello World</h1>
CSS 属性快速输入技巧
Emmet 在 CSS 文件中同样高效，支持属性缩写和值自动补全。
-
m10 → 展开为
margin: 10px; -
p5-10 → 生成
padding: 5px 10px; -
bgc → 快速输入
background-color: #fff;（光标默认在颜色值上） -
fw900 → 转换为
font-weight: 900; -
d:n → 写出
display: none; -
pos:a → 得到
position: absolute;
提高效率的组合技巧
结合多个语法可进一步加快开发速度。
立即学习“前端免费学习笔记（深入）”；
-
.item$*3 → 生成带编号的类：
<div class="item1"></div><div class="item2"></div><div class="item3"></div> -
section>(header>h1)+article+p → 构建复杂布局：
快速生成包含 header、article 的结构 - input[type=text placeholder=Name]*2 → 批量生成表单元素
- 在 CSS 中使用 trf 可展开为
transform:，再加数值如 trf:rx →transform: rotateX();
熟练掌握 Emmet 缩写规则后，编写页面结构和样式几乎不再需要手动闭合标签或反复敲击属性名。日常开发中多练习这些快捷方式，能显著减少键盘输入，让注意力更集中在逻辑与设计上。
基本上就这些核心用法，记住几个高频缩写就能明显提速。工具虽小，积少成多，效率提升看得见。
