---
# System prepended metadata

title: 附錄

---

# 附錄

## A. HTML 標籤速查表

### 文件結構標籤

| 標籤         | 說明                   | 範例                              |
| ------------ | ---------------------- | --------------------------------- |
| `<!DOCTYPE>` | 文件類型聲明           | `<!DOCTYPE html>`                 |
| `<html>`     | HTML 文件根元素        | `<html lang="zh-Hant">`           |
| `<head>`     | 文件頭部(meta 資訊)    | `<head>...</head>`                |
| `<body>`     | 文件主體(顯示內容)     | `<body>...</body>`                |
| `<title>`    | 文件標題               | `<title>我的網站</title>`         |
| `<meta>`     | 元資料                 | `<meta charset="UTF-8">`          |
| `<link>`     | 外部資源連結           | `<link rel="stylesheet" href="">` |
| `<script>`   | JavaScript 腳本        | `<script src="app.js"></script>`  |
| `<style>`    | 內部樣式表             | `<style>/* CSS */</style>`        |

---

### 語意結構標籤

| 標籤        | 說明                 | 用途                     |
| ----------- | -------------------- | ------------------------ |
| `<header>`  | 頁首或區塊標題       | 網站標誌、導覽列         |
| `<nav>`     | 導覽區塊             | 主選單、麵包屑           |
| `<main>`    | 主要內容(唯一)       | 頁面核心內容             |
| `<article>` | 獨立完整的內容單元   | 部落格文章、新聞         |
| `<section>` | 主題性區段           | 文章章節、功能區塊       |
| `<aside>`   | 側邊欄或補充資訊     | 相關連結、廣告           |
| `<footer>`  | 頁尾或區塊結尾       | 版權資訊、聯絡方式       |
| `<figure>`  | 圖片或圖表容器       | 搭配 `<figcaption>` 使用 |

---

### 文字內容標籤

| 標籤           | 說明             | 範例                        |
| -------------- | ---------------- | --------------------------- |
| `<h1>`~`<h6>`  | 標題(六個層級)   | `<h1>主標題</h1>`           |
| `<p>`          | 段落             | `<p>這是一段文字</p>`       |
| `<br>`         | 換行             | `<br>`                      |
| `<hr>`         | 水平線           | `<hr>`                      |
| `<strong>`     | 重要強調(粗體)   | `<strong>重要</strong>`     |
| `<em>`         | 語氣強調(斜體)   | `<em>強調</em>`             |
| `<mark>`       | 高亮標記         | `<mark>重點</mark>`         |
| `<del>`        | 刪除文字         | `<del>刪除</del>`           |
| `<ins>`        | 插入文字         | `<ins>新增</ins>`           |
| `<sub>`        | 下標             | `H<sub>2</sub>O`            |
| `<sup>`        | 上標             | `x<sup>2</sup>`             |
| `<blockquote>` | 區塊引用         | `<blockquote>...</blockquote>` |
| `<code>`       | 程式碼片段       | `<code>console.log()</code>` |
| `<pre>`        | 預格式化文字     | `<pre>保留空白</pre>`       |

---

### 清單標籤

| 標籤   | 說明           | 範例                          |
| ------ | -------------- | ----------------------------- |
| `<ul>` | 無序清單       | `<ul><li>項目</li></ul>`      |
| `<ol>` | 有序清單       | `<ol><li>步驟</li></ol>`      |
| `<li>` | 清單項目       | `<li>內容</li>`               |
| `<dl>` | 描述清單       | `<dl><dt>術語</dt><dd>解釋</dd></dl>` |
| `<dt>` | 描述清單標題   | `<dt>HTML</dt>`               |
| `<dd>` | 描述清單定義   | `<dd>標記語言</dd>`           |

---

### 連結與媒體標籤

| 標籤       | 說明       | 範例                                  |
| ---------- | ---------- | ------------------------------------- |
| `<a>`      | 超連結     | `<a href="url">連結</a>`              |
| `<img>`    | 圖片       | `<img src="photo.jpg" alt="描述">`    |
| `<video>`  | 影片       | `<video controls><source src=""></video>` |
| `<audio>`  | 音訊       | `<audio controls><source src=""></audio>` |
| `<iframe>` | 內嵌框架   | `<iframe src="url"></iframe>`         |
| `<picture>` | 響應式圖片 | `<picture><source><img></picture>`    |
| `<source>` | 媒體來源   | `<source src="video.mp4" type="">`    |

---

### 表格標籤

