鼠年全马铁人挑战 WEEK 12: 提升切版速度！Emmet原来可以这样用！

最近参加了六角学院的切版班，想要提升自己的切版速度，分享几个我常用的方式。
如果有更好或觉得不错的方法，可以留言分享喔！ 需要你们打开我的新世界

基本用法

!=>创造html环境#id =>代表id.class=>代表calssX>Y=>代表Y是X的子元素X+Y=>代表Y是X的同级元素。X{abc}=>代表标籤包含的内容是abc。

添加内容

在元素内添加内容可以使用{}

h1{标题}<h1>标题</h1>p{文章}<p>文章</p>

属性

#id<div id="id"></div>.class<div class="class"></div><!-- 可以累加在一起 -->.class.class1.class2<div class="class class1 class2"></div>

乘法

ul>li*3<ul>  <li></li>  <li></li>  <li></li></ul>

自动计数

ul>li*3{item$}<ul>  <li>item1</li>  <li>item2</li>  <li>item3</li></ul>

应用

 .class  <div class="class"></div>  section.calss  <section class="calss"></section>  section.class>ul>li*3  <section class="class">    <ul>      <li></li>      <li></li>      <li></li>    </ul>  </section>  section.class>ul>li*3>h2+p  <section class="class">    <ul>      <li>        <h2></h2>        <p></p>      </li>      <li>        <h2></h2>        <p></p>      </li>      <li>        <h2></h2>        <p></p>      </li>    </ul>  </section>  section.class>ul>li*3>h2{标题}+p{lorem}  <section class="class">    <ul>      <li>        <h2>标题</h2>        <p>lorem</p>      </li>      <li>        <h2>标题</h2>        <p>lorem</p>      </li>      <li>        <h2>标题</h2>        <p>lorem</p>      </li>    </ul>  </section>

以上是我比较常用的方法，如果想要深入了解可以参考
EMMET官方网站：http://docs.emmet.io/css-abbreviations/
欢迎跟我分享你常用的用法喔！