一分钟学会使用Emmet插件

官方语法说明
原标题：emmet插件快捷键语法精粹

---

最有用的只有六个，分别是：

语法：

• 
  
• > 子级关系
• 
  
• + 同级关系
• 
  
• 重复 ul>li5
• 
  
• # id
• 
  
• . class
• 
  
• [] 属性td[title="Hello world!" colspan=3]
• 
  

代码示例：

<!-- child 子级关系-->
div>ul>li
<div>
    <ul>
        <li></li>
    </ul>
</div>


<!-- sibling 同级关系 -->
div+p+foot
<div></div>
<p></p>
<foot></foot>


<!-- 重复 -->
ul>li*5
<ul> 
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>


<!-- # id -->
div#esbtn
<div id="esbtn"></div>


<!-- .class -->
div.navbar
<div class="navbar"></div>


<!-- [] 属性 -->
img[title='pic']
<img src="" alt="" title="pic">