# 附錄
## 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 月
- 授權:[授權方式]
Sign in with Wallet
Connect another wallet