💡 前言

在編寫 HTML 或 CSS 時，許多新手常花費大量時間手動輸入 <div class="container"><ul class="nav">...</ul></div> 這些繁複的標籤，不僅容易漏寫關閉標籤（Closing Tag），效率也極低。VS Code 內建了強大的 Emmet 縮寫擴充（不需要額外安裝套件），能讓你透過極短的語法，在幾秒鐘內展開成完整的 HTML 結構！

🎯 本篇重點

1. 什麼是 Emmet？
2. HTML 常用 Emmet 縮寫與實務語法
3. CSS 常用 Emmet 縮寫
4. VS Code 中的 Emmet 進階設定（如：Auto Rename Tag）

⚡ 1. HTML 必學 8 大 Emmet 語法

在 HTML 檔案中輸入縮寫後，按下 Tab 鍵或 Enter 鍵即可瞬間展開：

**1. 生成 HTML5 標準骨架：! 或 html:5**

輸入 ! 並按 Tab，瞬間產生包含 <head>、meta、<body> 的完整 HTML5 文件結構。

**2. 建立子元素 (Child)：>**

• 語法：nav>ul>li
• 展開效果：

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

**3. 建立兄弟元素 (Sibling)：+**

• 語法：header+main+footer
• 展開效果：

<header></header>
<main></main>
<footer></footer>

**4. 乘法重複建立 (Multiply)：***

• 語法：ul>li*3
• 展開效果：建立含有 3 個 <li> 的列表。

5. 快速賦予 Class (.) 與 ID (#)

• 語法：div#header.container.main（若預設為 div，可簡寫為 #header.container.main）
• 展開效果：<div id="header" class="container main"></div>

**6. 自動流水號命名 (Item Numbering)：$**

• 語法：ul>li.item-$*3
• 展開效果：

<ul>
  <li class="item-1"></li>
  <li class="item-2"></li>
  <li class="item-3"></li>
</ul>

**7. 包裹文字內容 (Text)：{}**

• 語法：a.btn{點擊我}
• 展開效果：<a href="" class="btn">點擊我</a>

8. 綜合大招實戰（組合拳）

• 語法：ul.card-list>li.card-$*3>img+h3{標題 $}+p{內容簡介}
• 展開效果：瞬間產生含有 3 張卡片、帶有圖片、標題與內文的完整元件清單！

🎨 2. CSS 常用 Emmet 縮寫

Emmet 在 CSS 檔案中同樣極度強大，不需要完整輸入屬性全稱：

• pos:a ➔ position: absolute;
• d:f ➔ display: flex;
• jc:center ➔ justify-content: center;
• ai:center ➔ align-items: center;
• m:10-20 ➔ margin: 10px 20px;
• bgc ➔ background-color: #fff;
• w100p ➔ width: 100%;

🛠️ 3. 搭配建議套件：Auto Rename Tag

學會 Emmet 快速生成標籤後，如果後續想要修改 HTML 標籤名稱（例如將 <div> 改為 <section>），強烈建議安裝套件 Auto Rename Tag。

安裝後，只要你修改開始標籤 <section>，對應的關閉標籤 </section> 就會自動同步更改，完全不用怕漏改單邊導致 HTML 結構破壞！