1. HTML 入門 (Introduction to HTML)

By /

HTML 是 **HyperText Markup Language（超文字標記語言）**的縮寫，用來描述網頁內容的結構和意義，包括標題、段落、連結、圖片及表單。

瀏覽器讀取 HTML 後，會將內容呈現為網頁。

HTML 是標記語言，不是程式設計語言。 它用來標示內容代表甚麼，而不是提供一般用途的程式邏輯。

1.1 HTML、CSS 與 JavaScript

這三種技術通常會配合使用：

技術主要用途例子
HTML內容與結構標題或按鈕
CSS外觀與版面配置顏色、間距及響應式設計
JavaScript互動行為與應用程式邏輯在使用者操作後更新內容

例如：

<h1>歡迎來到我們的學習中心</h1>
<p>探索我們的網頁入門課程。</p>
<button type="button">顯示課程詳情</button>

HTML 提供元素，CSS 可以設定它們的外觀，而 JavaScript 可以讓按鈕顯示額外資訊。

按鈕不會因為出現在網頁上，就自動執行自訂操作。

1.2 元素、標籤與屬性

大部分 HTML 元素由開始標籤、內容和結束標籤組成：

<p>歡迎來到香港。</p>

在這個例子中：

  • <p> 是開始標籤。
  • 歡迎來到香港。 是內容。
  • </p> 是結束標籤。
  • 整個結構是一個段落元素。

屬性

屬性提供額外資訊或設定：

<p lang="zh-Hant-HK">歡迎來到我們的學習中心。</p>

lang 屬性標示內容的語言。

建議使用引號包住屬性值，讓標記清晰一致。

空元素

部分元素不能包含內容，也沒有結束標籤：

<img src="images/harbour.jpg" alt="從海旁望向維多利亞港">

<img> 是空元素（void element），不要寫成 </img>。

1.3 基本文件結構

一般 HTML 文件的結構如下：

<!doctype html>
<html lang="zh-Hant-HK">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>我的第一個網頁</title>
</head>
<body>
  <h1>你好，香港！</h1>
  <p>這是我的第一個網頁。</p>
</body>
</html>
部分用途
<!doctype html>要求瀏覽器使用現代標準模式呈現文件
<html>文件的根元素
<head>包含文件中繼資料及資源設定
<meta charset="utf-8">宣告使用 UTF-8 字元編碼
Viewport 中繼資料協助流動裝置瀏覽器使用合適的版面視窗
<title>設定文件名稱，通常顯示在瀏覽器分頁上
<body>包含網頁的主要內容

<title> 和 <h1> 的用途不同：

  • <title> 設定文件名稱。
  • <h1> 是網頁上可見的主要標題。

Viewport 設定有助於響應式設計，但要建立響應式版面，仍需要適當的 CSS。

1.4 為香港網站選擇語言

在開始的 <html> 標籤中，設定一個主要語言值。

一般英文

<html lang="en">

當內容是英文，而不需要特別區分地區時，可以使用此設定。

香港英文

<html lang="en-HK">

當內容是英文，並以香港語境為對象時，可以使用此設定。

香港繁體中文

<html lang="zh-Hant-HK">

各部分的意思如下：

部分意思
zh中文
Hant繁體中文字體
HK香港地區

語言屬性描述的是內容語言，不是訪客或伺服器所在地。 它不會翻譯網頁，也不會設定貨幣、時區或字元編碼。

混合語言內容

先在 <html> 設定主要語言，再為其他語言的段落加上個別設定。

例如，以香港英文為主要語言：

<html lang="en-HK">

在 <body> 內：

<p>Welcome to our learning centre.</p>
<p lang="zh-Hant-HK">歡迎來到我們的學習中心。</p>

語言資訊有助於螢幕閱讀器選擇合適的發音，也能協助其他語言處理工具。

不要為了表示三種語言而加入三個 <html> 元素。

1.5 標題、段落與清單

標題

HTML 提供 <h1> 至 <h6> 六個標題層級：

<h1>網頁開發課程</h1>
<h2>HTML 基礎</h2>
<h3>你將學到甚麼</h3>

應按內容的層級選擇標題，而不是按想要的字體大小選擇。

對簡單的入門網頁而言，使用一個清晰的 <h1> 是實用的起點。

段落

<p>HTML 描述網頁的結構。</p>
<p>CSS 控制網頁的外觀。</p>

使用獨立段落組織文字，不要以重複的 <br> 元素製造段落間距。

清單

<ul>
  <li>標題與段落</li>
  <li>連結與圖片</li>
  <li>表單與輸入控制項</li>
</ul>

<ul> 表示無序清單。

當項目的先後次序有意義，例如操作步驟，應使用 <ol>。

1.6 正確巢狀排列元素

元素可以包含其他元素：

<p>先從<strong>清晰的內容</strong>開始。</p>

巢狀元素必須按正確次序結束。

錯誤：

<p>先從<strong>清晰的內容開始。</p></strong>

