掌握这些Emmet技巧，网页开发速度翻倍
如果你经常写网页代码，Emmet这个工具能让你的工作效率大大提高。它用简单的缩写就能生成完整的代码片段，省去很多重复输入的时间。
平常写代码时，我们经常要在不同位置来回切换光标。有了Emmet，你只需要按顺序写出缩写，按一下Tab键就能得到完整的代码。
来看个具体的例子。要生成下面这段html：
<div id="page">
<ul id="navigation">
<li><a href="">Item 1</a></li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
</ul>
</div>用Emmet只需要输入：#page>ul#navigation>li*5>a{Item $}，然后按Tab键。
HTML常用缩写技巧
掌握几个基本规则，你就能组合出各种复杂的HTML结构。
基本规则
> 生成子元素：
ul>li 生成：
<ul>
<li></li>
</ul>+ 生成相邻元素：
h1+p 生成：
<h1></h1>
<p></p>^ 返回上一层：
div>p>span^a 生成：
<div>
<p><span></span></p>
<a></a>
</div>* 重复多次：
li*3 生成：
<li></li>
<li></li>
<li></li>() 分组处理：
div>(header+footer) 生成：
<div>
<header></header>
<footer></footer>
</div>. 添加class：
.box 生成：
<div></div># 添加id：
#app 生成：
<div id="app"></div>{} 添加文本内容：
a{点击这里} 生成：
<a>点击这里</a>[] 添加属性：
input[type=text][placeholder=请输入] 生成：
<input type="text" placeholder="请输入">$ 自动编号：
li.item-$*3 生成：
<li></li>
<li></li>
<li></li>常用代码模板
! 或 html:5 生成完整的HTML5页面结构
meta:vp 生成移动端viewport设置：
<meta name="viewport" content="width=device-width, initial-scale=1.0">link:css 引入CSS文件：
<link rel="stylesheet" href="style.css">script:src 引入JS文件：
<script src=""></script>input:text 生成文本输入框：
<input type="text">button.btn 生成带样式的按钮：
<button class="btn">Submit</button>实际应用例子
生成带5个项目的列表：
ul>li*5{列表 $}得到：
<ul>
<li>列表 1</li>
<li>列表 2</li>
<li>列表 3</li>
<li>列表 4</li>
<li>列表 5</li>
</ul>生成3行2列的网格布局：
.container>.row.row-$*3>.col.col-${内容 $}*2这个缩写能快速创建响应式布局需要的HTML结构。
CSS缩写技巧
CSS的Emmet缩写主要基于属性名的首字母，用多了自然就记住了。
盒模型相关
m10 → margin: 10px;
p10-20 → padding: 10px 20px;
w100p → width: 100%;
h50vh → height: 50vh;
minw200 → min-width: 200px;定位布局
psa → position: absolute;
psf → position: fixed;
df → display: flex;
jcc → justify-content: center;
aic → align-items: center;
t0 → top: 0;
z10 → z-index: 10;文字样式
c#333 → color: #333;
tac → text-align: center;
fwb → font-weight: bold;
fz16 → font-size: 16px;
lh1.5 → line-height: 1.5;背景边框
bg#fff → background: #fff;
bdc#000 → background-color: #000;
bd1-s#ccc → border: 1px solid #ccc;
bdrs5 → border-radius: 5px;其他常用
ovh → overflow: hidden;
cup → cursor: pointer;
op0.5 → opacity: 0.5;
trs → transition: all 0.3s;配置和使用
在VS Code中，Emmet默认支持HTML和CSS文件。如果你用vue或JSX，需要在设置里添加：
{
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue": "html",
"vue-html": "html"
}
}写完缩写后，按Tab键展开。如果Tab键不起作用，可以试试Ctrl+E（Windows）或Cmd+E（Mac）。
实用建议
从简单开始：先掌握最常用的几个缩写，如 .class、#id、>、+、*
逐步复杂：熟练后再学习分组()和上级^的使用
CSS记忆技巧：
尝试属性名的首字母组合
记不住时试试发音首字母
多用就形成肌肉记忆了
实际项目练习：在真实项目中多用，比单纯记忆效果更好
常见问题解决
如果缩写不生效，检查以下几点：
确保在正确的文件类型中使用
检查编辑器是否支持Emmet
确认缩写语法是否正确
尝试按Ctrl+Space查看提示
HTML的Emmet规则比较统一，容易掌握。CSS缩写虽然多，但常用的也就几十个，用多了自然记住。不常用的不必强记，需要时查一下就行。
花点时间学习Emmet很值得，它能显著减少代码输入时间，让你更专注于逻辑和创意。开始可能觉得不习惯，但用一两天后你就会发现离不开它了。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
