掌握 emmet 语法，小白也能高效编码

前言

Emmet是一种快速书写 HTML 和 CSS 代码的工具，它的前身是 Zen coding，使用缩写来提高 HTML/CSS的编写速度。它提供了一种类似缩写的方式来生成 HTML 和 CSS 代码，减少了重复输入和手动编写的工作量。同时，它还有自动生成样式、快速生成内容占位符等多种实用功能，帮助进行前端开发。

语法内容

快速生成html结构语法

1. 要生成单个标签，可以直接输入：标签再按tab键。如：

   输入div时再按tab键会生成
   <div></div>

2. 要生成多个相同的标签，可以输入 ：标签*数目。如：

   输入div*5时可生成
   <div></div>
   <div></div>
   <div></div>
   <div></div>
   <div></div>

3. 快速生成有id属性的标签，可以输入：标签#id名称。（id是唯一的）如：

   输入div#nav生成
   <div id="nav"></div>

4. 快速生成有class属性的标签，可以输入：标签.类名。（class可以是不唯一的）如：

   输入div.nav可生成
   <div class="nav"></div>
   输入div#header.nav生成
   <div id="header" class="nav"></div>
   输入div.class.nav生成（可以一直加.）
   <div class="class nav"></div>

5. 快速生成标签的嵌套，可以输入：标签 > 标签。如：

   输入ul>li>a生成
   <ul>
       <li>
           <a href=""></a>
       </li>
   </ul>
   输入ul>li*5生成
   <ul>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
       <li></li>
   </ul>

6. 快速生成同级标签，可以输入：标签+标签。如：

   输入div+p生成
   <div></div><p></p>

7. 快速生成上级标签，可以输入：标签^标签。如：

   输入div^p生成
   <p></p>
   <div></div>
   输入div+ul>li>a+p^div生成
   <div></div>
   <ul>
       <li>
           <a href=""></a>
           <p></p>
       </li>
       <div></div>
   </ul>
   输入div+ul>li>a+p^^div生成
    <div></div>
   <ul>
       <li>
           <a href=""></a>
           <p></p>
       </li>
   </ul>
   <div></div>

   由此可见^^表示上上级，以此类推。

8. 分组：（）

   括号里面的内容为一个代码块，表示与括号内部嵌套和外面的的层级无关

   输入(div>ul>li+a)+div生成
   <div>
       <ul>
           <li></li>
           <a href=""></a>
       </ul>
   </div>
   <div></div>

9. 自增符号（默认从1开始自增）：&

   输入ul>li.class$*3生成
    <ul>
        <li class="class1"></li>
        <li class="class2"></li>
        <li class="class3"></li>
   </ul>
   输入ul>li.class$$*3生成（一个$表示一位数）
    <ul>
        <li class="class01"></li>
        <li class="class02"></li>
        <li class="class03"></li>
   </ul>
   输入h$*3生成
   <h1></h1>
   <h2></h2>
   <h3></h3>

   在$后面加@-表示倒序自增

   输入h$@-*3生成
   <h3></h3>
   <h2></h2>
   <h1></h1>

   在$后面加@2表示从2开始自增

   输入h$@2*3生成
   <h2></h2>
   <h3></h3>
   <h4></h4>

10. 快速生成自定义属性和属性值：标签[属性="属性值"]。如：

    输入span[title="123"]生成
    <span title="123"></span>
    输入span[title="123" class="aaa"]生成（用空格隔开）
    <span title="123" class="aaa"></span>
    输入[title="123" class="aaa"]生成
     <div title="123" class="aaa"></div>

11. 快速生成文本：{}

    输入div{aaa}生成
    <div>aaa</div>

12. 隐式标签

    当没有指明标签时，默认为div标签

    输入.nav生成
    <div class="nav"></div>
    输入#nav生成
    <div id="nav"></div>
    输入[class="nav"]生成
    <div class="nav"></div>

    当没有指明标签时，而且有父子级关系时

    li可以在ul和ol使用，如：
    输入ul>.class$*5生成
    <ul>
        <li class="class1"></li>
        <li class="class2"></li>
        <li class="class3"></li>
        <li class="class4"></li>
        <li class="class5"></li>
    </ul>

快速生成css样式

快速输入css样式的方法是输入样式的缩写再按tab键快速生成，如：

w200按tab可以生成width: 200px;

1h26按tab可以生成line-height: 26px;

tac可快速生成text-align:center;

lh20px可快速生成line-height:20px;

ti2em可快速生成text-indent:2em;

tdn可快速生成text-decoration:none;

等等。

总结

Emmet语法可以帮助我们提高代码效率，但是最重要的还是要多练。