Emmet 语法完全指南：快速生成 HTML/CSS 代码

前言

Emmet 通过简洁的语法快速生成复杂的 HTML/CSS 结构。以下是核心语法解析及实战案例：

一、基础元素生成

语法规则：标签名 + Tab 键

二、符号核心功能

三、结构关系操作

1. 父子关系 (>)

Emmet 语法：

nav>ul>li*3>a{Item $}

生成的 HTML：

<nav>
  <ul>
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
  </ul>
</nav>

2. 兄弟关系 (+)

Emmet 语法：

div+p+span

生成的 HTML：

<div></div>
<p></p>
<span></span>

3. 分组 (())

Emmet 语法：

div>(header>ul>li*2>a)+footer>p

生成的 HTML：

<div>
  <header>
    <ul>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

四、高级实战案例

产品卡片生成

Emmet 语法：

div.card>img[src="product$.jpg"]+h3{产品0$}+p{99.9}+button{加入购物车}*3

生成的 HTML：

<div class="card">
  <img src="product1.jpg" alt="">
  <h3>产品01</h3>
  <p>99.9</p>
  <button>加入购物车</button>
  
  <img src="product2.jpg" alt="">
  <h3>产品02</h3>
  <p>99.9</p>
  <button>加入购物车</button>
  
  <img src="product3.jpg" alt="">
  <h3>产品03</h3>
  <p>99.9</p>
  <button>加入购物车</button>
</div>

五、CSS 快速生成

六、进阶技巧对照表

七、编辑器支持

• VSCode：原生内置支持
• Sublime Text：需安装 Emmet 插件
• WebStorm：原生内置支持
• 激活方式：输入缩写后按 Tab 或 Ctrl+E

💡 效率提示：通过组合 >、+、()、[]、{} 等符号，可快速构建响应式布局、导航菜单、表单等复杂结构，开发效率提升 5 倍以上。