正確：

<p>先從<strong>清晰的內容開始。</strong></p>

瀏覽器可能會修正無效標記，但修正後的結構未必符合你的原意。

不是所有元素都可以包含任意元素。例如，段落不能包含章節標題。

1.7 建立你的第一個 HTML 檔案

你需要：

  • 純文字編輯器或程式碼編輯器。
  • 網頁瀏覽器。
  • 用來儲存網站檔案的資料夾。

依照以下步驟操作：

  1. 建立名為 my-first-website 的資料夾。
  2. 建立名為 index.html 的檔案。
  3. 使用 UTF-8 編碼儲存檔案。
  4. 加入下方的完整範例。
  5. 在瀏覽器中開啟 index.html。
  6. 修改並儲存檔案，然後重新載入瀏覽器頁面。

確認檔案名稱不是誤存成 index.html.txt。

這個基本範例可以直接以本機檔案開啟。之後的部分功能，例如 Service Worker 或某些網絡請求，則需要本機開發伺服器或 HTTPS 環境。

1.8 完整範例：香港學習網頁

以下中文版範例以 lang="zh-Hant-HK" 設定主要語言，並以 lang="en-HK" 標示英文歡迎訊息。

少量 CSS 用來改善閱讀體驗，不需要 JavaScript。

id: hong-kong-html-getting-started
name: HTML 入門 — 我的第一個網頁
type: html
content: |-
  <!doctype html>
  <html lang="zh-Hant-HK">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>我的第一個網頁 | 香港學習中心</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        color: #222;
        background: #f5f7fa;
        font-family: system-ui, sans-serif;
        line-height: 1.8;
      }

      main {
        max-width: 46rem;
        margin-inline: auto;
        padding: 2rem 1rem;
      }

      h1,
      h2 {
        color: #005ea8;
        line-height: 1.4;
      }

      section {
        margin-block: 1.5rem;
        padding: 1.25rem;
        border: 1px solid #767676;
        border-radius: 0.5rem;
        background: white;
      }

      section > h2 {
        margin-block-start: 0;
      }

      a {
        color: #005ea8;
        text-underline-offset: 0.2em;
      }

      :focus-visible {
        outline: 3px solid #005ea8;
        outline-offset: 4px;
      }

      .welcome {
        padding: 1rem;
        border-inline-start: 4px solid #005ea8;
        background: #eaf2f8;
      }
    </style>
  </head>
  <body>
    <main>
      <h1>你好，香港！</h1>
      <p>這是我的第一個 HTML 網頁。</p>

      <p class="welcome" lang="en-HK">
        Welcome to our learning centre.
      </p>

      <p>
        <a href="#learning-goals">跳至學習目標</a>
      </p>

      <section>
        <h2>關於這個網頁</h2>
        <p>
          這個範例使用 HTML 組織內容，
          並以 CSS 改善網頁的外觀。
        </p>
        <p>
          你不需要安裝額外的程式庫，
          也不需要啟用 JavaScript，就可以閱讀這個網頁。
        </p>
      </section>

      <section id="learning-goals">
        <h2>學習目標</h2>
        <ul>
          <li>了解 HTML 文件的基本結構。</li>
          <li>建立標題、段落與清單。</li>
          <li>選擇合適的內容語言。</li>
          <li>儲存 HTML 檔案並在瀏覽器中開啟。</li>
        </ul>
      </section>

      <section>
        <h2>動手試試</h2>
        <ol>
          <li>修改主要標題。</li>
          <li>加入一段介紹自己興趣的文字。</li>
          <li>在清單中加入另一個學習目標。</li>
          <li>儲存檔案並重新載入瀏覽器頁面。</li>
        </ol>
      </section>
    </main>
  </body>
  </html>

在這個範例中：

  • <main> 標示網頁的主要內容。
  • <section> 將相關內容組成有標題的章節。
  • 頁內連結指向具有 id="learning-goals" 的章節。
  • 英文段落有自己的語言設定。
  • 原生連結保留鍵盤操作能力，並提供清晰可見的焦點提示。

1.9 常見錯誤

錯誤較好的做法
將檔案儲存成 .txt使用 .html 副檔名
使用文書處理軟件建立 HTML使用純文字或程式碼編輯器
將可見段落放在 <head>將網頁內容放在 <body>
使用 <title> 代替可見標題同時提供 <title> 和 <h1>
為不同語言加入多個 <html> 元素設定一個主要語言，再標示個別段落
以為 lang 會翻譯內容實際撰寫或提供翻譯文字
只按字體大小選擇標題按內容層級選擇
以錯誤次序結束巢狀元素保持正確的巢狀結構
以為瀏覽器能顯示就代表 HTML 有效檢查原始碼並驗證標記

本章總結： HTML 賦予網頁內容結構和意義。從完整的文件結構開始，選擇正確的內容語言，按元素的用途使用標記，並將網頁儲存為 UTF-8 編碼的 HTML 檔案。

相關文章

Scroll to Top