Emmet 语法

快速生成HTML结构语法

1 生成标签：直接输入标签名，按tab键即可

 输入 div 之后直接按tab键
<div></div>

2 生成多个相同标签，在标签后面加上 * num 就可以了，num 是想要生成标签的数量。

 输入 div*3 之后直接按tab键
<div></div>
<div></div>
<div></div>

3 生成有父子级关系的标签，可以用 >

输入 div>p 之后直接按tab键
<div>
    <p></p>
</div>

4 生成有兄弟关系的标签,用 + 就可以了。

输入 div+p 之后直接按tab键
<div></div>
<p></p>

5 生成带有类名或者id名字的标签，直接写 [标签名]#id名或者 [标签名].类名1[.类名2 ...] 键就可以了，不写标签名默认生成 div 标签。

输入 #box 之后直接按tab键
<div id="box"></div>

输入 p#box 之后直接按tab键
<p id="box"></p>

输入 .nav 之后直接按tab键
<div class="nav"></div>

输入 p.nav1.nav2 之后直接按tab键
<p class="nav1 nav2"></p>

6 生成同时带有 id名和类名的标签。

输入 h1.title#header 之后直接按tab键
<h1 class="title" id="header"></h1>

7 在生成的标签内部写内容可以用 { }。

输入 div{这是一个盒子} 之后直接按tab键
<div>这是一个盒子</div>

8 自增符号 $。

生成的 div 类名是有顺序的，输入 .box$*3 之后直接按tab键
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

在生成的标签内部同时写入序号，输入 .box$*3{$} 之后直接按tab键
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>

在生成的标签内部同时写入序号，输入 .box$*3{这是第$$个盒子} 之后直接按tab键
<div class="box1">这是第01个盒子</div>
<div class="box2">这是第02个盒子</div>
<div class="box3">这是第03个盒子</div>

9 优先级

输入 ul>li+p 之后直接按tab键
<ul>
    <li></li>
    <p></p>
</ul>

输入 (ul>li)+p 之后直接按tab键
<ul>
    <li></li>
</ul>
<p></p>

10 子节点（>），兄弟节点（+），上级节点（^）

div>ul>li>p
<div>
   <ul>
     <li>
       <p></p>
     </li>
   </ul>
 </div>

div+ul+p
```<div></div>
<ul></ul>
<p></p>

ul>li.test$*3 （$代表一位数，后面更上*数字就代表从1递增到填写的数字）
 <ul>
   <li class="test1"></li>
   <li class="test2"></li>
   <li class="test3"></li>
 </ul>

注意：

一个$ 代表一位数，
就是两位数了,以此类推就可以形成$(1),
(01),$$$(001)
如果想自定义从几开始递增的话就利用：$@+数字*数字
例如：ul>li.test$@3*3

<ul>
   <li class="test3"></li>
   <li class="test4"></li>
   <li class="test5"></li>
 </ul>

div>ul>li^div (这里的^是接在li后面所以在li的上一级，与ul成了兄弟关系,当然两个^^就是上上级）
<div>
   <ul>
     <li></li>
   </ul>
   <div></div>
 </div>

11 重复（*）

div*5（*号后面添加数字表示重复的元素个数）
 <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

12 分组（()）

div>(ul>li>a)+div>p
（括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关）-->
<div>
   <ul>
     <li><a href=""></a></li>
   </ul>
   <div>

13 文本（{}）

ul>li.test$*3{测试$} （{里面填写内容，可以和$一起组合使用哦}）
<ul>
  <li class="test1">测试1</li>
  <li class="test2">测试2</li>
  <li class="test3">测试3</li>
</ul>

14 组合

//使用"^"生成父类兄弟元素：
//输入：
ol>li+li+li^ol>li+li+li
//输出：
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>
<ol>
    <li></li>
    <li></li>
    <li></li>
</ol>

//使用"()"里外分组：
//输入：
div>((ol>li*3)*2)>ul>li*3
//输出：
<div>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

Emmet 语法

推荐阅读更多精彩内容