單元 2：理解 HTML 的功能

你好，未來的網頁開發者！歡迎來到令人興奮的 HTML 世界。這一章絕對是重中之重，因為 HTML（超文本標記語言）是你曾經瀏覽過的每一個網站的骨幹。

如果你起初覺得語法（編寫代碼的具體方式）有點複雜，不必擔心。我們會將 HTML 拆解成簡單且功能性的組件。讀完這一節後，你將精確地理解 HTML 是「如何」在互聯網上建構內容的。

第 1 節：HTML——網頁的基礎

什麼是 HTML？

HTML 的全稱是 HyperText Markup Language（超文本標記語言）。

  • HyperText（超文本）： 指的是將不同文件連結起來的能力。這讓你能夠點擊按鈕或文字，並跳轉到另一個頁面或段落（我們稱這些為超連結）。
  • Markup（標記）： 這意味著我們使用特定的代碼（標籤）來定義和標記文檔的各個部分。HTML 並不指示電腦如何執行任務，它只是簡單地告訴瀏覽器內容「是什麼」。
  • Language（語言）： 這是網頁瀏覽器所使用的一種溝通系統。

核心功能： HTML 的主要功能是為網頁內容提供結構（structure）和語義（semantics，即含義）。HTML 會告訴網頁瀏覽器諸如「這段文字是主標題」、「這是一個項目列表」或「這是一張圖片」等資訊。

類比： 想像一下蓋房子。HTML 就是結構藍圖——即骨架、樑柱和牆壁。它定義了房間的位置，但不會定義油漆顏色或窗簾款式（那是 CSS 的工作，我們稍後會學到）。

瀏覽器如何解讀 HTML？

你的網頁瀏覽器（如 Chrome、Edge 或 Firefox）會從上到下讀取 HTML 文件。當它遇到一個 HTML 標籤時，它就能精確地知道如何顯示該內容。

  • 如果瀏覽器看到 <h1>，它就知道必須將包含的文字顯示為最重要的標題。
  • 如果它看到 <img>，它就知道需要獲取並顯示一個圖像文件。
快速複習：

HTML 定義了結構並啟用了導航（超文本）。

第 2 節：構建基礎——元素、標籤和屬性

要理解 HTML 的功能，你必須掌握它的三個核心組件。

1. 標籤（Tags）與元素（Elements）

標籤（Tag）是括在角括號（< >）內的代碼。標籤通常成對出現：

  • 開始標籤（Opening Tag）： 標記元素的開頭（例如 <p>）。
  • 結束標籤（Closing Tag）： 標記元素的結尾，並以斜線表示（例如 </p>）。

元素（Element）是指整個結構，包括開始標籤、內容和結束標籤。

範例：
<p>這是一個段落元素。</p>

自閉合（空）元素

有些元素不需要包含內容，因此不需要結束標籤。它們的功能通常是向頁面插入某些內容。

範例：換行元素 <br />，或圖片元素 <img />。

功能檢查： 元素定義了內容「是什麼」（一個段落、一個列表項目等）。

2. 屬性（Attributes）

屬性（Attributes）用於提供關於元素的額外資訊。它們總是放在開始標籤內，通常以 name="value" 的形式呈現。

功能檢查： 屬性用於修改或指定元素的行為或來源。

類比： 如果 <a>（錨點/連結）標籤是路標的結構，那麼 href 屬性就準確地告訴你該路標指向哪裡（目的地地址）。

你必須知道的關鍵屬性：

  • href（Hypertext Reference）： 用於 <a> 標籤，用以指定 URL 目的地。
  • src（Source）： 用於 <img> 標籤，用以指定圖像的文件路徑。
  • alt（Alternate Text）： 用於 <img> 標籤，在圖像無法載入時提供描述，或供螢幕閱讀器使用。

使用屬性的範例：
<img src="photo.jpg" alt="一張日出的照片" />

記憶小撇步（元素 vs. 屬性）：

元素說：「我是個連結」（錨點標籤：<a>）。

屬性說：「我需要前往這裡」（href="目的地"）。

第 3 節：基本文件結構

每個功能完備的 HTML 頁面都遵循一個強制性的結構。這個結構決定了哪些資訊對使用者可見，哪些則是供瀏覽器處理的。