| 標籤       | 說明             | 範例                        |
| ---------- | ---------------- | --------------------------- |
| `<table>`  | 表格容器         | `<table>...</table>`        |
| `<thead>`  | 表格標題區       | `<thead>...</thead>`        |
| `<tbody>`  | 表格主體區       | `<tbody>...</tbody>`        |
| `<tfoot>`  | 表格頁尾區       | `<tfoot>...</tfoot>`        |
| `<tr>`     | 表格列           | `<tr>...</tr>`              |
| `<th>`     | 表格標題欄位     | `<th>標題</th>`             |
| `<td>`     | 表格資料欄位     | `<td>資料</td>`             |
| `<caption>` | 表格標題說明     | `<caption>銷售報表</caption>` |

---

### 表單標籤

| 標籤         | 說明           | 範例                              |
| ------------ | -------------- | --------------------------------- |
| `<form>`     | 表單容器       | `<form action="" method=""></form>` |
| `<input>`    | 輸入欄位       | `<input type="text" name="">`     |
| `<textarea>` | 多行文字輸入   | `<textarea rows="5"></textarea>`  |
| `<button>`   | 按鈕           | `<button type="submit">送出</button>` |
| `<label>`    | 欄位標籤       | `<label for="name">姓名</label>`  |
| `<select>`   | 下拉選單       | `<select><option></option></select>` |
| `<option>`   | 選項           | `<option value="1">選項 1</option>` |
| `<fieldset>` | 欄位分組       | `<fieldset><legend></legend></fieldset>` |
| `<legend>`   | 分組標題       | `<legend>個人資料</legend>`       |

---

### 通用容器標籤

| 標籤     | 說明               | 範例                    |
| -------- | ------------------ | ----------------------- |
| `<div>`  | 區塊級容器         | `<div class=""></div>`  |
| `<span>` | 行內級容器         | `<span class=""></span>` |

---

## B. HTML 屬性速查表

### 通用屬性

| 屬性        | 說明               | 範例                          |
| ----------- | ------------------ | ----------------------------- |
| `id`        | 唯一識別碼         | `<div id="header">`           |
| `class`     | CSS 類別名稱       | `<p class="text-red">`        |
| `style`     | 內嵌樣式           | `<p style="color:red;">`      |
| `title`     | 提示文字           | `<img title="說明">`          |
| `lang`      | 語言代碼           | `<html lang="zh-Hant">`       |
| `hidden`    | 隱藏元素           | `<div hidden>`                |
| `data-*`    | 自訂資料屬性       | `<div data-id="123">`         |

---

### 連結屬性

| 屬性       | 說明               | 範例                          |
| ---------- | ------------------ | ----------------------------- |
| `href`     | 連結目標           | `<a href="url">`              |
| `target`   | 開啟方式           | `<a target="_blank">`         |
| `download` | 下載檔案           | `<a download>`                |
| `rel`      | 關係類型           | `<a rel="noopener">`          |

---

### 圖片屬性

| 屬性      | 說明               | 範例                          |
| --------- | ------------------ | ----------------------------- |
| `src`     | 圖片來源           | `<img src="photo.jpg">`       |
| `alt`     | 替代文字           | `<img alt="描述">`            |
| `width`   | 寬度               | `<img width="300">`           |
| `height`  | 高度               | `<img height="200">`          |
| `loading` | 載入方式           | `<img loading="lazy">`        |

---

### 表單屬性

| 屬性          | 說明               | 範例                          |
| ------------- | ------------------ | ----------------------------- |
| `type`        | 輸入類型           | `<input type="email">`        |
| `name`        | 欄位名稱           | `<input name="username">`     |
| `value`       | 預設值             | `<input value="預設">`        |
| `placeholder` | 提示文字           | `<input placeholder="輸入...">`|
| `required`    | 必填欄位           | `<input required>`            |
| `disabled`    | 停用欄位           | `<input disabled>`            |
| `readonly`    | 唯讀欄位           | `<input readonly>`            |
| `minlength`   | 最小長度           | `<input minlength="6">`       |
| `maxlength`   | 最大長度           | `<input maxlength="20">`      |
| `pattern`     | 驗證模式           | `<input pattern="[0-9]{10}">` |

---

## C. 常用 meta 標籤

```html
<!-- 字元編碼 -->
<meta charset="UTF-8">

<!-- 響應式設計 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- 網頁描述(SEO) -->
<meta name="description" content="網頁簡短描述">

<!-- 關鍵字 -->
<meta name="keywords" content="HTML, CSS, JavaScript">

<!-- 作者 -->
<meta name="author" content="你的名字">

<!-- Open Graph(Facebook 分享) -->
<meta property="og:title" content="標題">
<meta property="og:description" content="描述">
<meta property="og:image" content="圖片網址">
<meta property="og:url" content="網頁網址">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="標題">
<meta name="twitter:description" content="描述">
<meta name="twitter:image" content="圖片網址">

<!-- 防止搜尋引擎索引 -->
<meta name="robots" content="noindex, nofollow">
```

---

## D. 術語表

### A

