---
# System prepended metadata

title: Emmet用法
tags: [html, emmet, 程式語言]

---

## 為什麼要學習Emmet
> 我一開始學習寫程式語言時，常常會覺得寫程式很花時間，一方面是要思考程式的邏輯，另一個花時間的原因就是要打很多字，也因為當時英文打字不熟的原因，常常會打錯字，導致程式出現Bug，需要花更多的時間去找出到底是程式邏輯出了問題，還是我打錯字了。

---
Emmet這個套件，開始可以讓工程師用簡短的幾個縮寫字就完成一整行的程式編寫，減少漏寫、打錯的風險，也能大大增加程式寫作的速度。

---
## Emmet的寫法
### 1. ">" 建立子層
用>來建立子層
emmet寫法: `ul>li>p`加上tab鍵，就會變成
```
<ul>
  <li>
    <p></p>
  </li>
</ul>
```
![](https://hackmd.io/_uploads/B12CmW692.gif)


---

### 2. "+" 建立同層
用+來建立同層標籤
emmet寫法: `h2+p`加上tab鍵，就會變成
```
<h2></h2>
<p></p>
```
![](https://hackmd.io/_uploads/SJn9E-6cn.gif)


---

### 3. "\*" 號用來建立重複的標籤
用\*n來表示需要建立n個相同重複的標籤
emmet寫法: `p*5`加上tab鍵，就會變成
```
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
```
![](https://hackmd.io/_uploads/BJKV5b05h.gif)


---

### 4. 用"\{}"來插入標籤內的文字
將要放在標籤內的文字用大括號\{}緊接在標籤後方，就能直接將文字插入標籤中
emmet寫法: `h2{title text}`加上tab鍵，就會變成
```
<h2>title text</h2>
```
![](https://hackmd.io/_uploads/SJGViWC5h.gif)


---

### 5. 用"."及"#"來命名標籤的class或id
用"."(或"#")後面接著要命名的class(或id)名稱
emmet寫法: `h1.title`加上tab鍵，就會變成
```
<h1 class="title"></h1>
```
也可以不加html標籤，預設將會使用div標籤
emmet寫法: `#box`加上tab鍵，就會變成
```
<div id="box"></div>
```
![](https://hackmd.io/_uploads/SyBApW0c2.gif)


---

### 6. 用"$"來建立升冪編號
用"$"在任意位置建立升冪編號
emmet寫法: `ul>li*5.list0$`加上tab鍵，就會變成
```
<ul>
  <li class="list01"></li>
  <li class="list02"></li>
  <li class="list03"></li>
  <li class="list04"></li>
  <li class="list05"></li>
</ul>
```
![](https://hackmd.io/_uploads/By1JJzRqn.gif)


---

### 7. 用"$@-"建立降冪編號
與升冪編號相同，可在任意位置建立降冪編號
emmet寫法: `ul>li*5.list0$@-`加上tab鍵，就會變成
```
<ul>
  <li class="list05"></li>
  <li class="list04"></li>
  <li class="list03"></li>
  <li class="list02"></li>
  <li class="list01"></li>
</ul>
```
![](https://hackmd.io/_uploads/S1kJgfCq2.gif)


---

### 8. 用"[]"將屬性插入標籤中
可在[]中寫入屬性
emmet寫法: `img[src="https://fakeimg.pl/300/"]`加上tab鍵，就會變成
```
<img src="https://fakeimg.pl/300/" alt="">
```
![](https://hackmd.io/_uploads/SkYfMM0c2.gif)