最近參加了六角學院的切版班，想要提升自己的切版速度，分享幾個我常用的方式。
如果有更好或覺得不錯的方法，可以留言分享喔！ 需要你們打開我的新世界

基本用法

!=>創造html環境
#id =>代表id
.class=>代表calss
X>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/
歡迎跟我分享你常用的用法喔！