- **Accessibility(可及性/無障礙)**:確保所有人都能使用網站,包括身心障礙者。

- **Attribute(屬性)**:HTML 標籤內的附加資訊,如 `id`、`class`。

---

### B

- **Block Element(區塊元素)**:佔據整行寬度的元素,如 `<div>`、`<p>`。

- **Browser(瀏覽器)**:用來顯示網頁的軟體,如 Chrome、Firefox。

---

### C

- **CSS(Cascading Style Sheets,階層式樣式表)**:控制網頁外觀的語言。

- **CDN(Content Delivery Network,內容傳遞網路)**:分散式伺服器,加速資源載入。

---

### D

- **DOM(Document Object Model,文件物件模型)**:HTML 在記憶體中的樹狀結構。

- **Deprecated(已棄用)**:不再建議使用的功能或標籤。

---

### E

- **Element(元素)**:完整的 HTML 標籤,包含開始、結束標籤與內容。

---

### F

- **Frontend(前端)**:使用者直接看到與互動的部分。

- **Framework(框架)**:預先建立的程式碼結構,如 React、Vue。

---

### H

- **Hallucination (幻覺)**: AI 產生看似合理但實際上錯誤的資訊。

- **HTML (HyperText Markup Language, 超文字標記語言)**: 網頁的結構語言。

- **HTTP/HTTPS**:網頁傳輸協定,HTTPS 為加密版本。

---

### I

- **Inline Element(行內元素)**:不佔據整行的元素,如 `<span>`、`<a>`。

- **IDE(Integrated Development Environment,整合開發環境)**:如 VS Code。

---

### J

- **JavaScript(JS)**:網頁互動與邏輯的程式語言。

---

### L

- **LLM (Large Language Model, 大型語言模型)**: 如 ChatGPT、Claude 等 AI 模型。
- **LocalStorage**: 瀏覽器的本地儲存空間。

---

### P

- **Prompt (提示詞)**: 下達給 AI 的指令。
- **Prompt Engineering (提示詞工程)**: 設計與優化提示詞的技術。

---

### M

- **Markup Language(標記語言)**:用標籤描述資料結構的語言。

- **Meta Tag**:HTML `<head>` 中的元資料標籤。

---

### R

- **Responsive Design(響應式設計)**:網頁能適應不同螢幕大小。

- **RWD**:Responsive Web Design 的縮寫。

---

### S

- **SEO(Search Engine Optimization,搜尋引擎最佳化)**:提升網站在搜尋結果的排名。

- **Semantic HTML(語意化 HTML)**:使用具有意義的標籤。

---

### T

- **Tag(標籤)**:HTML 的基本單位,如 `<p>`、`<div>`。

---

### V

- **Viewport**:瀏覽器顯示網頁的可視區域。

---

### W

- **W3C(World Wide Web Consortium)**:網頁標準制定組織。

- **WCAG(Web Content Accessibility Guidelines)**:網頁可及性指南。

---

## E. 常見問題 FAQ

### Q1: HTML、CSS、JavaScript 一定要一起學嗎?

**A:**建議按順序學習:
1. 先學 HTML(建立結構)
2. 再學 CSS(美化樣式)
3. 最後學 JavaScript(加入互動)

但不需要完全精通一個才學下一個,可以同時進行。

---

### Q2: 需要背誦所有 HTML 標籤嗎?

**A:**不需要!
- 記住常用的 20-30 個標籤即可
- 其他標籤需要時再查詢
- 重點是理解概念與正確使用

---

### Q3: 哪個程式碼編輯器最好?

**A:**新手推薦 **VS Code**:
- 免費、輕量、功能強大
- 外掛生態完整
- 社群資源豐富

其他選擇:Sublime Text、Atom、WebStorm。

---

### Q4: 如何檢查我的 HTML 是否正確?

**A:**
1. 使用 W3C Validator:https://validator.w3.org/
2. 瀏覽器開發者工具的 Console
3. VS Code 的語法檢查
4. 請 AI 審查程式碼

---

### Q5: 網頁在不同瀏覽器顯示不一樣怎麼辦?

**A:**
- 使用標準的 HTML5 語法
- 測試主流瀏覽器(Chrome、Firefox、Safari、Edge)
- 使用 CSS Reset 或 Normalize.css
- 查詢 Can I Use 確認瀏覽器支援度

---

### Q6: 學 HTML 需要多久?

**A:**
- **基礎掌握**:1-2 週
- **熟練應用**:1-2 個月
- **精通進階**:持續學習

關鍵是多實作,不要只看不做。

---

### Q7: 免費資源夠用嗎?還是需要付費課程?

**A:**
- 免費資源已經非常豐富(MDN、freeCodeCamp、YouTube)
- 新手建議先用免費資源
- 進階後可考慮付費課程取得結構化學習路徑

