【总结】Emmet缩写语法汇总,快速创建HTML+CSS结构和样式的快捷键有哪些?

什么是 Emmet 缩写语法？
Emmet（前身为 Zen Coding）是一种高效的 HTML/CSS 代码编写工具，通过特殊的缩写语法实现代码的快速生成。它使用类似 CSS 选择器的语法，让开发者只需输入少量字符即可生成复杂的 HTML/CSS 结构，大幅提升前端开发效率。

一.基础语法

1.生成基础元素

div+Tab/回车

2.层级关系>

ul>li+tab/回车

3.兄弟关系+

输入div>span+a,生成:

<div><span></span><a href=""></a></div>

4.重复元素*n

输入:ul>li*3>a
生成:

  <ul>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
    <li><a href=""></a></li>
  </ul>

5.分组操作符()

输入:(header>nav)+(main>article)+footer
生成:

  <header>
    <nav></nav>
  </header>
  <main>
    <article></article>
  </main>
  <footer></footer>

6.上级操作符^

输入:ul>li*3^div,生成:

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

7.ID选择器#和class选择器.

输入:div#wrap>div.item*3,生成:

  <div id="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

8.自定义属性[]

(没啥用,没有多简写)

输入:
	input[type="text" name="" id="" placeholder="请输入邮箱" value="" maxlength="10" minlength="5"]
生成:  
	<input type="text" name="" id="" placeholder="请输入邮箱" value="" maxlength="10" minlength="5">

输入:
	a[href="#" target="_blank" title="Home"]

生成: 
    <a href="#" target="_blank" title="Home"></a>

9.文本内容{}

输入:button{点击登录},生成:

<button>点击登录</button>

10.【重点】数字生成器$

输入：ul>li.item-$*3{我是第$件商品}，生成：

  <ul>
    <li class="item-1">我是第1件商品</li>
    <li class="item-2">我是第2件商品</li>
    <li class="item-3">我是第3件商品</li>
  </ul>

11.文本生成器lorem

输入:
    h4>lorem7
生成:
    <h4>Lorem, ipsum dolor sit amet consectetur adipisicing.</h4>
输入:
	p>lorem5
生成  
	<p>Lorem ipsum, dolor sit amet.</p>

二.高级用法

1.响应式导航栏

输入:nav.navbar>(a.brand{Logo})+(ul.menu>li*4>a[href="#"]{菜单$})
生成:

  <nav class="navbar">
    <a href="" class="brand">Logo</a>
    <ul class="menu">
      <li><a href="#">菜单1</a></li>
      <li><a href="#">菜单2</a></li>
      <li><a href="#">菜单3</a></li>
      <li><a href="#">菜单4</a></li>
    </ul>
  </nav>

2.Boostrape卡片布局

输入:div.row>div.col-md-4*3>div.card>img[src="img$.jpg"]+div.card-body>(h5{标题$}+p>lorem15)
生成:

<div class="row">
  <div class="col-md-4">
    <div class="card">
      <img src="img1.jpg" alt="">
      <div class="card-body">
        <h5>标题1</h5>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
      </div>
    </div>
  </div>
  <!-- 重复3次 -->
</div>

3.生成表单

输入:form.form>(.form-group>label[for=name]{姓名}+input#name.form-control)+(.form-group>label[for=email]{邮箱}+input#email.form-control[type=email])+button.btn.btn-primary{提交}
生成:

<form action="" class="form">
  <div class="form-group"><label for="name">姓名</label><input type="text" id="name" class="form-control"></div>
  <div class="form-group"><label for="email">邮箱</label><input type="email" id="email" class="form-control"></div>
  <button class="btn btn-primary">提交</button>
</form>

三.CSS缩写

m10-20 → margin: 10px 20px;
p5rem → padding: 5rem;
tac →  text-align: center;
df → display:flex
...等等,略....