---
# System prepended metadata

title: 一、基礎概念與語法入門

---

# 一、基礎概念與語法入門

## 1.1 認識 HTML 與網頁世界

### HTML 是什麼？

**HTML（HyperText Markup Language）** 是一種「超文字標記語言」，用於描述網頁內容的**結構**與**語意**。
它不是程式語言，而是一種「說明文件內容」的語法。

```html
<h1>歡迎來到我的網站</h1>
<p>這是一段由 HTML 撰寫的文字。</p>
```

這段程式碼在瀏覽器中會顯示為：

> **歡迎來到我的網站**
> 這是一段由 HTML 撰寫的文字。

> 💡 名詞解釋：「HyperText」表示能連結到其他頁面的文字；「Markup」則是用標籤 (Tag) 為內容加上語意。

---

### HTML 的基本語法結構

HTML 由許多「**標籤（Tag）**」組成。
每個標籤由一個**開始標籤**與**結束標籤**構成，像是：

```html
<p>這是一段文字</p>
```

![標籤解析圖](https://hackmd.io/_uploads/ByA3t_GVWl.jpg)



| 元素   | 功能                     |
| ------ | ------------------------ |
| `<p>`  | 開始標籤 (paragraph)     |
| `</p>` | 結束標籤                 |
| 內容   | 標籤中間的實際文字或元素 |

有些標籤沒有結尾，稱為「自閉合標籤 (self-closing tag)」，例如：


```html
<img src="cat.jpg" alt="一隻可愛的貓" />
<br />
<hr />
```

![標籤類型對比](https://hackmd.io/_uploads/HkJSj_G4bg.jpg)

---

### 標籤的巢狀結構（Nested Structure）

HTML 可以「包在包裡」形成層級結構：

```html
<div>
  <h2>我的興趣</h2>
  <p>我喜歡打球、聽音樂與寫程式。</p>
</div>
```

![巢狀結構圖](https://hackmd.io/_uploads/rkpWZtGEbe.jpg)
![巢狀結構圖-巢狀結構圖](https://hackmd.io/_uploads/SyxMZtM4-g.jpg)


---

### 小練習

請開啟 VS Code，新建一個檔案 `index.html`，輸入以下內容並用 Live Server 開啟：

```html
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一個網頁</title>
  </head>
  <body>
    <h1>哈囉，HTML！</h1>
    <p>這是我人生的第一個網頁。</p>
  </body>
</html>
```

觀察各標籤的用途，嘗試修改內容後重新整理看看結果。

---

### 換個方法了解 HTML

HTML 的本質就是一個 **存放內容的載體**。
它透過各種標籤（段落、標題、超連結…）來幫助我們編排文章與內容。

#### 簡單的文件轉換

以下示範如何把 Word 文件中的文字，轉換成對應的 HTML 標籤：

![簡單的文件轉換](https://i.imgur.com/MmLxr7I.png)

---

#### 錦上添花的內容

在基礎結構上，我們還可以加入更多標籤，例如 **段落**、**粗體**、**斜體**，讓文章更有層次：

![錦上添花的內容](https://i.imgur.com/4Oe4n9l.png)

<br/>

## 1.2 HTML 文件的結構

### HTML 的骨架

一份完整的 HTML 文件有一定的「固定骨架」：

```html
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <title>我的網站</title>
  </head>
  <body>
    <h1>首頁</h1>
    <p>這是我的第一個網頁內容。</p>
  </body>
</html>
```

| 區塊              | 功能說明                              |
| ----------------- | ------------------------------------- |
| `<!DOCTYPE html>` | 告訴瀏覽器這是 HTML5 文件。           |
| `<html>`          | 網頁最外層元素。                      |
| `<head>`          | 放置設定、字元編碼、標題與 SEO 資訊。 |
| `<body>`          | 放置實際顯示在畫面的內容。            |

![HTML 文件四層結構圖](https://hackmd.io/_uploads/SyNWSOUEbg.jpg)


---

### `<head>` 區塊常見內容

```html
<head>
  <meta charset="UTF-8" />
  <meta name="description" content="這是一個學習 HTML 的練習網站" />
  <title>我的第一個網站</title>
</head>
```

| 標籤                        | 功能                       |
| --------------------------- | -------------------------- |
| `<meta charset="UTF-8">`    | 指定文字編碼，避免亂碼。   |
| `<meta name="description">` | 提供搜尋引擎摘要。         |
| `<title>`                   | 顯示在瀏覽器標籤上的標題。 |
| `<link rel="icon">`         | **(進階補充)** 設定網站的 favicon 圖示。 |

> 💡 **小知識：什麼是 Favicon？**
> Favicon 是 "Favorites Icon" 的縮寫，就是你在瀏覽器分頁標籤左側看到的小圖示。
> 只要在 `<head>` 中加入這行，就能讓你的網站看起來更專業：
> ```html
> <link rel="icon" href="favicon.ico" type="image/x-icon">
> ```

---

### `<body>` 區塊：顯示內容的舞台

這裡放置所有會出現在畫面的內容，如標題、段落、圖片、按鈕等：

```html
<body>
  <h1>歡迎光臨</h1>
  <p>這裡是我的個人網站！</p>
</body>
```

> 💬 提醒：「Head 是幕後設定，Body 是舞台演出。」

---

### 小練習

請試著修改你之前的 `index.html`：

1. 在 `<head>` 中新增一行：

   ```html
   <meta name="author" content="你的名字" />
   ```

2. 在 `<body>` 裡新增：

   ```html
   <h2>關於我</h2>
   <p>我正在學習 HTML 結構！</p>
   ```

觀察標題層級與段落的變化。

<br/>

## 1.3 文字與段落的呈現

### 標題標籤（Heading Tags）

HTML 提供了 `<h1>` 到 `<h6>` 共六個層級的標題，用於建立文件的內容大綱與層次結構。

```html
<h1>主標題 (Level 1)</h1>
<h2>次標題 (Level 2)</h2>
<h3>小標題 (Level 3)</h3>
<h4>第四層標題 (Level 4)</h4>
<h5>第五層標題 (Level 5)</h5>
<h6>第六層標題 (Level 6)</h6>
```

#### 顯示結果

![截圖 標題標籤（Heading Tags）](https://hackmd.io/_uploads/B1fHbMd4Wx.png)


![Gemini_Generated_Image_4ixubh4ixubh4ixu](https://hackmd.io/_uploads/BJLAskVEbe.jpg)

💡 **最佳實務：**

- `<h1>` 通常是頁面的大標題，**一份文件只使用一次**，有助於 SEO。
- 依照 `h2`, `h3`... 的順序使用標題，不要為了字體大小而跳級（例如在 `h2` 底下直接用 `h4`）。
- 清晰的標題結構有助於搜尋引擎理解內容，也方便螢幕閱讀器為視障使用者導航。

---

### 段落與換行

- `<p>` (Paragraph): 用於定義一個完整的段落，瀏覽器會自動在其前後加上間距。
- `<br>` (Break): 用於在段落**內部**強制換行，它是一個自閉合標籤。

```html
<p>這是一整段文字，段落與段落之間會有明顯的區隔。</p>
<p>這是另外一段文字。</p>

<p>如果想在同一段內，<br />強制換一行，就使用 br 標籤。</p>
```

#### 顯示結果

![截圖 段落與換行](https://hackmd.io/_uploads/HywY-G_4-e.png)

---

### 強調與語意標籤

除了結構，HTML 也提供標籤來強調文字的**語意**。

| 功能 | 標籤 | 效果 | 用途與語意 |
| :--- | :--- | :--- | :--- |
| **重要** | `<strong>` | **粗體** | 強調內容的**重要性**、嚴重性或緊急性。 (語意) |
| **語氣** | `<em>` | _斜體_ | 強調文字的**語氣**，如同在朗讀時改變重音。 (語意) |
| **純粗體** | `<b>` | **粗體** | 僅作為視覺上的粗體，沒有額外語意。 |
| **純斜體** | `<i>` | _斜體_ | 僅作為視覺上的斜體，或用於標示術語、外語等。 |
| **刪除** | `<del>` | <del>刪除線</del> | 標示已經被刪除的文字。 |
| **標示** | `<u>` | <u>底線</u> | 過去常用於強調，但因容易與超連結混淆，現多用於標示錯字等特殊情境。 |

![Gemini_Generated_Image_56iijh56iijh56ii](https://hackmd.io/_uploads/rkyixgV4Ze.jpg)

> ⚠️ **提醒**：優先使用帶有語意的 `<strong>` 和 `<em>`。
> 若僅為了調整外觀（粗體/斜體）應優先使用 CSS。
> `<b>` 與 `<i>` 則保留給無特定語意但需視覺區隔的文字（如關鍵字、外文術語）。

---

### 1.4 特殊符號與 HTML Entities

有時候我們想在網頁上顯示 `<` 或 `>` 這些符號，但因為它們是 HTML 的保留字（用來寫標籤的），直接寫出來可能會讓瀏覽器誤會。這時我們就需要使用 **HTML Entities (字元實體)**。

| 符號 | 描述 | Entity 代碼 |
| :---: | :--- | :--- |
| `<` | 小於 (Less than) | `&lt;` |
| `>` | 大於 (Greater than) | `&gt;` |
| `&` | 和 (Ampersand) | `&amp;` |
| `"` | 雙引號 | `&quot;` |
| `'` | 單引號 | `&apos;` |
| (空格) | 不換行空格 | `&nbsp;` |
| © | 版權符號 | `&copy;` |

#### 範例應用

```html
<p>請使用 &lt;br&gt; 標籤來換行。</p>
<p>Copyright &copy; 2024</p>
```

#### 顯示結果

![截圖  特殊符號與 HTML Entities](https://hackmd.io/_uploads/rkcTbfuVbe.png)

---

### 引用與縮寫

| 功能 | 標籤 | 效果 | 用途 |
| :--- | :--- | :--- | :--- |
| **區塊引用** | `<blockquote>` | 通常以縮排顯示 | 用於引用較長的段落，例如名言、書摘。 |
| **行內引用** | `<q>` | 通常會自動加上引號 | 用於句子中的簡短引用。 |
| **引用來源** | `<cite>` | 通常以斜體顯示 | 標示作品、文章、書籍或來源的名稱。 |
| **縮寫** | `<abbr>` | 滑鼠懸停時顯示完整文字 | 標示縮寫或簡稱，並透過 `title` 屬性提供全名。 |

#### 範例：引用與縮寫的應用

```html
<p>
  學習 HTML 時，記住<q>從做中學</q>是非常重要的。
  正如 Steve Jobs 在 <cite>2005年史丹佛大學演講</cite> 中提到的：
</p>

<blockquote cite="https://news.stanford.edu/2005/06/14/jobs-061505/">
  Stay hungry, stay foolish.
</blockquote>

<p>
  而 <abbr title="HyperText Markup Language">HTML</abbr> 本身就是網頁的骨架。
</p>
```

#### 範例說明

- `<q>` 將「從做中學」包起來，表示這是一句行內引用。
- `<cite>` 標示出「2005年史丹佛大學演講」是一個作品名稱。
- `<blockquote>` 用於引用整段英文名言。`cite` 屬性可以提供引用的來源網址 (不會顯示出來)。
- `<abbr>` 用於 `HTML` 這個縮寫，當滑鼠移到上面時，會顯示 `title` 屬性中的完整名稱。

#### 顯示結果

![引用與縮寫的應用](https://hackmd.io/_uploads/HygdCLdVWg.png)

![Gemini_Generated_Image_gyynl0gyynl0gyyn](https://hackmd.io/_uploads/HJRrmeNEbg.jpg)

---

### 小練習：排版一篇短文

請在 `<body>` 中輸入以下內容：

```html
<h1>我的第一篇網頁文章</h1>
<p><strong>學習 HTML</strong> 是踏入網頁世界的第一步。</p>
<p>我們可以使用 <em>標籤</em> 來定義內容結構，讓瀏覽器知道該如何顯示。</p>
<blockquote>從觀察開始，從實作學習。</blockquote>
```

試著在段落之間加入 `<hr>` 水平線或 `<br>` 換行，觀察差異。

---

### ✨ 小結

- HTML 是一種「結構語言」，不是排版語言。
- 每個標籤都有語意與用途，正確使用能讓網站更清晰、可讀性更高。
- 熟悉 `<h1>`～`<p>`、`<strong>`、`<em>` 等標籤，是進入語意化 HTML 的第一步。

---

### 📝 選擇練習題：基礎概念與語法入門


**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>
