Emmet语法规则

摘要：本文学习了如何通过Emmet工具快速编写HTML和CSS代码。

环境

Visual Studio Code 1.88.1

1 简介

Emmet是一个缩写扩展工具，用于快速编写HTML和CSS代码。它最初是为Web开发者设计的，以提高编写代码的效率。

通过Emmet可以快速生成复杂的页面结构，大多数编辑器也支持Emmet规则，但不同的编辑器在快捷键合具体实现上可能不同。

本文使用VSCode编辑器进行学习，需要在输入相应规则后使用Tab键让编辑器通过规则生成代码。并且在输入规则后，编辑器会显示可能用到的规则，十分方便。

2 规则

2.1 初始化页面

使用!可以生成基础的HTML页面：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  </head>
  <body>
  </body>
</html>

2.2 id和class

使用#和.可以生成元素，并给生成的元素设置id属性和class属性，类似元素选择器，支持组合使用：

html

<!-- div#main -->
<div id="main"></div>
<!-- div.main -->
<div class="main"></div>
<!-- div#head.box.item -->
<div id="head" class="box item"></div>

2.3 属性

使用类似属性选择器的写法可以生成指定属性的元素：

html

1 2	<!-- div[name="header"] --> <div name="header"></div>

2.4 关系

使用>生成子元素，使用^生成父元素，使用+生成兄弟元素：

html

<!-- div>p -->
<div>
  <p></p>
</div>
<!-- div>p>span -->
<div>
  <p><span></span></p>
</div>
<!-- span^div -->
<span></span>
<div></div>
<!-- div>p>span^p -->
<div>
  <p><span></span></p>
  <p></p>
</div>
<!-- div>p>span^^p -->
<div>
  <p><span></span></p>
</div>
<p></p>
<!-- div+p -->
<div></div>
<p></p>
<!-- div>p+p -->
<div>
  <p></p>
  <p></p>
</div>

2.5 重复

使用*生成相同多个元素：

html

<!-- p*2 -->
<p></p>
<p></p>
<!-- ul>li*3 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

2.6 编号

使用$的个数表示序号的位数，使用*表示元素的数量，使用@表示从几开始，默认从1开始：

html

<!-- p.p$*2 -->
<p class="p1"></p>
<p class="p2"></p>
<!-- ul>li*3 -->
<ul>
  <li class="item01"></li>
  <li class="item02"></li>
  <li class="item03"></li>
</ul>
<!-- ul>li.item$$@5*3 -->
<ul>
  <li class="item05"></li>
  <li class="item06"></li>
  <li class="item07"></li>
</ul>

2.7 内容

使用{}可以指定元素内容：

html

1 2	<!-- p{好好学习，天天向上。} --> <p>好好学习，天天向上。</p>

2.8 分组

使用()分隔规则，将内部规则作为整体，生成复杂结构时会用到：

html

<!-- div>ul>li#link$*2>a+p -->
<div>
  <ul>
    <li id="link1">
      <a href=""></a>
      <p></p>
    </li>
    <li id="link2">
      <a href=""></a>
      <p></p>
    </li>
  </ul>
</div>
<!-- div>(ul>li#link$*2>a)+p -->
<div>
  <ul>
    <li id="link1"><a href=""></a></li>
    <li id="link2"><a href=""></a></li>
  </ul>
  <p></p>
</div>