# HTML 入門完全指南 - 選擇題題庫總整
本文件彙整了書中各章節的所有練習題，方便讀者統一複習與自我檢測。
**題庫特色：**
- ✅ 收錄全書所有章節的課後習題
- ✅ 總計 60 題
- ✅ 包含基礎題與綜合應用題 (含進階挑戰)
- ✅ 附有詳細解析
---
## 目錄
- [前言與環境介紹](#前言與環境介紹)
- [第一章：基礎概念與語法入門](#第一章：基礎概念與語法入門)
- [第二章：HTML 的內容結構](#第二章：html-的內容結構)
- [第三章：語意化與進階應用](#第三章：語意化與進階應用)
- [第四章：CSS 與 JavaScript 整合入門](#第四章：css-與-javascript-整合入門)
- [第五章：AI 輔助開發與學習](#第五章：ai-輔助開發與學習)
## 前言與環境介紹
**1. 網站開發的三大基礎語言是什麼？**
- A) HTML、Python、Java
- B) HTML、CSS、JavaScript
- C) CSS、PHP、MySQL
- D) JavaScript、Ruby、C++
<details>
<summary>點選查看答案</summary>
答案: B) HTML、CSS、JavaScript
</details>
---
**2. 下列對 HTML、CSS、JavaScript 的描述，何者正確？**
- A) HTML 負責外觀，CSS 負責結構，JavaScript 負責互動
- B) HTML 負責結構，CSS 負責外觀，JavaScript 負責互動
- C) HTML 負責互動，CSS 負責結構，JavaScript 負責外觀
- D) 三者功能完全相同，可互相替代
<details>
<summary>點選查看答案</summary>
答案: B) HTML 負責結構，CSS 負責外觀，JavaScript 負責互動
</details>
---
**3. 推薦新手使用哪個文字編輯器來撰寫 HTML？**
- A) Microsoft Word
- B) 記事本
- C) Visual Studio Code
- D) Excel
<details>
<summary>點選查看答案</summary>
答案: C) Visual Studio Code
</details>
---
**4. Live Server 外掛的主要功能是什麼？**
- A) 壓縮圖片
- B) 即時預覽網頁，自動重新整理
- C) 修正語法錯誤
- D) 美化程式碼
<details>
<summary>點選查看答案</summary>
答案: B) 即時預覽網頁，自動重新整理
</details>
---
**5. 如何在 VS Code 中的 html 檔案中，快速建立 HTML5 基礎範本？**
- A) 輸入 html 後按 Enter
- B) 輸入 ! 後按 Enter
- C) 輸入 template 後按 Enter
- D) 直接開始寫 `<html>` 標籤
<details>
<summary>點選查看答案</summary>
答案: B) 輸入 ! 後按 Enter
</details>
---
**6. 瀏覽器的開發者工具可以用來做什麼？**
- A) 編寫 Word 文件
- B) 檢查網頁結構與除錯
- C) 下載影片
- D) 編輯圖片
<details>
<summary>點選查看答案</summary>
答案: B) 檢查網頁結構與除錯
</details>
---
**7. DOM 的全名是什麼？**
- A) Data Object Model
- B) Document Object Model
- C) Dynamic Object Model
- D) Design Object Model
<details>
<summary>點選查看答案</summary>
答案: B) Document Object Model
</details>
## 第一章：基礎概念與語法入門
**1. 下列何者是 HTML 的完整名稱？**
- A) HyperText Making Language
- B) HyperText Markup Language
- C) HighText Markup Language
- D) HyperTool Markup Language
<details>
<summary>點選查看答案</summary>
答案: B) HyperText Markup Language
</details>
**2. HTML 文件中，哪個區塊負責放置實際顯示在畫面的內容？**
- A) `<head>`
- B) `<body>`
- C) `<html>`
- D) `<meta>`
<details>
<summary>點選查看答案</summary>
答案: B) `<body>`
</details>
**3. 下列哪個標籤用於定義最高層級的標題？**
- A) `<h6>`
- B) `<h3>`
- C) `<h1>`
- D) `<title>`
<details>
<summary>點選查看答案</summary>
答案: C)
`<h1>`
</details>
**4. `<!DOCTYPE html>` 的作用是什麼？**
- A) 定義網頁的標題
- B) 告訴瀏覽器這是 HTML5 文件
- C) 設定文字編碼
- D) 建立段落
<details>
<summary>點選查看答案</summary>
答案: B) 告訴瀏覽器這是 HTML5 文件
</details>
**5. 下列哪個標籤具有語意上的「重要強調」意義？**
- A) `<b>`
- B) `<i>`
- C) `<strong>`
- D) `<u>`
<details>
<summary>點選查看答案</summary>
答案: (C)
</details>
**6. 若要在同一段落內換行，應該使用哪個標籤？**
- A) `<p>`
- B) `<br>`
- C) `<hr>`
- D) `<div>`
<details>
<summary>點選查看答案</summary>
答案: B)
</details>
**7. `<meta charset="UTF-8">` 的主要功能是什麼？**
- A) 設定網頁標題
- B) 避免中文亂碼
- C) 建立超連結
- D) 定義網頁描述
<details>
<summary>點選查看答案</summary>
答案: B) 避免中文亂碼
</details>
### 綜合應用題
**8. 小華寫了以下程式碼，但瀏覽器顯示時標題與段落沒有分開，而是連在一起。最可能的原因是什麼？**
```html
<h1>我的網站<h1>
<p>歡迎來到我的網站</p>
```
- A) 缺少 `<!DOCTYPE html>`
- B) 第一個 `<h1>` 的結束標籤錯誤，應為 `</h1>`
- C) 段落標籤應該用 `<div>` 取代
- D) 缺少 `<meta>` 標籤
<details>
<summary>點選查看答案</summary>
答案: B)
**解析：**
結束標籤必須使用斜線 `/`，寫成 `<h1>` 會被瀏覽器視為另一個開始標籤，導致第二個 `<h1>` 與 `<p>` 都被包在第一個 `<h1>` 內部，造成顯示異常。
</details>
**9. 下列哪一組標籤的組合使用方式正確？**
- A) `<strong><em>重要且強調</strong></em>`
- B) `<p>段落文字<h1>標題</h1></p>`
- C) `<em>強調文字 <strong>重要文字</strong></em>`
- D) `<body><head><title>標題</title></head></body>`
<details>
<summary>點選查看答案</summary>
答案: C) `<em>強調文字 <strong>重要文字</strong></em>`
**解析：**
- A) 錯誤：標籤巢狀順序錯誤，應該是 `</em></strong>` 而非 `</strong></em>`
- B) 錯誤：`<h1>` 是區塊元素，不應放在 `<p>` 段落內部
- C) 正確：標籤正確巢狀，先開的後關
- D) 錯誤：`<head>` 必須在 `<body>` 之前
</details>
**10. 若要建立一個包含作者資訊的網頁，下列哪個結構最符合 HTML 語意？**
- A) `<p>作者：<b>張小明</b></p>`
- B) `<div>作者：<span>張小明</span></div>`
- C) `<p>作者：<strong>張小明</strong></p>`
- D) `<abbr>作者：張小明</abbr>`
<details>
<summary>點選查看答案</summary>
答案: C) `<p>作者：<strong>張小明</strong></p>`
**解析：**
- A) `<b>` 只是視覺上的粗體，沒有語意
- B) `<div>` 和 `<span>` 是通用容器，缺乏語意
- C) 最佳選擇：`<p>` 表示段落，`<strong>` 表示重要強調（作者名字確實是重要資訊）
- D) `<abbr>` 是用於縮寫，不適合此情境
</details>
**11. 在 HTML 文件中，下列哪些內容應該放在 `<head>;` 區塊而非 `<body>;` 區塊？**
- A) `<title>;` 和 `<h1>;`
- B) `<meta charset>;` 和 `<p>;`
- C) `<title>;` 和 `<meta name="description">;`
- D) `<h1>;` 和 `<meta charset>;`
<details>
<summary>點選查看答案</summary>
答案: C)
</details>
**12. 下列關於 HTML 標籤使用的敘述，何者正確？**
- A) 所有標籤都必須成對出現（有開始和結束標籤）
- B) `<br>` 和 `<hr>` 是自閉合標籤，不需要結束標籤
- C) 標籤名稱有區分大小寫，`<P>` 和 `<p>` 是不同的標籤
- D) HTML 標籤可以任意巢狀，沒有順序限制
<details>
<summary>點選查看答案</summary>
答案: B) `<br>` 和 `<hr>` 是自閉合標籤，不需要結束標籤
**解析：**
- A) 錯誤：部分標籤是自閉合的，如 `<br>`、`<hr>`、`<img>`、`<input>` 等
- B) 正確：自閉合標籤（self-closing tags）不需要結束標籤
- C) 錯誤：HTML 標籤不區分大小寫，但建議統一使用小寫
- D) 錯誤：標籤巢狀有規則，例如不能在 `<p>` 內放 `<h1>`，先開的標籤要後關
</details>
**13. 完整的 HTML5 文件結構中，`<meta charset="UTF-8">` 應該放在哪個區塊？**
- A) `<body>`
- B) `<head>`
- C) `<html>`
- D) `<footer>`
<details>
<summary>點選查看答案</summary>
答案: B) `<head>`
解析：字元編碼設定應該放在 `<head>` 區塊中，這樣瀏覽器才能正確解析文件內容，避免出現亂碼。
</details>
## 第二章：HTML 的內容結構
**1. 下列何者是建立超連結的正確語法?**
- A) `<link href="page.html">點我</link>`
- B) `<a href="page.html">點我</a>`
- C) `<url src="page.html">點我</url>`
- D) `<hyperlink to="page.html">點我</hyperlink>`
<details>
<summary>點選查看答案</summary>
答案: B) `<a href="page.html">點我</a>`
</details>
**2. 若要讓超連結在新分頁開啟,應使用哪個屬性?**
- A) `new="true"`
- B) `target="_blank"`
- C) `window="new"`
- D) `open="tab"`
<details>
<summary>點選查看答案</summary>
答案: B) `target="_blank"`
</details>
**3. 下列哪個標籤用於建立無序清單?**
- A) `<ol>`
- B) `<ul>`
- C) `<list>`
- D) `<menu>`
<details>
<summary>點選查看答案</summary>
答案: B) `<ul>`
</details>
**4. `<img>` 標籤中,哪個屬性用於描述圖片內容(對視障人士重要)?**
- A) `title`
- B) `description`
- C) `alt`
- D) `caption`
<details>
<summary>點選查看答案</summary>
答案: C) `alt`
</details>
**5. 在表格中,下列哪個標籤用於定義標題欄位(通常是粗體)?**
- A) `<td>`
- B) `<th>`
- C) `<tr>`
- D) `<thead>`
<details>
<summary>點選查看答案</summary>
答案: B) `<th>`
</details>
**6. 若要合併表格的兩個欄位,應使用哪個屬性?**
- A) `merge="2"`
- B) `span="2"`
- C) `colspan="2"`
- D) `columns="2"`
<details>
<summary>點選查看答案</summary>
答案: C) `colspan="2"`
</details>
**7. 表單中,下列哪種 input type 會隱藏輸入的內容?**
- A) `type="text"`
- B) `type="hidden"`
- C) `type="password"`
- D) `type="secret"`
<details>
<summary>點選查看答案</summary>
答案: C) `type="password"`
</details>
---
#### 綜合應用題
**8. 小明想建立一個點擊圖片就能跳轉到關於我們頁面的功能，下列哪個寫法正確？**
- A) `<img src="logo.png" href="about.html" alt="關於我們" />`
- B) `<a href="about.html"><img src="logo.png" alt="關於我們" /></a>`
- C) `<img><a href="about.html" src="logo.png">關於我們</a></img>`
- D) `<link href="about.html"><img src="logo.png" /></link>`
<details>
<summary>點選查看答案</summary>
答案: B)`
**解析：**
- A) 錯誤：`<img>` 標籤沒有 `href` 屬性
- B) 正確：將 `<img>` 放在 `<a>` 標籤內部，整個圖片就變成可點擊的連結
- C) 錯誤：`<img>` 是自閉合標籤，不能包含其他標籤；且 `src` 屬性應在 `<img>` 上
- D) 錯誤：`<link>` 是用於引入外部資源（如 CSS），不是超連結標籤
</details>
**9. 下列關於表格結構的敘述，何者正確？**
- A) `<table>` 內可以直接放 `<td>`，不需要 `<tr>`
- B) `<th>` 只能用在表格的第一行
- C) 一個 `<tr>` 可以同時包含 `<th>` 和 `<td>`
- D) `<thead>`、`<tbody>`、`<tfoot>` 必須全部都使用，不能只用其中一個
<details>
<summary>點選查看答案</summary>
答案: C) 一個 `<tr>` 可以同時包含 `<th>` 和 `<td>`
**解析：**
- A) 錯誤：`<td>` 必須放在 `<tr>` 內，表示「這個儲存格屬於哪一列」
- B) 錯誤：`<th>` 可以用在任何位置，既可以是欄位標題（第一行），也可以是列標題（第一欄）
- C) 正確：例如第一欄用 `<th>` 作為列標題，其他欄位用 `<td>` 放資料
- D) 錯誤：這些標籤是選用的，可以只使用其中部分或完全不使用
</details>
**10. 若要建立一個註冊表單，包含帳號、密碼、Email、送出按鈕，下列哪個結構最完整且符合最佳實務？**
- A) `<form><input type="text" placeholder="帳號">...</form>`
- B) `<form action="/register" method="post"><label for="username">帳號:</label>...</form>`
- C) `<div><input type="text">帳號...</div>`
- D) `<form>帳號:<input type="text"><br>...</form>`
<details>
<summary>點選查看答案</summary>
答案: B)
**解析：**
選項 B 最完整且符合最佳實務，原因：
1. ✅ 使用 `<form>` 標籤並設定 `action` 與 `method` 屬性。
2. ✅ 每個輸入欄位都有對應的 `<label>`，並透過 `for` 與 `id` 正確連結，提升可及性。
3. ✅ 每個 `input` 都有 `name` 屬性，確保資料能被後端接收。
4. ✅ 使用 `required` 屬性進行前端必填驗證。
5. ✅ 按鈕明確指定 `type="submit"`。
</details>
**11. 下列關於清單與連結的組合使用，何者最符合語意且常見於網站導覽列？**
- A) `<ul><a href="#">首頁</a><a href="#">關於</a></ul>`
- B) `<nav><a href="#">首頁</a> | <a href="#">關於</a></nav>`
- C) `<ul><li><a href="#">首頁</a></li><li><a href="#">關於</a></li></ul>`
- D) `<ol><a><li href="#">首頁</li></a><a><li href="#">關於</li></a></ol>`
<details>
<summary>點選查看答案</summary>
答案: C) `<ul><li><a href="#">首頁</a></li><li><a href="#">關於</a></li></ul>`
**解析：**
標準的導覽列結構是使用無序清單 `<ul>`，其中每個清單項目 `<li>` 包含一個超連結 `<a>`。
</details>
## 第三章：語意化與進階應用
**1. 下列何者是 HTML5 的語意標籤?**
- A) `<div>`
- B) `<span>`
- C) `<header>`
- D) `<container>`
<details>
<summary>點選查看答案</summary>
答案: C) `<header>`
</details>
**2. 一個網頁應該有幾個 `<main>` 標籤?**
- A) 0 個
- B) 1 個
- C) 2 個以上
- D) 不限制
<details>
<summary>點選查看答案</summary>
答案: B) 1 個
</details>
**3. 若要標示機器可讀的日期與時間，應使用哪個語意標籤？**
- A) `<span datetime="...">`
- B) `<time datetime="...">`
- C) `<date value="...">`
- D) `<moment time="...">`
<details>
<summary>點選查看答案</summary>
答案: B) `<time datetime="...">`
</details>
**4. 對於純裝飾性的圖片,`alt` 屬性應該如何設定?**
- A) 不需要 alt 屬性
- B) `alt=""`(空白)
- C) `alt="裝飾圖片"`
- D) `alt="image"`
<details>
<summary>點選查看答案</summary>
答案: B) `alt=""`(空白)
</details>
**5. 下列何者不是 WCAG 的核心原則?**
- A) 可感知(Perceivable)
- B) 可操作(Operable)
- C) 可獲利(Profitable)
- D) 可理解(Understandable)
<details>
<summary>點選查看答案</summary>
答案: C) 可獲利(Profitable)
</details>
**6. 表單欄位的 `<label>` 主要用途是什麼?**
- A) 美化樣式
- B) 提供欄位說明,提升可及性
- C) 驗證輸入
- D) 儲存資料
<details>
<summary>點選查看答案</summary>
答案: B) 提供欄位說明,提升可及性
</details>
**7. `<title>` 標籤的建議長度是多少字元?**
- A) 20-30 字元
- B) 50-60 字元
- C) 100-120 字元
- D) 不限制
<details>
<summary>點選查看答案</summary>
答案: B) 50-60 字元
</details>
---
#### 綜合應用題
**8. 小華想打造一個可及性友善的個人部落格，下列哪個設計最不符合 WCAG 標準？**
- A) 所有圖片都加上 `alt` 屬性，純裝飾圖片使用 `alt=""`
- B) 表單欄位都有對應的 `<label>`，且 `for` 與 `id` 正確配對
- C) 使用淺灰色文字（#ccc）搭配白色背景（#fff）
- D) 確保所有功能都可以用鍵盤操作（Tab 鍵導航）
<details>
<summary>點選查看答案</summary>
答案: C) 使用淺灰色文字（#ccc）搭配白色背景（#fff）
**解析：**
- A) 正確：圖片必須有 `alt`，裝飾性圖片用空 `alt` 讓螢幕閱讀器略過
- B) 正確：這是表單可及性的核心要求
- C) **錯誤**：淺灰色與白色對比度不足，視力較弱或色盲者難以閱讀。WCAG 要求文字對比度至少 4.5:1（AA 級）或 7:1（AAA 級）
- D) 正確：鍵盤導航是可及性的基本要求
**WCAG 四大原則：**
1. **可感知(Perceivable)** - 足夠的對比度屬於此類
2. **可操作(Operable)** - 鍵盤導航
3. **可理解(Understandable)** - 清楚的標籤
4. **穩健(Robust)** - 正確的語意標籤
</details>
**9. 下列哪個網頁結構最符合語意化與 SEO 最佳實務？**
```html
<!-- 選項 A -->
<div class="header">
<div class="title">我的部落格</div>
<div class="menu">...</div>
</div>
<div class="content">
<div class="post">...</div>
</div>
<!-- 選項 B -->
<header>
<h1>我的部落格</h1>
<nav>...</nav>
</header>
<div id="main">
<div class="article">...</div>
</div>
<!-- 選項 C -->
<header>
<h1>我的部落格</h1>
<nav aria-label="主選單">...</nav>
</header>
<main>
<article>
<header><h2>文章標題</h2></header>
<p>內容...</p>
</article>
</main>
<footer>...</footer>
<!-- 選項 D -->
<body>
<h1>我的部落格</h1>
<ul><li><a href="#">首頁</a></li></ul>
<h2>文章標題</h2>
<p>內容...</p>
<p>版權所有</p>
</body>
```
- A) 選項 A
- B) 選項 B
- C) 選項 C
- D) 選項 D
<details>
<summary>點選查看答案</summary>
答案: C) 選項 C
**解析：**
選項 C 最完整且符合最佳實務：
1. ✅ 使用語意化標籤（`<header>`, `<nav>`, `<main>`, `<article>`, `<footer>`）
2. ✅ `<h1>` 作為唯一的網站主標題
3. ✅ 使用 `<main>` 標籤（一頁只能有一個）
4. ✅ 文章用 `<article>` 包裹，表示獨立完整內容
5. ✅ 加上 ARIA 屬性（`aria-label`）提升可及性
6. ✅ 文章內部有自己的 `<header>`（標籤可重複使用）
7. ✅ 有 `<footer>` 頁尾
其他選項問題：
- A) 全用 `<div>`，完全沒有語意，搜尋引擎與螢幕閱讀器難以理解結構
- B) 較好但不完美：用 `<div id="main">` 而非 `<main>` 標籤
- D) 缺少 `<header>`、`<nav>`、`<main>`、`<article>` 等語意標籤，結構平坦
**記住：語意化 = 結構清晰 = SEO 友善 = 可及性佳**
</details>
**10. 若要優化一個新聞網站的 SEO，下列哪個策略最完整？**
- A) 只要在 `<head>` 中加入 `<meta name="keywords">`，列出所有關鍵字
- B) 每頁都用相同的 `<title>`，統一品牌形象
- C) 結合 `<title>`、`<meta description>`、語意標籤、結構化資料、Open Graph 標籤
- D) 把所有文字都設定為 `<h1>`，增加搜尋權重
<details>
<summary>點選查看答案</summary>
答案: C) 結合
**解析：**
- A) 錯誤：Google 早已不看 `keywords` meta 標籤（因為被濫用）
- B) 錯誤：每頁應該有獨特的 `<title>`，描述該頁內容
- C) **正確**：現代 SEO 需要多方面優化：
- `<title>` - 搜尋結果標題（50-60 字元）
- `<meta description>` - 搜尋結果摘要（150-160 字元）
- 語意標籤 - 幫助搜尋引擎理解結構
- 結構化資料 - 顯示星等、價格、發布日期等
- Open Graph - 社群分享時的顯示內容
- D) 錯誤：只能有一個 `<h1>`，濫用會被懲罰
**SEO 綜合策略：**
```html
<head>
<!-- 基礎 SEO -->
<title>新聞標題 | 網站名稱</title>
<meta name="description" content="新聞摘要...">
<!-- Open Graph（社群分享）-->
<meta property="og:title" content="新聞標題">
<meta property="og:description" content="新聞摘要">
<meta property="og:image" content="縮圖.jpg">
<!-- 結構化資料（JSON-LD）-->
<script type="application/ld+json">
{
"@type": "NewsArticle",
"headline": "新聞標題",
"datePublished": "2025-01-01"
}
</script>
</head>
<body>
<!-- 語意化結構 -->
<article>
<h1>新聞標題</h1>
<time datetime="2025-01-01">2025年1月1日</time>
<p>內容...</p>
</article>
</body>
```
</details>
**11. 下列關於 `<article>` 和 `<section>` 標籤的使用，何者正確？**
- A) `<article>` 只能用一次，`<section>` 可以用多次
- B) `<article>` 內不能再包含 `<article>`
- C) `<article>` 是獨立完整的內容，可以單獨分發；`<section>` 是主題性區段
- D) `<article>` 和 `<section>` 完全相同，可以互換使用
<details>
<summary>點選查看答案</summary>
答案: C) `<article>` 是獨立完整的內容，可以單獨分發；`<section>` 是主題性區段
**解析：**
- A) 錯誤：兩者都可以多次使用
- B) 錯誤：`<article>` 內可以包含 `<article>`（例如文章內的評論）
- C) **正確**：這是兩者的核心差異
- `<article>` - 獨立、完整、可分發（如部落格文章、新聞、產品卡片）
- `<section>` - 主題性區段，依賴上下文（如章節、分頁）
- D) 錯誤：兩者語意不同，不可互換
**實際範例：**
```html
<article> <!-- 部落格文章 -->
<h2>如何學習 HTML</h2>
<section> <!-- 文章的第一部分 -->
<h3>為什麼要學 HTML</h3>
<p>...</p>
</section>
<section> <!-- 文章的第二部分 -->
<h3>學習步驟</h3>
<p>...</p>
</section>
<article> <!-- 評論也是獨立完整的內容 -->
<h4>讀者 小明 的評論</h4>
<p>寫得很好！</p>
</article>
</article>
```
**記憶口訣：**
- `<article>` = 可以單獨 RSS 訂閱的內容
- `<section>` = 文章內的章節
</details>
**12. 觀察以下兩個網站在 Google 搜尋結果的表現，哪個網站的 HTML 設定較完整？**
```
網站 A 的搜尋結果：
┌─────────────────────────────────┐
│ 首頁 │
│ https://example-a.com │
│ (沒有描述) │
└─────────────────────────────────┘
網站 B 的搜尋結果：
┌─────────────────────────────────┐
│ HTML 入門教學 | 從零開始學網頁 │
│ https://example-b.com/html │
│ 2025 最新 HTML 教學，涵蓋語意... │
│ ⭐⭐⭐⭐⭐ 4.8 · 評論 328 則 │
└─────────────────────────────────┘
```
網站 B 可能包含以下哪些設定？
- A) 只有 `<title>` 標籤
- B) `<title>` 和 `<h1>` 標籤
- C) `<title>`、`<meta description>`、結構化資料(Structured Data)
- D) 只有 Open Graph 標籤
<details>
<summary>點選查看答案</summary>
答案: C)
**解析：**
網站 B 的搜尋結果顯示：
1. **標題** - 來自 `<title>` 標籤
2. **描述** - 來自 `<meta name="description">` 標籤
3. **星等評論** - 來自結構化資料（Schema.org JSON-LD）
```html
<!-- 網站 B 的 HTML -->
<head>
<title>HTML 入門教學 | 從零開始學網頁</title>
<meta name="description" content="2025 最新 HTML 教學，涵蓋語意化標籤、可及性、SEO 優化，適合初學者。">
<!-- 結構化資料 -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Course",
"name": "HTML 入門教學",
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.8",
"reviewCount": "328"
}
}
</script>
</head>
```
**為什麼其他選項錯誤：**
- A) 只有標題，無法顯示描述與星等
- B) `<h1>` 不會顯示在搜尋結果中
- D) Open Graph 用於社群分享，不影響 Google 搜尋結果
**學習重點：**
完整的 SEO 需要三個層面配合：
1. **基礎 meta 標籤** - `<title>` 和 `<meta description>`
2. **結構化資料** - 顯示額外資訊（星等、價格、日期）
3. **語意化 HTML** - 幫助搜尋引擎理解內容結構
</details>
---
**13. 完整的語意化網頁結構應包含哪些主要標籤？**
- A) `<div>`、`<span>`、`<p>`
- B) `<header>`、`<main>`、`<footer>`
- C) `<table>`、`<form>`、`<list>`
- D) `<section>`、`<aside>`、`<nav>` 但不需要 `<main>`
<details>
<summary>點選查看答案</summary>
答案: B) `<header>`、`<main>`、`<footer>`
解析：語意化網頁的基本結構包括 `<header>`(頁首)、`<main>`(主要內容)、`<footer>`(頁尾)，搭配 `<nav>`、`<article>`、`<section>` 等。
</details>
**14. `<meta name="description">` 標籤的主要用途是什麼？**
- A) 設定網頁的字元編碼
- B) 提供網頁摘要給搜尋引擎
- C) 定義網頁的標題
- D) 設定網頁的關鍵字
<details>
<summary>點選查看答案</summary>
答案: B) 提供網頁摘要給搜尋引擎
解析：`<meta name="description">` 用於提供網頁的簡短描述，會顯示在搜尋引擎結果中，對 SEO 很重要。
</details>
---
**15. 以下語意化網頁結構中，哪個是最嚴重的錯誤？**
```html
<body>
<header>
<h1>我的網站</h1>
</header>
<main>
<article>
<h3>最新文章</h3>
</article>
</main>
<main>
<section>
<h2>關於我</h2>
</section>
</main>
</body>
```
- A) 標題從 `<h1>` 跳到 `<h3>`
- B) 重複使用兩個 `<main>` 標籤
- C) 缺少 `<nav>` 導覽列
- D) 缺少 `<footer>` 頁尾
<details>
<summary>點選查看答案</summary>
答案: B) 重複使用兩個 `<main>` 標籤
解析：一個網頁只能有一個 `<main>` 標籤，代表頁面的主要內容。重複使用會違反 HTML 規範。
</details>
## 第四章：CSS 與 JavaScript 整合入門
**1. 在網頁開發的前端三劍客中，負責處理「互動與邏輯」的是哪一項技術？**
- A) HTML
- B) CSS
- C) JavaScript
- D) SQL
<details>
<summary>點選查看答案</summary>
答案: C) JavaScript
**解析：**
HTML 負責結構，CSS 負責外觀樣式，JavaScript 負責互動與邏輯控制。SQL 則是資料庫查詢語言，屬於後端範疇。
</details>
**2. 在 CSS 盒模型 (Box Model) 中，位於「內容 (Content)」與「邊框 (Border)」之間的區域稱為什麼？**
- A) Margin (外距)
- B) Padding (內距)
- C) Outline (輪廓)
- D) Width (寬度)
<details>
<summary>點選查看答案</summary>
答案: B) Padding (內距)
**解析：**
由內而外的順序為：Content (內容) -> Padding (內距) -> Border (邊框) -> Margin (外距)。
</details>
**3. 若要選取 HTML 中 `<div id="header">` 這個元素，應該使用哪一個 CSS 選擇器？**
- A) `.header`
- B) `header`
- C) `*header`
- D) `#header`
<details>
<summary>點選查看答案</summary>
答案: D) `#header`
**解析：**
- `#` 用於 ID 選擇器 (對應 `id=""`)
- `.` 用於類別選擇器 (對應 `class=""`)
- 無符號直接寫標籤名用於元素選擇器
</details>
**4. 在 JavaScript 中，建議使用哪一種方式來監聽按鈕的點擊事件？**
- A) 在 HTML 中寫 `<button onclick="...">`
- B) 在 CSS 中寫 `button:active { ... }`
- C) 使用 `element.addEventListener('click', ...)`
- D) 使用 `element.click = ...`
<details>
<summary>點選查看答案</summary>
答案: C) 使用 `element.addEventListener('click', ...)`
**解析：**
- A) 是內嵌寫法，不推薦。
- B) 是 CSS 偽類，只能改變樣式，不能執行邏輯。
- C) 是標準且推薦的事件監聽方式，可同時綁定多個事件且結構分離。
</details>
**5. 若要使用 JavaScript 動態建立一個新的 `<div>` 元素，應該使用哪個方法？**
- A) `document.createElement('div')`
- B) `document.newElement('div')`
- C) `document.add('div')`
- D) `document.make('div')`
<details>
<summary>點選查看答案</summary>
答案: A) `document.createElement('div')`
**解析：**
`document.createElement(tagName)` 是標準的 DOM API，用於建立新的元素節點。
</details>
**6. 為了符合無障礙設計並讓文字大小能隨瀏覽器設定縮放，建議使用哪種單位來設定 `font-size`？**
- A) px (像素)
- B) rem
- C) cm (公分)
- D) vh (視窗高度)
<details>
<summary>點選查看答案</summary>
答案: B) rem
**解析：**
`rem` 是相對於根元素 (root element) 的字體大小，能響應使用者在瀏覽器設定的預設字體大小，是目前最推薦的文字單位。
</details>
**7. 若希望某個元素在網頁上「完全消失」且「不佔據任何空間」，應設定什麼 CSS？**
- A) `opacity: 0;` (透明度為 0)
- B) `visibility: hidden;` (隱藏可見度)
- C) `display: none;` (不顯示)
- D) `background-color: transparent;` (背景透明)
<details>
<summary>點選查看答案</summary>
答案: C) `display: none;`
**解析：**
- `display: none;` 會讓元素從排版中完全移除，不佔空間。
- `opacity: 0` 和 `visibility: hidden` 雖然看不見，但元素原本的位置仍會被保留 (佔空間)。
</details>
**8. 在 `display: flex;` 的容器中，若要將子元素「水平置中」排列，應使用哪個屬性？**
- A) `align-items: center;`
- B) `text-align: center;`
- C) `padding: center;`
- D) `justify-content: center;`
<details>
<summary>點選查看答案</summary>
答案: D) `justify-content: center;`
**解析：**
在預設的 Flex 模式下 (橫向排列)，`justify-content` 控制主軸 (水平) 的對齊，`align-items` 控制交錯軸 (垂直) 的對齊。
</details>
**9. 在 JavaScript 中，若宣告一個變數後「不打算」也「不應該」再修改其數值，應使用哪個關鍵字？**
- A) `var`
- B) `let`
- C) `const`
- D) `static`
<details>
<summary>點選查看答案</summary>
答案: C) `const`
**解析：**
`const` (constant) 用於宣告常數，一旦賦值後就不能再重新賦值 (Reassign)，這能提高程式的穩定性與可讀性。
</details>
**10. 若要製作一個按鈕，點擊時能「切換」選單的顯示與隱藏狀態 (有就移除 class，沒有就新增)，最推薦使用哪個方法？**
- A) `classList.add()`
- B) `classList.remove()`
- C) `classList.toggle()`
- D) `classList.switch()`
<details>
<summary>點選查看答案</summary>
答案: C) `classList.toggle()`
**解析：**
`classList.toggle('className')` 會自動偵測：若元素已有該 class 則移除，若沒有則新增，非常適合用於開關式 (On/Off) 的互動功能。
</details>
## 第五章：AI 輔助開發與學習
**1. 使用 AI 學習 HTML 時，下列何者是最佳實務？**
- A) 完全依賴 AI，不需要理解原理直接複製
- B) 用 AI 解釋概念，但要自己動手實作與驗證
- C) 為了省時間，請 AI 代寫所有作業
- D) 避免使用 AI，認為它會阻礙學習
<details>
<summary>點選查看答案</summary>
答案: B) 用 AI 解釋概念，但要自己動手實作與驗證
**解析：** AI 是輔助工具，親自實作與理解原理才是將知識內化的關鍵。
</details>
**2. 一個好的 AI 提示詞 (Prompt) 應該包含哪些要素？**
- A) 只需要簡單一句話
- B) 角色設定、明確任務、具體要求、輸出格式
- C) 越冗長越好，包含所有細節
- D) 只要這行字能跑出來就好
<details>
<summary>點選查看答案</summary>
答案: B) 角色設定、明確任務、具體要求、輸出格式
**解析：** 結構完整的提示詞能讓 AI 更準確理解你的需求，減少嘗試錯誤的時間。
</details>
**3. 下列哪一種方式**不屬於**正確的 AI 協作模式？**
- A) 先規劃架構，再請 AI 提供實作建議
- B) 請 AI 進行程式碼審查 (Code Review)
- C) 要求 AI 一次寫出完美的完整系統，不做任何檢查
- D) 遇到 Bug 時，將錯誤訊息貼給 AI 尋求解決方案
<details>
<summary>點選查看答案</summary>
答案: C) 要求 AI 一次寫出完美的完整系統，不做任何檢查
**解析：** AI 可能會犯錯，且一次生成過多程式碼難以除錯。應採用「迭代開發」與「逐步實作」的方式。
</details>
**4. 關於未來的學習方向，下列哪項建議較為適當？**
- A) 學完 HTML 就可以停止學習了
- B) 直接跳過 CSS/JS，開始學大型框架
- C) 持續精進 CSS 與 JavaScript，並建立實戰專案
- D) 專注在背誦所有標籤，不需練習
<details>
<summary>點選查看答案</summary>
答案: C) 持續精進 CSS 與 JavaScript，並建立實戰專案
**解析：** 前端技術日新月異，打好基礎 (HTML/CSS/JS) 並透過專案實作累積經驗，是持續成長的最佳路徑。
</details>
Sign in with Wallet
Connect another wallet