前端利器Emmet语法，让你编写代码又快速又舒服，快来白嫖学习吧！

Vscode中的 Emmet 语法… 可以快速帮我们生成一些代码，只需要学习里面的一点语法标准就可以了，这就和要使用markdown文档写文章，就需要学习markdown里面的语法标准。学会了, 用起来非常舒服，又快又装逼！

比如, 看着一段代码,

<div class="title">
    <ul>
      <li>
        <a href="">a>
        <span class="item1">我是快速生成的span>
        <span class="item2">我是快速生成的span>
        <span class="item3">我是快速生成的span>
        <span class="item4">我是快速生成的span>
        <span class="item5">我是快速生成的span>
      li>
    ul>
  div>

如果是正常的情况下, 就需要一个个来了， 手速快的朋友倒是无所谓， 分分钟的事情，但是事实上，这段代码仅仅是我编写一行代码实现的，诧异吧， 这就是Emmet语法的神奇之处. 如下:

div.title>ul>li>a+span{我是快速生成的}.item$5

Emmet:

----用最少的代码，做最多的事情， 不管是html，还是css, 都是一样可以做到!

---

html下的Emmet语法:

1. 生成子代:

使用 `>`  eg: div>p    

2. 生成兄弟节点

使用 `+` eg: div+span

上面二个合起来一起用 eg: div>p+span 效果如下:

<div>
  <p>p>
  <span>span>
div>

4. 生成多个元素

使用 `*`  eg:  span*5  

现在合起来使用一下 eg: div>ul>li>a>span*2+img 效果如下：

<div>
  <ul>
    <li>
      <a href="">
        <span>span>
        <span>span>
        <img src="" alt="">
      a>
    li>
  ul>
div>

6. 指向上一层

使用 `^`   eg:  div>span^p 

猜猜这样表示啥，嘿嘿

<div>
 <span>span>
div>
<p>p>

因为前面用了子代语法，想要在div同一层生成一个p， 只需要指向上一层，同时，我们还可以使用分组.

7. 分组语法

使用 () eg: div>(div+img) 使用括号将同一层的括起来， 这样效果还是一样的。

<div>
   <div>div>
   <img src="" alt="">
 div>

8. id生成

使用 `#`  eg:  div#box 

9. class生成

使用 `.` eg: div.box

上面结合起来使用 eg: div#box>div.item+h2.title

<div id="box">
   <div class="item">div>
   <h2 class="title">h2>
 div>

11. 属性生成

使用 `[]` eg: div[title] 
div[title]  ==>  

div[title="bg"]  ==> 


上面联合起来一起使用：  eg: div.box>ul>li.item[title="me"]

 

  

    

  


或者  div.box>ul>li.item[title="me"]*5


  

    

    

    

    

    

  

12. 内容生成

使用 `{}` 表示文字的输出  eg: div{hello world}

hello world

连起来使用  eg:  div>ul>li.item{你好啊}*5


  

    
你好啊
    
你好啊
    
你好啊
    
你好啊
    
你好啊
  

13. 数字生成

使用 `$` 表示数字生成  eg:  div.item$*5







使用 $ 必须使用*进行累计， 不然没用哦
连起来使用  eg:  div>ul>li.item${你好啊$}*5

 

  

    
你好啊1
    
你好啊2
    
你好啊3
    
你好啊4
    
你好啊5
  

---

隐式用法:

• 直接使用 .title 默认前面是 div 标签

• 同理， #title [title] 都表示前面是div标签

• ul>.item 在ul下面 默认表示跟着 li，

• tr>.item 在tr下面，默认表示跟着 td

css下的Emmet用法:

这里面没有太多的要求， 只有一句话，用每个单词的第一个字母就可以了，比如 bgc ==> background-color

或者用下+ 兄弟选择 , 比如, w200+h200px
width:200px; height:200px;