1.2.2.Emmet

  • 1.Search emmet

  • 2.emmet help us to auto complete:

    • 1.HTML5

          //html:+tab
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Document</title>
      </head>
      <body>
      </body>
      </html>

      • 2.Classes, IDs, TEXT, Atributes

          //p.foo
      <p class="foo"></p> 

  //p.foo#123
      <p class="foo" id="123"></p> 

  //a[href=#]
      <a href="#"></a>

  //h1{aa}
      <h1>aa</h1>

  //h1[aa]
      <h1 aa=""></h1>

3. Nesting
  //li>.time
  <li>
     <div class="time"></div>
  </li>

4. Grouping
  //grouping (p>h1)+(p>h1)
  <p>
     <h1></h1>
  </p>
  <p> 
     <h1></h1>
  </p>

5. Multiplication
  //ul>li*3
    <ul>
      <li></li>
      <li></li>
      <li></li>
    </ul>

6. Numbering
  //ul>li.item$*3
    <ul>
      <li class="item"></li>
      <li class="item"></li>
      <li class="item"></li>
    </ul>
Previous1.2.1.Package install controlNext1.2.3.HTML-CSS-JS Prettify

Last updated

Was this helpful?