掌握这些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很值得，它能显著减少代码输入时间，让你更专注于逻辑和创意。开始可能觉得不习惯，但用一两天后你就会发现离不开它了。

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/13146