Emmet

  • 150
  • 0
  • Js
  • 2020-01-15

cheatsheet 

*****************************************************************************************************

>  父子元素

table > tr > td 按下Tab,自動產生 <table><tr><td></td></tr></table>

+  同層元素

table > tr > td + td 按下Tab,自動產生 <table><tr><td></td><td></td></tr></table>

*  數量元素

table > tr > td * 3 按下Tab,自動產生 <table><tr><td></td><td></td><td></td></tr></table>

[]  元素屬性 

lable[id=test] 按下Tab,自動產生 <label id="test"></label>

{}  元素內容

lable{test} 按下Tab,自動產生 <label>test</label>

[] 元素屬性 -> {} 內容 -> * count 數量

div[id="1"]{test}*2 按下Tab,自動產生 <div id="1">test</div ><div id="1">test</div >

$  自動編號

label[id=$]{test}*2 按下Tab,自動產生 <label id="1">test</label ><label id="2">test</label >

@  起始編號

label[id=$@3]{test}*2 按下Tab,自動產生 <label id="3">test</label ><label id="4">test</label >

.   訂義class名稱

td.load  按下Tab,自動產生 <td class="load"></td>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

ref : https://docs.emmet.io/cheat-sheet/