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


音樂藝文

職場產業

學習

<div class="draft-block draft--p left">用Emmet這個套件，可以用標籤與快速鍵，建立一個完整的HTML。可以有效率的寫程式。</div>
<div class="draft-block draft--p left">在VS Code、Sublime Text 還有線上網站 codepen 、JS Bin、JS Fiddle 都可以使用。</div>
<div class="draft-block draft--p left">1. &gt;：建立裡面的子層。</div>
<div class="draft-block draft--p left">例：ul&gt;li&gt;p</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">2. +：建立連著的兄弟層。</div>
<div class="draft-block draft--p left">例：div+h1+h2</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">3. *：建立重複的標籤。</div>
<div class="draft-block draft--p left">例：ul&gt;li*3</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">4. ^：建立與上一層連著的兄弟層。</div>
<div class="draft-block draft--p left">例1：div+div&gt;p&gt;span+em^bq</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">例2：div+div&gt;p&gt;span+em^^bq</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">5. {}：標籤內的文字。</div>
<div class="draft-block draft--p left">例：ul&gt;li*3{清單}</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">6. []：輸入屬性。</div>
<div class="draft-block draft--p left">例：a[href=”#”]</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">7. .：建立class命名；#：建立id命名。</div>
<div class="draft-block draft--p left">例1：.box</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">例2：#name</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">8. $：建立編號。</div>
<div class="draft-block draft--p left">例1：ul&gt;li*3{編號：$}</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">例2：h$[title=item$]*2</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">例3：ul&gt;li.item$$$*2</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">9. $@-：編號降冪。</div>
<div class="draft-block draft--p left">例1：ul&gt;li*3{編號：$@-}</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">例2：ul&gt;li.item$@3*3</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">10.  ()：grouping。</div>
<div class="draft-block draft--p left">例1：div&gt;(header&gt;ul&gt;li*2&gt;a)+footer&gt;p</div>
<div class="draft-block draft--p left">📷</div>
<div class="draft-block draft--p left">例2：(div&gt;dl&gt;(dt+dd)*3)+footer&gt;p</div>
<div class="draft-block draft--p left">📷</div>

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

在VS Code、Sublime Text 還有線上網站 codepen 、JS Bin、JS Fiddle 都可以使用。

Emmet，寫HTML簡單又快速