Emmet 语法速成指南

适用场景 ：需要多次编写重复类似的代码结构时，emmet或许是一个不错的工具

核心价值：告别手敲重复代码，专注逻辑与创意

---

一、为什么你需要Emmet？------ 一个真实痛点

"写10个<li>要复制粘贴多次，写表单属性要手打type="text"

"写CSS时总忘记单位，还容易拼错margin和padding等等"

Emmet就是为解决这些问题而生，它用极简缩写自动展开为完整代码，让你的开发像写拼音一样流畅。

---

二、核心语法速通（附实战图解）

✅ 基础：标签+类+ID（最常用）

div.container#main → <div class="container" id="main"></div>

💡 技巧 ：.class 和 #id 顺序随意，Emmet会自动排序

✅ 嵌套：用 > 构建DOM树

nav>ul>li*3>a → 
<nav>
  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>
</nav>

✅ 兄弟元素：+ 和 ^

div+p^footer → 
<div></div>
<p></p>
<footer></footer>

🔥 重点 ：^ 让你"跳出"当前层级，回到父级添加兄弟

✅ 重复生成：*n + $（批量）

li.item$*4 → 
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>

✅ 带文本：{} 包裹内容

a[href="#"]{Home} → <a href="#">Home</a>

---

三、CSS补全

输入	输出	场景
w100	width: 100px;	设置宽度
m10	margin: 10px;	10px外边距
p10-20	padding: 10px 20px;	10px上/下，20px左/右
flex	display: flex;	Flex布局
pos:a	position: absolute;	绝对定位
bgc#fff	background-color: #fff;	白色背景

💡 ：单位默认px，加%/rem自动转换（如 w100% → width: 100%;）

---

四、VS Code 快捷操作

操作	快捷键	效果
展开缩写	Tab	最常用！ 1秒生成代码
查看所有缩写	Ctrl+E	弹出Emmet命令面板
手动触发	Ctrl+Shift+P → Emmet: Expand Abbreviation	万能备用方案

VS Code 默认已支持Emmet，直接用就行

---

五、实战

场景1：快速生成Bootstrap响应式布局

.container>.row>.col-md-6*2

→

<div class="container">
  <div class="row">
    <div class="col-md-6"></div>
    <div class="col-md-6"></div>
  </div>
</div>

场景2：生成导航菜单（带链接）

nav>ul>li>a[href="#"]{Home}^li>a[href="#about"]{About}^li>a[href="#contact"]{Contact}

→

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#contact">Contact</a></li>
  </ul>
</nav>

场景3：写登录表单（带属性）

form>label{Username}+input[type="text" name="username"]+label{Password}+input[type="password" name="password"]+button[type="submit"]{Login}

→

<form>
  <label>Username</label>
  <input type="text" name="username">
  <label>Password</label>
  <input type="password" name="password">
  <button type="submit">Login</button>
</form>

---

六、指南

1. 不要试图记住所有语法 ：重点掌握 嵌套(>) 、重复(*) 、CSS补全 三大核心即可
2. 别在JS/Vue文件里用：Emmet在HTML/CSS文件中效果最佳
3. 别手写href="#" ：用 a[href="#"]{Link} 一键生成

---