# 第 4 章：HTML 基礎與頁面結構
## 本章目標
這一章會學會 HTML 的角色：它負責網頁內容與結構。你要能看懂常見標籤，並用語意清楚的方式組出一個基本頁面。
## 你會做出什麼
你會做出一個「學習筆記頁」，包含頁首、導覽列、主要內容、清單、連結與頁尾。
## 核心觀念
HTML 不是拿來「設計樣式」的工具，它的任務是描述內容是什麼。標題用標題標籤，段落用段落標籤，導覽用 `nav`，主要內容用 `main`，頁尾用 `footer`。
語意清楚的 HTML 對初學者很重要，因為 Codex 也會根據你的結構繼續修改。結構越清楚，後續 CSS 與 JavaScript 越容易寫。
## DOM Tree 視覺化概念
你可以把 HTML 想像成一棵倒長的樹（DOM Tree）。最外面是 ``，裡面包著 `` 和 ``，而 `` 裡面再包著標題、段落等。
這棵樹的結構非常重要，因為後續的 CSS 和 JavaScript 都是靠這個「層級關係」來找到對應的元素的。
## 常用標籤
- `header`：頁首或區塊開頭
- `nav`：導覽連結
- `main`：頁面主要內容
- `section`：一段主題內容
- `article`：可獨立閱讀的內容
- `h1` 到 `h6`：標題
- `p`：段落
- `ul`、`ol`、`li`：清單
- `a`：連結
- `footer`：頁尾
## 實作步驟
1. 建立 `index.html`。
2. 加入 `doctype`、`html`、`head`、`body`。
3. 在 `body` 中建立 `header`、`main`、`footer`。
4. 在 `main` 中加入學習目標與筆記清單。
5. 確認瀏覽器能正確顯示內容。
## Codex Prompt 範例
```text
請只使用 HTML，幫我建立一個語意清楚的學習筆記頁。內容包含頁首、導覽列、主要內容、三個學習目標、三則筆記卡片和頁尾。不要加入 CSS 和 JavaScript。
```
## 常見錯誤
* **[錯誤] 用太多沒有意義的 ``**
**[解法]**：這被稱為「div 湯」。盡量使用具備語意的標籤如 ``, ``, ``, `