1、前言

Emmet是一款文本编辑器/IDE的插件，用来快速生成复杂的HTML代码，只要掌握一些常用的语法（类似于CSS选择器），可以减少重复编码的工作。再配合上乱数假文（lorem）能够帮助我们快速开发网页。

2、语法使用

2.1、 调用方法

Emmet使用Tab作为自动生成HTML代码的触发器。当然也可以按回车键来触发（本人喜欢使用VsCode）

2.2、后代标签生成

Child: >

1
2
3
4
<!-- ul>li -->
 <ul>
   <li></li>
 </ul>

2.3、兄弟标签生成

Sibling:+

1
2
3
4
 <!-- span+span+span -->
<span></span>
<span></span>
<span></span>

2.4、上级元素标签生成

Climb-up: ^

1
2
3
<!-- p>span+em^span -->
<p><span></span><em></em></p>
<span></span>

2.5、 分组

Grouping:()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- div>(p+span)+div>a -->
   <div>
    <p></p>
    <span></span>
    <div><a href=""></a></div>
  </div>

  <!-- (div>dl>(dt+dd))+div>p -->
  <div>
     <dl>
       <dt></dt>
       <dd></dd>
     </dl>
   </div>
   <div>
     <p></p>
   </div>

2.6、重复多份标签

Multiplication: *

1
2
3
4
5
6
<!-- span*5 -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>

2.7、给重复标签编号

Item numbering: $

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 <!-- ul>li.item$*6 -->
  <ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
   <li class="item6"></li>
 </ul>
 
 <!-- h$[title=item$]{Header $}*6 -->
<h1 title="item1">Header 1</h1>
<h2 title="item2">Header 2</h2>
<h3 title="item3">Header 3</h3>
<h4 title="item4">Header 4</h4>
<h5 title="item5">Header 5</h5>
<h6 title="item6">Header 6</h6>

 <!-- ul>li.item$$$*6 -->
 <ul>
  <li class="item001"></li>
  <li class="item002"></li>
  <li class="item003"></li>
  <li class="item004"></li>
  <li class="item005"></li>
  <li class="item006"></li>
</ul>

 <!-- ul>li.item$@3*5 -->
  <ul>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
   <li class="item6"></li>
   <li class="item7"></li>
 </ul>

2.8、为标签设置ID名

id:#

1
2
<!-- #header -->
<div id="header"></div>

2.9、为标签添加类名

class: .

1
2
<!-- .size.center.container -->
 <div class="size center container"></div>

2.10、为标签添加自定义属性

Custom attributes:[]

1
2
<!-- div[attr='nihao'] -->
<div attr="nihao"></div>

2.11、为标签添加文本

text:{}

1
2
<!-- span{为是一个小猫咪} -->
<span>为是一个小猫咪</span>

3、乱数假文（lorem）

3.1 、段落 lorem+回撤/tab

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat earum id numquam sequi rem fugit incidunt dolorum, atque facilis, ab reiciendis dolor aspernatur? Ea amet commodi explicabo placeat dolorem maxime.

3.2、句子/单词 lorem6

Lorem ipsum dolor sit amet consectetur.

3.3 、生产多个段落活句子 lorem3 或者 lorem7\3 => lorem12*3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum odio dignissimos tempore.
Nobis sint illo ipsam beatae laudantium fugit, quisquam veritatis! Sapiente, cupiditate recusandae?
Alias unde libero repellat eveniet veniam nihil dicta magni vero, cupiditate minima?

4 、总结

本文并不是全部语法，这些只是本人在开发的过程中经常会用到的一些语法，能够帮助为开发开发网页，事半功倍。

原创文章：转载请联系我。未经允许，禁止转载。

如果能够帮助到你，是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧！！