步驟 1：宣告（Declaration）

<!DOCTYPE html>

這不是一個 HTML 元素。這是給瀏覽器的強制性指令，告訴它預期哪種版本的 HTML（在這裡是 HTML5）。它的功能是確保頁面在「標準模式」下正確渲染。

步驟 2：根元素（Root Element）

<html> ... </html>

這個根元素包含了頁面上所有的其他內容。它通常包含一個語言屬性（例如 lang="zh-HK"），這對於無障礙存取（accessibility）和搜尋引擎非常重要。

步驟 3：頭部區域（Metadata）

<head> ... </head>

這裡的內容不會直接顯示在主頁面上。它的功能是存放元數據（metadata）——即關於 HTML 文件本身的數據。

  • 關鍵功能：
    • 設定網頁標題（通過 <title>），該標題會顯示在瀏覽器分頁上。
    • 連結外部文件，例如 CSS 樣式表。
    • 指定字符集（如 UTF-8）。
步驟 4：主體區域（Content）

<body> ... </body>

這是對使用者而言最重要的部分。它的功能是包含網頁的所有可見內容、結構和媒體。

  • 包括： 標題、段落、圖像、表格、列表和導航選單。
你知道嗎？

你放置在 <head> 區域中的 <title>，是搜尋引擎（如 Google）判斷你頁面內容的最重要因素之一！

第 4 節：用於建構內容的關鍵功能元素

這些元素定義了內容如何組織和呈現，從而賦予網頁含義（語義）。

1. 標題（<h1> 至 <h6>）

功能： 標題為內容提供層次結構，就像教科書中的章節和分節一樣。

  • <h1> 是最重要的標題（通常是頁面的主題）。
  • <h6> 是最不重要的（用於次要的子節）。

重要規則： 每個頁面應該只有一個 <h1> 元素。按正確順序使用標題（例如不要直接從 <h1> 跳到 <h4>）可以同時改善 SEO（搜尋引擎優化）和無障礙體驗。

2. 段落（<p>）

功能： 段落元素用於將相關的句子分組為獨立的文本區塊。

常見錯誤： 學生有時會嘗試重複使用 <br /> 標籤來在文本區塊之間創造空間。建立內容區塊的正確方法始終是使用結構化的 <p> 元素。

3. 列表（<ul> 和 <ol>）

列表對於清晰的組織至關重要。

  • 無序列表（<ul>）： 建立一個順序不重要的列表（例如成分清單）。每個項目都使用 <li> 標籤。
  • 有序列表（<ol>）： 建立一個順序很重要的列表（例如逐步說明）。每個項目同樣使用 <li> 標籤。

功能： 列表提供了有意義的分組和呈現，使內容更容易掃讀和理解。

4. 超連結（錨點標籤：<a>）

功能： <a> 標籤是實現「超文本」功能的關鍵。它將當前文件連結到另一個文件或資源。

如前所述，其核心功能依賴於 href 屬性，該屬性包含了目的地 URL。

範例：
<a href="https://www.edexcel.com">瀏覽考試局網站</a>

5. 圖像（<img />）

功能： 圖像元素將外部媒體（如 JPEG 或 PNG 文件）嵌入到文件中。

<img /> 元素需要兩個關鍵屬性以實現完整功能和合規性：

  1. src： 告訴瀏覽器去哪裡找圖像文件。
  2. alt： 提供文字描述。這對視障使用者（無障礙）至關重要，也有助於 SEO，幫助搜尋引擎理解圖像內容。

重點總結

HTML 是網頁的終極結構語言。它的功能完全集中在定義內容結構和實現文件間的導航。

請記住，複雜的網站不過是由數百個 HTML 元素按照標籤和屬性的規則協同工作而成的。你已經成功掌握了基礎概念！

單元 2 核心功能檢查清單
  • HTML 結構： <!DOCTYPE>, <html>, <head>（元數據）, <body>（可見內容）。
  • 標籤： 定義內容的界限。
  • 屬性： 修改或指定元素行為（例如 href, src, alt）。
  • 語義功能： 標題（<h1>）定義重要性；段落（<p>）定義文本區塊；列表（<ul>/<ol>）定義分組資訊。