# Emmet 教學

## 1. 認識Emmet

EMMET(官網 https://emmet.io/)是一個支援眾多程式編輯器的外掛，透過EMMET，最重要的是它可以讓你不需要再死記HTML或CSS關鍵字，減少不必要的coding錯誤，加速整個網頁開發的工作流程，另外還可以讓你的小拇指獲得適當的休息（打角括號<>時要常常按Shift），而且EMMET的寫法和CSS選擇器相似，學習上非常容易！

Notepad++安裝Emmet擴充 https://hackmd.io/@eDreamer/B1NC0LFPF

## 2. 基本架構寫法

EMMET和其他插件最不一樣的地方在於它的語法是有”邏輯的”，而且它的寫法和CSS的選擇器非常類似。

### 2.1 操作方式 - Tab

EMMET的使用非常簡單，只要輸入EMMET的關鍵字後，按下TAB鍵，即可產生相對應的語法。但要注意的是，關鍵字之間不能為了整潔或其他目的而使用空格。

### 2.2 元素標籤

輸入任何HTML的元素標籤之後按TAB鍵就會完成該元素的輸入，例如：

div
p

<div></div>
<p></p>

## 3. 階層寫法

### 3.1 Child：往下一層 >

div>ul>li

<div>
    <ul>
        <li></li>
    </ul>
</div>

### 3.2 Sibling：同一層 +

div+p+h3

<div></div>
<p></p>
<h3></h3>

### 3.3 練習-1

想要用Emmet完成以下的內容

<div></div>
<div>
    <p><span></span><em></em></p>
</div>

答案 `div+div>p>span+em`

### 3.4 Climb-up：回上一層 ^

div>h3+p^div

<div>
    <h3></h3>
    <p></p>
</div>
<div></div>

### 3.5 Multiplication：重複 *

ul>li*3

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

### 3.6 練習-2

<nav>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</nav>
<article></article>

答案 `nav>ul>li*4^^article`

## 4. 屬性寫法

### 4.1 id 與 class ：# .

div.warp>div#header>p.a1.a2

<div class="warp">
    <div id="header">
        <p class="a1 a2"></p>
    </div>
</div>

### 4.2 Attribute：[ ]

img[src="test.jpg" alt="test"]

<img src="test.jpg" alt="test">

### 4.3 練習-3

<form action="" name="test" method="post">
    <input type="text" class="text">
    <input type="text" class="text">
</form>

答案：``form[name="test" method="post"]>(input[type='text'].text)*2``

## 5. 內容寫法

### 5.1 編號：$

ul>li.item$*4

<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
</ul>

### 5.2 設定編號起始值：@

ul>li.item$@5*4

<ul>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
    <li class="item8"></li>
</ul>

### 5.3 內容：{ }

p{This is a pen}

<p>This is a pen</p>

### 5.4 練習-4

<article id="article">
    <p><a href="test.html">A link</a></p>
</article>

article#article>p>a[href="test.html"]{A link}

>參考網址：https://pjchender.blogspot.com/2016/07/emmet.html