Skip to main content

HTML 入門與進階介紹

HTML（HyperText Markup Language，超文本標記語言）是網頁開發的基礎，用於定義網頁的結構與內容。本文將詳細介紹 HTML 的基礎與進階知識，幫助前端工程師快速上手並掌握實用技巧。以下內容將涵蓋基本語法、頁面結構、表單、SEO、可訪問性等主題，並以清晰易懂的方式說明，適合程式語言能力較弱的初學者。

HTML 基礎​

1. 基本語法（HTML Syntax）​

HTML 使用標籤（tags）來定義網頁的結構。標籤通常成對出現，包含開始標籤和結束標籤，例如 。標籤內可以包含內容或屬性（attributes），用於提供額外資訊。

範例：

<p title="這是一段文字">這是一個段落</p>

  • <p> 是段落標籤。

  • title 是屬性，值為 "這是一段文字"，提供滑鼠懸停時的提示。

2. 基礎文件架構​

每個 HTML 文件都有一個標準結構，包含以下主要標籤：

  • <!DOCTYPE html>：宣告文件類型為 HTML5。

  • <html>：文件的根元素。

  • <head>：包含元數據，如標題、字符集等。

  • <body>：包含網頁的可見內容。

範例：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>我的第一個網頁</title>
</head>
<body>
    <h1>歡迎體驗 HTML</h1>
    <p>這是一個簡單的網頁。</p>
</body>
</html>

  • lang="zh-TW"：設定語言為繁體中文。

  • <meta charset="UTF-8">：設定字符編碼，確保正確顯示中文。

3. 元標籤（Meta Tags）​

元標籤用於提供網頁的元數據，通常放在 <head> 中。常見的元標籤包括：

  • charset：定義字符編碼。

  • name="viewport"：適配行動裝置。

  • name="description"：網頁描述，利於 SEO。

範例：

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="這是一個學習 HTML 的範例網頁">

4. 註解（HTML Comments）​

HTML 註解用於添加說明，不會顯示在網頁上。語法為 <!-- 註解內容 -->。

範例：

<!-- 這是一個頁面標題 -->
<h1>我的網頁</h1>

5. 基礎元素與標籤（HTML Elements & Tags）​

以下是常見的 HTML 元素與標籤：

  • <div>：區塊容器，用於組織內容。

  • <span>：行內容器，用於樣式化小段文字。

  • <p>：段落標籤。

  • <h1> 到 <h6>：標題標籤，層級從大到小。

範例：

<div>
    <h1>大標題</h1>
    <p>這是一個段落，包含 <span style="color: blue;">藍色文字</span>。</p>
</div>

6. 類別（Class）與 ID​

  • class：用於定義多個元素的共用樣式，可重複使用。

  • id：用於定義唯一元素的標識，不可重複。

範例：

<div class="container" id="main-content">
    <p class="text-bold">這是粗體文字</p>
</div>

7. 頁面結構與佈局​

HTML5 提供語義化標籤，提升結構清晰度：

  • <header>：頁面或區塊的標頭。

  • <footer>：頁面或區塊的底部。

  • <nav>：導航欄。

  • <section>：內容區塊。

  • <article>：獨立內容。

範例：

<header>
    <h1>網站標題</h1>
</header>
<nav>
    <a href="#home">首頁</a> | <a href="#about">關於</a>
</nav>
<section>
    <article>
        <h2>文章標題</h2>
        <p>文章內容...</p>
    </article>
</section>
<footer>
    <p>© 2025 我的網站</p>
</footer>

使用 <a> 標籤創建超連結，href 屬性指定目標 URL。

範例：

<a href="https://www.example.com" target="_blank">點擊前往範例網站</a>
  • target="_blank"：在新標籤頁打開連結。

9. 圖片與影片（HTML Images & Videos）​

  • 圖片：使用 <img> 標籤，需指定 src 和 alt 屬性。

  • 影片：使用 <video> 標籤，支援多種格式。

範例：

<img src="example.jpg" alt="範例圖片" width="300">
<video controls>
    <source src="example.mp4" type="video/mp4">
    您的瀏覽器不支援影片播放。
</video>

10. 表單（HTML Forms）​

表單用於收集用戶輸入，常用標籤包括：

  • <form>：表單容器。

  • <input>：輸入欄位。

  • <textarea>：多行文字輸入。

  • <button>：按鈕。

範例：

<form action="/submit" method="post">
    <label for="username">使用者名稱：</label>
    <input type="text" id="username" name="username" required>
    <label for="message">留言：</label>
    <textarea id="message" name="message"></textarea>
    <button type="submit">提交</button>
</form>

  • action：表單提交的目標 URL。

  • method：提交方式（GET 或 POST）。

  • required：必填欄位。

HTML 進階​

1. VSCode HTML 快捷鍵（Emmet）​

Emmet 是 VSCode 內建的工具，可快速生成 HTML 結構。以下是常見快捷鍵：

  • div.container：生成 <div class="container"></div>。

  • ul>li\*3：生成包含 3 個 <li> 的 <ul>。

  • !：生成完整的 HTML5 文件結構。

**範例：**在 VSCode 中輸入 div>ul>li\*2 並按 Tab 鍵，生成：

<div>
    <ul>
        <li></li>
        <li></li>
    </ul>
</div>

2. 表單驗證（Form Validation）​

HTML5 提供內建驗證屬性，如 required、pattern 等。

範例：

<form>
    <label for="email">電子郵件：</label>
    <input type="email" id="email" name="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    <button type="submit">提交</button>
</form>

  • type="email"：限制輸入為電子郵件格式。

  • pattern：使用正則表達式進行自訂驗證。

3. SEO 基本知識​

SEO（搜尋引擎最佳化）有助於提升網頁在搜尋引擎中的排名：

  • <title>：設定頁面標題，簡潔且包含關鍵字。

  • <meta name="description">：提供頁面描述，吸引點擊。

  • alt 屬性：為圖片添加描述，利於搜尋引擎與可訪問性。

範例：

<head>
    <title>學習 HTML - 初學者指南</title>
    <meta name="description" content="本頁面提供 HTML 基礎與進階教學，適合初學者學習網頁開發。">
    <img src="example.jpg" alt="HTML 學習範例圖片">
</head>

4. 可訪問性（Accessibility，ARIA Attributes）​

可訪問性確保網頁對所有用戶（包括身障人士）友好。ARIA（Accessible Rich Internet Applications）屬性增強語義。

範例：

<button aria-label="關閉視窗">X</button>
<nav aria-label="主導航">
    <a href="#home">首頁</a>
</nav>
  • aria-label：為元素提供描述，幫助螢幕閱讀器識別。