---

### Q8: 如何知道自己學會了?

**A:**
- 能獨立建立完整網頁
- 看懂別人的 HTML 程式碼
- 能解決常見問題
- 實作過至少 3-5 個專案

---

### Q9: AI 會取代前端工程師嗎?

**A:**
- AI 是工具,不是替代
- 會使用 AI 的工程師會更有競爭力
- 創意、判斷、整合能力仍然需要人類
- 持續學習與適應力最重要

---

### Q10: 遇到問題如何尋求幫助?

**A:**
1. **Google 搜尋**:通常能找到答案
2. **Stack Overflow**:技術問答社群
3. **AI 助手**(ChatGPT、Claude)
4. **Discord/Slack 社群**
5. **GitHub Issues**:針對特定專案

提問技巧:
- 描述問題與預期結果
- 提供程式碼與錯誤訊息
- 說明已嘗試的解決方法

---

## F. 快速上手檢查清單

### 環境配置

- [ ] 安裝 Google Chrome 瀏覽器
- [ ] 安裝 VS Code 編輯器
- [ ] 安裝 Live Server 擴充套件
- [ ] 建立專案資料夾
- [ ] 學會使用開發者工具(F12)

---

### HTML 基礎

- [ ] 理解 HTML 文件結構(`<!DOCTYPE>`, `<html>`, `<head>`, `<body>`)
- [ ] 熟悉標題標籤(`<h1>`~`<h6>`)
- [ ] 會使用段落與文字標籤(`<p>`, `<strong>`, `<em>`)
- [ ] 會建立超連結(`<a>`)
- [ ] 會插入圖片(`<img>`)
- [ ] 會建立清單(`<ul>`, `<ol>`, `<li>`)

---

### 進階功能

- [ ] 會建立表格(`<table>`, `<tr>`, `<td>`)
- [ ] 會建立表單(`<form>`, `<input>`, `<button>`)
- [ ] 理解語意化標籤(`<header>`, `<nav>`, `<main>`, `<footer>`)
- [ ] 會使用多媒體標籤(`<video>`, `<audio>`)

---

### 整合應用

- [ ] 會引入外部 CSS 檔案
- [ ] 會引入外部 JavaScript 檔案
- [ ] 理解 CSS 基礎(選擇器、盒模型)
- [ ] 理解 JavaScript 基礎(變數、函式、DOM 操作)
- [ ] 完成至少一個完整專案

---

### 優化與最佳實務

- [ ] 使用語意化標籤
- [ ] 為圖片加上 `alt` 文字
- [ ] 確保表單有 `<label>`
- [ ] 檢查可及性(鍵盤操作、色彩對比)
- [ ] 優化 SEO(meta 標籤、標題結構)
- [ ] 測試響應式設計(手機、平板、桌機)

---

### AI 輔助開發

- [ ] 會使用 AI 解釋程式碼
- [ ] 會撰寫有效的提示詞 (Prompt)
- [ ] 會請 AI 進行除錯 (Debug)
- [ ] 知道如何驗證 AI 產生的內容 (避免幻覺)

---

## G. 專案靈感

### 初級專案

1. **個人名片網站**
   - 姓名、照片、簡介、聯絡方式
   - 練習基本標籤與排版

2. **餐廳菜單頁面**
   - 分類清單、圖片、價格
   - 練習清單與表格

3. **活動報名表單**
   - 表單欄位、驗證、送出按鈕
   - 練習表單設計

---

### 中級專案

1. **個人部落格**
   - 文章列表、分類、標籤
   - 練習語意化標籤

2. **產品展示頁面**
   - 商品卡片、輪播圖、購物車
   - 練習 CSS 與 JavaScript 整合

3. **音樂播放器**
   - 播放控制、播放清單
   - 練習 `<audio>` 與 JavaScript

---

### 進階專案

1. **社群網站原型**
   - 會員系統、貼文、留言
   - 練習完整的前後端整合

2. **線上課程平台**
   - 課程列表、影片播放、進度追蹤
   - 練習複雜的互動功能

3. **專案管理工具**
   - 任務卡片、拖放功能、狀態管理
   - 練習進階 JavaScript

---

## H. 結語

感謝你閱讀完這本《HTML 入門完全指南》!

這本書涵蓋了從基礎到進階的 HTML 知識,
以及如何運用 AI 輔助學習與開發。

**記住:**
- **持續實作**是最好的學習方式
- **善用 AI**提升學習效率
- **保持好奇心**探索新技術
- **加入社群**與他人交流

**現在,是時候關掉這本書,打開編輯器,開始創造屬於你的作品了!**

> 🚀 祝你在前端開發的旅程中順利前行!

---

**版本資訊:**
- 版本: 1.1
- 最後更新: 2026 年 1 月
- 授權:[授權方式]
