close

Emmet這個套件,可以用標籤與快速鍵,建立一個完整的html。可以有效率的寫程式。

VS CodeSublime Text 還有線上網站 codepen JS BinJS Fiddle 都可以使用。

 

1  >:建立裡面的子層。

例:ul>li>p

emmet1.png

 

2  +:建立連著的兄弟層。

例:div+h1+h2

emmet2.png

 

 *:建立重複的標籤。

例:ul>li*3

emmet3.png

 

4  ^:建立與上一層連著的兄弟層。

1div+div>p>span+em^bq

emmet4.png

 

2div+div>p>span+em^^bq

 

emmet5.png

 

5  {}:標籤內的文字。

例:ul>li*3{清單}

emmet6.png

 

6  []:輸入屬性。

例:a[href=”#”]

emmet7.png

 

.:建立class命名;#:建立id命名。

1.box

emmet8.png

2#name

emmet9.png

 

$:建立編號。

1ul>li*3{編號:$}

emmet16.png

2h$[title=item$]*2

emmet10.png

3ul>li.item$$$*2

emmet11.png

 

 $@-:編號降冪

1ul>li*3{編號:$@-}

emmet12.png

2ul>li.item$@3*3

 

emmet13.png

10  ()grouping

1div>(header>ul>li*2>a)+footer>p

 

emmet14.png

2(div>dl>(dt+dd)*3)+footer>p

emmet15.png

arrow
arrow
    創作者介紹
    創作者 吉娜 3 的頭像
    吉娜 3

    GinaH-飾品、食旅

    吉娜 3 發表在 痞客邦 留言(0) 人氣()