Emmet语法详解

什么？一名前端工程师居然不会 Emmet 语法！！！ 还不赶紧学起来？

认识Emmet语法

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具.

• 在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码, 如果手动来编写效果会非常低.

• VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码

常见Emmet语法

• !和html:5可以快速生成完整结构的html5代码

• >（子代）和 +（兄弟）

• *（多个）和 ^（上一级）

  <!-- ul>li*10 -->
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  
    <!-- div>span+p+(h1>span+i)+p -->
    <!-- div>span+p+h1>span+i^p -->
    <div>
      <span></span>
      <p></p>
      <h1><span></span><i></i></h1>
    </div>
    <p></p>
  

• 属性(id属性、class属性、普通属性) {}（内容）

  <!-- a[href="http://www.baidu.com"]{百度一下} -->
  <a href="http://www.baidu.com">百度一下</a>
  
  <!-- div#header+div#main>.container>a[href] -->
  <div id="header"></div>
  <div id="main">
    <div class="container"><a href=""></a></div>
  </div>
  
  <!-- ul>li{列表内容$}*10 -->
  
  <!-- ul>li.item{列表元素$}*5 -->
  <ul>
    <li class="item">列表元素1</li>
    <li class="item">列表元素2</li>
    <li class="item">列表元素3</li>
    <li class="item">列表元素4</li>
    <li class="item">列表元素5</li>
  </ul>
  

• CSS用法