# 一、基礎概念與語法入門 ## 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>