前言
在數位時代的浪潮中，網站已成為資訊傳遞、品牌曝光與互動體驗的核心媒介，而 HTML 則是建構網站的根基語言。自 HTML5 推出以來，網頁技術進入全新階段——不僅語法更簡潔，也支援語意標記、多媒體播放、離線應用、互動 API 等功能，為前端開發奠定堅實基礎。
本手冊旨在帶領你從基礎到進階，系統化學習 HTML 與 HTML5，結合理論說明與實作範例，並搭配常見問答澄清觀念。無論你是剛接觸網頁設計的初學者，或已具備基礎想深入理解 HTML5 能力的使用者，本書都能成為你穩固前端基礎的學習夥伴。
全書章節循序漸進，從基本標籤與語法出發，涵蓋文件結構、文字內容、清單與表格、超連結、圖片、表單、多媒體、語意化結構、圖形應用、外部嵌入、Web API，最後以最佳實踐收尾。每章皆包含範例程式碼與重點問答，並為多頁式網頁導覽設計鋪路。
現在，就讓我們從一行 <!DOCTYPE html> 開始，啟動網站設計之旅吧！
第一章：HTML 簡介與 HTML5 的革新
HTML（HyperText Markup Language）是構成網頁的骨架語言。透過一系列的標籤（Tag）來描述網頁中各種內容與結構，例如文字、圖片、表格、連結等。HTML 並非程式語言，而是一種標記語言，學習門檻低，適合初學者作為進入前端開發的第一步。
1.1 HTML 的演進
早期的 HTML（如 HTML 3.2, HTML 4.01）僅支援基本內容標記，結構語意模糊，功能有限。隨著網際網路應用需求的提升，HTML5 應運而生，帶來大量革新：
- 語意化標籤（如 <header>, <nav>, <article> 等）提升內容結構清晰度
- 原生多媒體支援（<audio>, <video>）
- 表單控制項強化（<input type="date">, range, color 等）
- 內建圖形繪製（<canvas>, <svg>）
- Web API 擴展（如 localStorage, geolocation, drag and drop）
HTML5 已成為現代網頁開發不可或缺的基礎。
1.2 HTML 文件基本結構
一個合法的 HTML5 文件應包含以下結構：
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>我的第一個網頁</title>
</head>
<body>
<h1>Hello, HTML5!</h1>
<p>這是我的第一段 HTML 內容。</p>
</body>
</html>
元素說明：
<!DOCTYPE html>：宣告此為 HTML5 文檔，簡化過往版本複雜的 doctype 宣告。<html>：整個 HTML 文件的根標籤。<head>：放置頁面設定資訊，不會直接顯示在畫面上。<meta charset="UTF-8">：指定編碼，避免亂碼。<title>：設定瀏覽器分頁顯示的標題。<body>：主要內容顯示區。
1.3 建立你的第一個 HTML 網頁
準備一個純文字編輯器（如 VS Code、Notepad++ 或 Sublime Text），將上述 HTML 程式碼貼入並存成 index.html 檔案，用瀏覽器開啟即可看到畫面。
【開始建立你的第一個 HTML 網頁】
常見問答 (Q&A)
Q1：HTML 和 HTML5 有何差別？
A：HTML5 是 HTML 的第五個主要版本，新增大量語意標籤、多媒體支援與 Web API，讓網頁功能更強大也更容易維護。
Q2：為什麼需要 <!DOCTYPE html>？
A：它告訴瀏覽器以標準模式解析 HTML，避免進入相容模式導致顯示錯誤。
Q3：初學者需要有程式設計背景才能學 HTML 嗎？
A：不需要。HTML 是標記語言，不涉及邏輯運算或流程控制，學習門檻低，適合從零開始學習。
第二章：HTML 文件結構與頁面框架
一份完整且有效的 HTML 文件，不只是內容的堆疊，更包含了明確的結構框架。這章將帶你理解 <head> 和 <body> 兩大區塊的分工、如何管理資源與中繼資訊、載入樣式與腳本，並為整體頁面建立穩固的骨架。
2.1 HTML5 的 Doctype 宣告
<!DOCTYPE html>
HTML5 將 Doctype 宣告簡化為僅一行，與以往 HTML 4.01 的繁瑣不同。這樣做是為了引導瀏覽器進入標準模式（standard mode），避免怪異模式（quirks mode）所造成的解析誤差。
2.2 頁面結構：<html>、<head> 與 <body>
<html lang="zh-Hant">
<head>
...
</head>
<body>
...
</body>
</html>
<html>為根元素，lang 屬性設定語言。<head>放置對瀏覽器有意義的資料，但使用者看不到的資訊，如標題、描述、字元集、樣式連結、JavaScript 引入等。<body>為網頁主體，呈現所有使用者可見的內容，如文字、圖片、表單等。
2.3 <head> 中的重要元素
<head>
<meta charset="UTF-8">
<title>網站標題</title>
<meta name="description" content="網站簡介文字">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<meta charset>：設定編碼（通常為 UTF-8）以避免亂碼。<title>：設定瀏覽器分頁的標題。<meta name="description">：提供搜尋引擎的摘要。<meta name="viewport">：使頁面響應式，適應行動裝置寬度。<link>：載入外部 CSS 樣式。<script>：載入外部 JavaScript 程式。
2.4 <body> 的基本內容結構
<body>
<h1>主標題</h1>
<p>段落內容。</p>
<img src="logo.webp" alt="網站 Logo">
</body>
常見問答 (Q&A)
Q1：可以省略 <html>、<head> 或 <body> 標籤嗎？
A：在某些情況下，瀏覽器會自動補全這些標籤，但為了程式碼清晰與可維護性，建議明確寫出。
Q2：<meta charset> 一定要寫在最上方嗎？
A：是的，應放在 <head> 的最前面，以確保瀏覽器正確解析字元編碼，避免亂碼。
Q3：如何載入外部樣式與腳本？
A：使用 <link rel="stylesheet" href="style.css"> 載入 CSS，使用 <script src="script.js"></script> 載入 JavaScript。通常 CSS 放在 <head>，JS 建議放在 <body> 結尾以加快載入速度。
第三章：文字內容與段落
文字是網站中最基本也最核心的資訊單位。本章將介紹 HTML 中處理文字的各種標籤與排版技巧，包括標題、段落、文字強調、引用與換行等語法。
3.1 標題與段落
<h1>到<h6>：代表六種等級的標題，<h1> 為最重要，字體最大。<p>：用於建立段落，是最常見的文字區塊元素。
範例：
<h1>網站主標題</h1>
<h2>章節標題</h2>
<p>這是一段說明文字，描述網站的內容與主旨。</p>
3.2 換行與分隔線
<br>：單一換行，不會產生段落間距。<hr>：水平線，常用於段落之間的視覺分隔。
3.3 文字強調與樣式
<strong>：語意上強調，通常呈現粗體。<em>：語意上著重，通常呈現斜體。<b>/<i>：純樣式粗體與斜體，不具語意。<mark>：高亮顯示重點文字。
範例：
<p>這段文字包含 <strong>重點</strong> 和 <em>需要注意</em> 的語句。</p>
<p>可以使用 <mark>黃色背景</mark> 來突顯文字。</p>
3.4 引用與原始碼文字
<blockquote>：段落式長引用。<q>：行內短引用。<code>：呈現程式碼文字。<pre>：保留空白與格式的預格式文字區塊。
範例：
<blockquote>
實踐是檢驗真理的唯一標準。
</blockquote>
<p>如同 <q>知識就是力量</q> 所說。</p>
<pre><code>let x = 10;
console.log(x);</code></pre>
常見問答 (Q&A)
Q1：<strong> 與 <b> 有何不同？
A：兩者外觀相同（預設為粗體），但 <strong> 有語意，用於強調語氣或重點，對 SEO 和無障礙更友善。
Q2：什麼時候應使用 <pre>？
A：當你需要保留原始格式（如空格、換行），例如呈現程式碼、詩詞、ASCII 圖形等，可使用 <pre>。
Q3：如何插入兩段文字之間的換行？
A：使用 <br>，適合用在地址、詩詞等格式控制精細的文字中，不建議用來取代段落結構。
第四章：清單與表格
在網頁中，常見的資訊呈現方式之一就是使用清單與表格。這章節將帶你學會如何使用 HTML 建立無序清單、有序清單、定義清單以及結構化資料表格。
4.1 無序清單 <ul> 與有序清單 <ol>
<ul>：無序清單（圓點標示）<ol>：有序清單（數字/字母編號）<li>：清單項目（無論是哪種清單）
範例：
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<ol>
<li>註冊帳號</li>
<li>登入系統</li>
<li>填寫表單</li>
</ol>
4.2 定義清單 <dl>
<dl>：定義清單容器<dt>：定義項目名稱（如術語）<dd>：定義描述內容
範例：
<dl>
<dt>HTML</dt>
<dd>網頁結構語言</dd>
<dt>CSS</dt>
<dd>網頁樣式描述語言</dd>
</dl>
4.3 建立表格 <table>
一個表格通常由下列標籤組成：
<table>：表格容器<tr>：表格列（row）<td>：資料儲存格（cell）<th>：表頭儲存格（加粗且置中）
範例：
<table>
<tr>
<th>姓名</th>
<th>電話</th>
</tr>
<tr>
<td>王小明</td>
<td>0912345678</td>
</tr>
</table>
4.4 表格進階：<thead>, <tbody>, <tfoot>
這些標籤能讓大型表格更具結構性：
<thead>：表頭區域<tbody>：主要資料區域<tfoot>：表尾（通常用於統計或摘要）
<table>
<thead>
<tr><th>品項</th><th>價格</th></tr>
</thead>
<tbody>
<tr><td>書籍</td><td>300</td></tr>
<tr><td>筆電</td><td>28000</td></tr>
</tbody>
<tfoot>
<tr><td>總計</td><td>28300</td></tr>
</tfoot>
</table>
4.5 合併儲存格：colspan 與 rowspan
colspan="n"：橫跨 n 欄rowspan="n"：縱跨 n 列
<table>
<tr>
<th rowspan="2">姓名</th>
<th colspan="2">聯絡方式</th>
</tr>
<tr>
<td>電話</td>
<td>Email</td>
</tr>
<tr>
<td>陳怡君</td>
<td>0987654321</td>
<td>june@example.com</td>
</tr>
</table>
常見問答 (Q&A)
Q1：無序清單與有序清單的應用差異？
A：若項目之間沒有順序關係（如購物清單），用 <ul>；若需表達順序（如流程步驟），用 <ol>。
Q2：表格能否用來排版？
A：不建議。表格應用於呈現數據資訊，頁面排版應交由 CSS 負責。
Q3：是否可以在表格中混合使用 th 和 td？
A：可以，但應確保語意清晰，例如第一列為表頭時可用 th，其餘資料列用 td。
第五章：超連結與導覽結構
超連結（Hyperlink）是連接網頁世界的基礎建設。本章將介紹如何使用 <a> 標籤建立內部與外部連結、頁面內部錨點、電子郵件與電話連結等多種連結方式，並說明 <nav> 語意區塊與導覽列的結構設計。
5.1 建立基本連結 <a>
語法：
<a href="網址">連結文字</a>
href：指定連結目標，可為絕對 URL 或相對路徑。
範例：
<a href="https://www.google.com">前往 Google</a>
<a href="about.html">關於我們</a>
5.2 在新分頁開啟連結：target="_blank"
<a href="https://example.com" target="_blank" rel="noopener noreferrer">開新視窗</a>
target="_blank"：新分頁開啟連結。rel="noopener noreferrer"：提高安全性，避免新視窗控制原頁。
5.3 電子郵件與電話連結
mailto:：點擊後啟動郵件軟體。tel:：在手機裝置上啟動撥號功能。
範例：
<a href="mailto:support@example.com">聯絡客服</a>
<a href="tel:0912345678">撥打電話</a>
5.4 頁內錨點跳轉
- 為目標元素設定 id
- 使用 href="#id名稱" 指向目標
範例：
<!-- 錨點目標 -->
<h2 id="faq">常見問題</h2>
<!-- 錨點連結 -->
<a href="#faq">跳至常見問題</a>
5.5 建立導覽區塊 <nav>
<nav> 是 HTML5 語意標籤，用於標記網頁導覽區域。
<nav>
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="about.html">關於</a></li>
<li><a href="services.html">服務</a></li>
<li><a href="contact.html">聯絡</a></li>
</ul>
</nav>
常見問答 (Q&A)
Q1：什麼時候該用 target="_blank"？
A：當連結會帶使用者離開你的網站，或是開啟 PDF、下載檔案等不希望覆蓋當前頁面的情況。
Q2：rel="noopener noreferrer" 是否必要？
A：強烈建議加上！可防止新開啟的頁面透過 window.opener 存取原始頁面，避免釣魚攻擊。
Q3：如何製作「回到頂部」的按鈕？
A：在頁面最上方元素加上 id，例如 <body id="top">，然後使用 <a href="#top">回到頂部</a>。
第六章：圖片與圖形內容
圖片是網頁視覺呈現的重要元素。本章將介紹 <img> 標籤的使用、圖片格式選擇、響應式圖片、圖片地圖等技術，並探討圖片載入優化與無障礙設計。
6.1 基本圖片插入 <img>
基本語法：
<img src="image.webp" alt="圖片描述">
src：圖片檔案路徑（必要）alt：替代文字，當圖片無法顯示時出現（建議加上）
6.2 圖片尺寸與樣式控制
<img src="logo.webp" alt="公司標誌" width="300" height="100">
建議使用 CSS 控制圖片樣式，而非直接在 HTML 設定寬高，以保持樣式與結構分離。
6.3 圖片格式選擇建議
- JPEG/JPG：照片、複雜色彩，支援壓縮
- PNG：需要透明背景、圖示、文字圖片
- GIF：簡單動畫、少色彩圖片
- WebP：新世代格式，檔案更小但需檢查瀏覽器支援
- SVG：向量圖形、圖示、可縮放不失真
6.4 響應式圖片：srcset 與 sizes
為不同螢幕大小提供適合的圖片：
<img src="small.webp"
srcset="small.webp 300w,
medium.webp 600w,
large.webp 1200w"
sizes="(max-width: 600px) 300px,
(max-width: 1200px) 600px,
1200px"
alt="響應式圖片">
6.5 圖片地圖 <map> 與 <area>
在圖片上建立可點擊的熱區：
<img src="map.webp" alt="地圖" usemap="#worldmap">
<map name="worldmap">
<area shape="rect" coords="0,0,100,100" href="taiwan.html" alt="台灣">
<area shape="circle" coords="200,150,50" href="japan.html" alt="日本">
</map>
6.6 延遲載入（Lazy Loading）
<img src="image.webp" alt="圖片" loading="lazy">
loading="lazy" 屬性讓圖片在接近可視區域時才載入，提升頁面載入速度。
常見問答 (Q&A)
Q1：alt 屬性是否可以省略？
A：技術上可以，但強烈建議加上。alt 提供無障礙支援、SEO 優化，且在圖片載入失敗時提供文字說明。
Q2：如何選擇正確的圖片格式？
A：照片用 JPEG、需要透明用 PNG、簡單圖示用 SVG、動畫用 GIF 或 WebP。考量檔案大小與品質的平衡。
Q3：srcset 是否所有瀏覽器都支援？
A：現代瀏覽器都支援，不支援的瀏覽器會退回使用 src 屬性的圖片。
第七章：語意標籤與結構化文件
HTML5 引入大量語意標籤，讓網頁結構更清晰、更具可讀性。本章將介紹 <header>、<nav>、<main>、<article>、<section>、<aside>、<footer> 等語意元素的正確使用方式。
7.1 頁面結構語意標籤
<header>
<h1>網站標題</h1>
<nav>導覽選單</nav>
</header>
<main>
<article>
<h2>文章標題</h2>
<p>文章內容...</p>
</article>
</main>
<aside>
<h3>側邊欄</h3>
<p>相關連結...</p>
</aside>
<footer>
<p>版權資訊</p>
</footer>
7.2 各語意標籤說明
<header>：頁首區域，包含標題、logo、導覽等<nav>：導覽連結區域<main>：頁面主要內容（每頁只能有一個）<article>：獨立完整的內容單元（如部落格文章）<section>：主題相關的內容區塊<aside>：側邊欄、補充資訊<footer>：頁尾區域，版權、聯絡資訊等
7.3 <article> 與 <section> 的差異
<article>：可獨立存在、完整的內容（如一篇文章、一則評論）<section>：將內容分組的通用區塊（如章節）
<article>
<header>
<h2>HTML5 入門教學</h2>
<time datetime="2025-01-15">2025年1月15日</time>
</header>
<section>
<h3>第一節：基礎概念</h3>
<p>...</p>
</section>
<section>
<h3>第二節：實作練習</h3>
<p>...</p>
</section>
</article>
7.4 時間標記 <time>
<time datetime="2025-01-15T09:00">2025年1月15日上午9點</time>
datetime 屬性提供機器可讀的日期時間格式，有助於搜尋引擎理解。
7.5 細節與摘要 <details> 與 <summary>
建立可展開/收合的內容區塊：
<details>
<summary>點擊查看更多</summary>
<p>這是詳細內容，預設是隱藏的。</p>
</details>
常見問答 (Q&A)
Q1：是否每個網頁都需要使用所有語意標籤？
A：不需要。根據內容需求選用合適的標籤，不要為了使用而使用。
Q2：可以在 <article> 裡面放 <section> 嗎？
A：可以。文章內可包含多個章節（section），也可以有自己的 header 和 footer。
Q3：<main> 可以有多個嗎？
A：不行。每個頁面只能有一個 <main> 元素，代表頁面的主要內容。
第八章：表單與使用者輸入
表單是網頁與使用者互動的重要橋樑。本章將深入介紹 HTML 表單的各種元素、輸入類型、驗證機制，以及 HTML5 新增的表單功能。
8.1 基本表單結構
<form action="/submit" method="post">
<label for="username">使用者名稱：</label>
<input type="text" id="username" name="username" required>
<label for="password">密碼：</label>
<input type="password" id="password" name="password" required>
<button type="submit">送出</button>
</form>
action：表單資料送出的目標 URLmethod：HTTP 方法（GET 或 POST）name：欄位名稱，用於傳送資料id：元素識別碼，與 label 配對
8.2 文字輸入欄位
單行文字輸入：
<input type="text" placeholder="請輸入姓名" maxlength="50">
多行文字輸入：
<textarea rows="4" cols="50" placeholder="請輸入留言"></textarea>
8.3 HTML5 新增輸入類型
<!-- Email 輸入 -->
<input type="email" placeholder="user@example.com">
<!-- 數字輸入 -->
<input type="number" min="1" max="100" step="1">
<!-- 日期選擇 -->
<input type="date" min="2025-01-01" max="2025-12-31">
<!-- 時間選擇 -->
<input type="time">
<!-- 顏色選擇 -->
<input type="color">
<!-- 範圍滑桿 -->
<input type="range" min="0" max="100" value="50">
<!-- URL 輸入 -->
<input type="url" placeholder="https://example.com">
<!-- 電話輸入 -->
<input type="tel" pattern="[0-9]{4}-[0-9]{6}">
8.4 選擇元素
下拉選單：
<select name="city">
<option value="">請選擇城市</option>
<option value="taipei">台北</option>
<option value="taichung">台中</option>
<option value="kaohsiung">高雄</option>
</select>
單選按鈕：
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
複選框：
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">訂閱電子報</label>
8.5 表單驗證
<!-- 必填欄位 -->
<input type="text" required>
<!-- 格式驗證 -->
<input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<!-- 長度限制 -->
<input type="text" minlength="3" maxlength="20">
<!-- 數值範圍 -->
<input type="number" min="18" max="100">
8.6 檔案上傳
<!-- 單一檔案 -->
<input type="file" accept="image/*">
<!-- 多個檔案 -->
<input type="file" multiple accept=".webp,.webp,.pdf">
常見問答 (Q&A)
Q1：GET 和 POST 方法有何差異？
A：GET 將資料附加在 URL 後面，適合搜尋、查詢；POST 將資料放在請求主體中，適合提交敏感資料或大量資料。
Q2：如何讓表單更友善？
A：使用 label 標籤、提供 placeholder 提示、加入適當的驗證訊息、使用 fieldset 分組相關欄位。
Q3：HTML5 表單驗證能否完全取代 JavaScript 驗證？
A：不建議。HTML5 驗證提供基本檢查，但複雜邏輯（如密碼強度、非同步檢查）仍需 JavaScript。且伺服器端驗證永遠不可省略。
第九章：多媒體元素：音訊與影片
HTML5 原生支援音訊和影片播放，無需依賴 Flash 等外掛程式。本章將介紹 <audio> 和 <video> 標籤的使用方式、格式支援、控制選項與字幕功能。
9.1 音訊播放 <audio>
基本用法：
<audio controls>
<source src="music.mp3" type="audio/mpeg">
<source src="music.ogg" type="audio/ogg">
您的瀏覽器不支援音訊播放。
</audio>
常用屬性：
controls：顯示播放控制介面autoplay：自動播放（需謹慎使用）loop：循環播放muted：靜音preload：預載選項（none/metadata/auto）
9.2 影片播放 <video>
基本屬性：
width / height：設定播放器尺寸poster：預覽圖（尚未播放前顯示的圖片）autoplay、loop、muted、preload同 <audio>
建議提供多種格式：
<video width="640" height="360" controls poster="preview.webp">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
您的瀏覽器不支援影片播放。
</video>
9.3 加入字幕與說明 <track>
<track> 可為 <video> 提供字幕、描述、章節標籤等。
<video controls>
<source src="video.mp4" type="video/mp4">
<track src="subtitle.vtt" kind="subtitles" srclang="zh" label="繁體中文" default>
</video>
常用屬性：
kind：字幕類型（subtitles、captions、descriptions、chapters）srclang：字幕語言（如 zh、en）label：字幕選單中顯示的文字default：預設顯示該字幕
9.4 外部影音平台嵌入
若需嵌入 YouTube、Vimeo 等影片，可使用 <iframe>：
<iframe width="560" height="315"
src="https://www.youtube.com/embed/影片ID"
frameborder="0" allowfullscreen></iframe>
這種方式無需儲存影片檔案於本地，適合展示已有公開影片。
常見問答 (Q&A)
Q1：為何影片無法自動播放？
A：多數現代瀏覽器預設禁止含聲音的自動播放。若設定 autoplay 同時加上 muted，可提高成功率。
Q2：影片不支援某格式怎麼辦？
A：提供多種影片格式（如 MP4、WebM、OGG）以因應不同瀏覽器的支援差異。
Q3：字幕檔格式為何？
A：HTML5 預設支援 WebVTT（副檔名 .vtt）作為字幕格式，內容為純文字，包含時間碼與字幕內容。
第十章：Canvas 與 SVG 圖形應用
HTML5 新增了 <canvas> 與 <svg>，賦予網頁繪圖能力，可用於圖表、動畫、遊戲、資料視覺化等場景。本章將介紹這兩者的基礎用法與差異。
10.1 <canvas> 基礎用法
<canvas> 提供一塊畫布，須透過 JavaScript 繪製內容。
HTML：
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #000"></canvas>
JavaScript：
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "skyblue";
ctx.fillRect(20, 20, 100, 50);
常見應用：
- 即時圖表
- 遊戲畫面
- 自由繪圖、簽名區
10.2 Canvas 繪圖指令簡介
fillRect(x, y, w, h)：繪製填色矩形strokeRect(x, y, w, h)：繪製描邊矩形beginPath()、moveTo()、lineTo()：畫線段arc(x, y, r, start, end)：畫圓弧fillText()、strokeText()：繪製文字
ctx.beginPath();
ctx.arc(150, 75, 40, 0, 2 * Math.PI);
ctx.fill();
10.3 <svg> 向量圖形
<svg> 是標記式語言（XML 語法），可直接描述圖形元素，具縮放不失真的優點。
範例：
<svg width="200" height="100">
<circle cx="50" cy="50" r="40" fill="green" stroke="black" stroke-width="2" />
<text x="100" y="55" font-size="16">Hello SVG</text>
</svg>
常用圖形元素：
<circle>：圓形<rect>：矩形<line>：線段<polygon>/<polyline>：多邊形、折線<text>：文字
10.4 Canvas 與 SVG 差異比較
| 比較項目 | Canvas | SVG |
|---|---|---|
| 語法 | JavaScript API 操作 | HTML/XML 標籤結構 |
| 渲染方式 | 像素位圖（Bitmap） | 向量圖形（Vector） |
| 可縮放性 | 放大會失真 | 可任意縮放不失真 |
| 元素可選取性 | 不可（無 DOM 節點） | 可（每個圖形為 DOM 節點） |
| 適用情境 | 即時動態渲染、遊戲、特效 | 圖示、地圖、靜態圖、互動資料視覺化 |
10.5 圖形整合應用建議
- 若需動態更新、高效渲染，選擇 <canvas>
- 若需互動圖形、支援事件（如 hover, click），選擇 <svg>
- 可混合應用：背景用 Canvas，前景互動圖形用 SVG
常見問答 (Q&A)
Q1：Canvas 可以不用 JavaScript 嗎？
A：不行。Canvas 是一個空畫布，需搭配 JavaScript 才能繪製內容。
Q2：SVG 支援互動事件嗎？
A：是的，SVG 中的每個圖形都是 DOM 節點，可綁定事件監聽器，例如 onclick、onmouseover 等。
Q3：我該選擇哪一種圖形技術？
A：依用途而定。若需動態、高效圖形（如遊戲）建議 Canvas；若需語意化、互動性與可縮放的圖形（如圖示或資料視覺化）則推薦 SVG。
第十一章：嵌入外部內容與應用
有時我們希望將其他網頁、地圖、PDF 或影片等第三方內容直接嵌入目前的網頁中。HTML 提供了 <iframe>, <embed>, <object> 三種方式來實現。
11.1 使用 <iframe> 嵌入網頁內容
<iframe> 是最常見的外部內容嵌入方式。
基本語法：
<iframe src="https://example.com" width="600" height="400"></iframe>
常見屬性：
src：目標網頁網址width / height：嵌入框的大小frameborder：是否顯示邊框（HTML5 中已廢除，建議用 CSS）allowfullscreen：允許全螢幕播放（例如 YouTube）loading="lazy"：延遲載入，提升效能sandbox：限制 iframe 的功能，如禁止表單提交、腳本執行等
嵌入 YouTube 範例：
<iframe width="560" height="315" src="https://www.youtube.com/embed/影片ID"
title="YouTube video" allowfullscreen></iframe>
11.2 使用 <embed> 嵌入多媒體或檔案
<embed> 用於嵌入媒體資源（PDF、影片、動畫等）。為自閉標籤。
範例：嵌入 PDF
<embed src="sample.pdf" type="application/pdf" width="500" height="400">
注意事項：
- 使用者瀏覽器需支援相應檔案格式
- <embed> 無法提供備援內容（fallback）
11.3 使用 <object> 較具備援能力
<object> 功能類似 <embed>，但可包含替代內容。
範例：
<object data="sample.pdf" type="application/pdf" width="500" height="400">
若無法顯示，<a href="sample.pdf">點此下載 PDF</a>
</object>
推薦用法：
- <embed>：簡單直接、無替代內容需求時
- <object>：需提供備案或不確定支援性時
11.4 安全性建議
當嵌入第三方網站時，應注意：
- 為 <iframe> 加上 sandbox 屬性限制其行為
- 使用 HTTPS 資源，避免混合內容錯誤
- 設定 referrerpolicy, allow 控制 iframe 權限
常見問答 (Q&A)
Q1：<iframe> 能嵌入任何網站嗎？
A：不一定。部分網站（如 Facebook、Google）會透過 HTTP 標頭（X-Frame-Options）阻止被嵌入，以防釣魚攻擊。
Q2：PDF 檔無法顯示怎麼辦？
A：使用 <object> 提供備案連結，或提示使用者手動下載。部分手機裝置或舊瀏覽器不支援 PDF 預覽。
Q3：可以在頁面中同時使用多個 <iframe> 嗎？
A：可以。但過多 <iframe> 會影響效能，建議控制數量並加上 loading="lazy" 以延遲載入。
第十二章：HTML5 Web API 應用
HTML5 不僅帶來新標籤與語意標記，還導入許多實用的 Web API，擴展了瀏覽器的功能。本章將介紹幾個常用的 API：localStorage、geolocation、drag & drop，以及離線應用基本觀念。
12.1 localStorage 與 sessionStorage
這兩個 API 提供在瀏覽器中儲存資料的方法，無需使用 Cookie。
差異：
- localStorage：資料永久保存，直到手動清除。
- sessionStorage：資料僅在該瀏覽器分頁有效，關閉即失效。
使用範例：
// 儲存資料
localStorage.setItem("username", "小明");
// 讀取資料
const name = localStorage.getItem("username");
// 刪除資料
localStorage.removeItem("username");
應用情境：記錄使用者偏好、購物車內容、主題設定等。
12.2 Geolocation API（地理定位）
可取得使用者的 GPS 位置（需使用者授權）。
基本用法：
navigator.geolocation.getCurrentPosition(function(position) {
const lat = position.coords.latitude;
const lon = position.coords.longitude;
console.log(`目前位置：${lat}, ${lon}`);
});
適用場景：地圖定位、附近店家推薦、氣象服務。
注意事項：
- 須在 HTTPS 環境下執行
- 使用者須明確授權
12.3 拖放功能（Drag and Drop）
HTML5 提供原生支援，讓元素可拖曳與放置。
HTML：
<div id="dragme" draggable="true">拖我</div>
<div id="target" style="border: 1px solid #000; height: 100px;">放這裡</div>
JavaScript：
document.getElementById("dragme").addEventListener("dragstart", e => {
e.dataTransfer.setData("text/plain", "Hello");
});
document.getElementById("target").addEventListener("dragover", e => {
e.preventDefault();
});
document.getElementById("target").addEventListener("drop", e => {
const text = e.dataTransfer.getData("text/plain");
e.target.textContent = text;
});
適用場景：拖曳檔案上傳、UI 組件移動等。
12.4 離線功能與 PWA 概念
HTML5 最初引入 AppCache，但已被棄用。現今的主流做法是透過 Service Worker 建立 Progressive Web App（PWA），使網頁支援離線瀏覽、背景快取與通知。
初步認識：
- PWA 使用 manifest.json 描述應用
- 利用 Service Worker 攔截網路請求、管理快取
雖屬進階主題，但了解其運作模式有助於未來進階學習。
常見問答 (Q&A)
Q1：localStorage 有容量限制嗎？
A：一般瀏覽器限制約為 5MB，超過將無法儲存。
Q2：我可以追蹤使用者地點而不顯示提示嗎？
A：不行。出於隱私保護，瀏覽器會要求用戶授權，且需在 HTTPS 網站下才能使用定位功能。
Q3：為什麼我使用 AppCache 發現已經無效？
A：AppCache 已在現代瀏覽器中被淘汰，建議使用 Service Worker 來實現離線功能。
第十三章：最佳實踐與常見錯誤整理
撰寫 HTML 時，除了掌握語法，良好的結構、語意與可維護性也同等重要。本章將統整 HTML 開發中的實務建議、易犯錯誤與 SEO／可及性等最佳實踐。
13.1 語意化優先
- 優先使用語意標籤，如 <header>, <nav>, <article>, <footer> 等
- 避免使用過多無意義的 <div> 與 <span>（除非無適用語意標籤）
- 讓程式碼更可讀、更容易維護與搜尋引擎解析
13.2 標籤正確嵌套
- 不要把區塊元素（如 <div>, <p>, <section>）放在行內元素（如 <a>, <span>）裡面
- 使用 W3C HTML 驗證工具檢查語法錯誤：https://validator.w3.org
13.3 結構清晰與縮排一致
- 每層結構使用一致縮排（通常為 2 或 4 空格）
- 適度留白，避免過度巢狀造成閱讀困難
- 善用註解（<!-- 註解內容 -->）標記區塊功能
13.4 可及性（Accessibility, A11y）
- 圖片加上 alt 替代文字
- 表單輸入欄位搭配 <label>
- 避免僅靠顏色區分資訊（色盲者無法分辨）
- 使用語意標籤有助於螢幕閱讀器理解頁面內容
13.5 搜尋引擎最佳化（SEO）
- 每頁應有唯一 <h1> 主標題，標題層級需有邏輯性
- 使用 <title> 與 <meta name="description"> 提供頁面摘要
- 圖片使用語意 alt，便於圖片搜尋與無障礙支援
- 避免關鍵字堆砌與隱藏文字（會被搜尋引擎懲罰）
13.6 效能與相容性考量
- 精簡 HTML 結構，避免冗長嵌套
- 頁面切割適當，避免單一頁面過大
- 測試不同裝置與瀏覽器顯示效果
- 使用現代 HTML5 功能時，搭配後備方案（fallback）
13.7 廢棄標籤與風格分離
不建議使用的 HTML 標籤：
- <font>, <center>, <marquee>, <bgsound> 等已被淘汰
- 用 CSS 控制外觀樣式，避免將樣式硬編碼於 HTML
常見問答 (Q&A)
Q1：語意標籤是否只是寫給搜尋引擎看的？
A：不僅如此，語意標籤能幫助人類開發者理解結構，也提升無障礙性，對所有用戶都是利多。
Q2：<div> 真的不能用了嗎？
A：當無適合語意標籤時，仍可使用 <div> 作為通用容器。但應搭配 class 或 id 賦予語意。
Q3：為何要避免 <font> 等標籤？
A：這些標籤已不被現代 HTML 規範支援，外觀控制應交由 CSS 處理，分離結構與樣式是現代網頁設計原則。
結語：從 HTML 出發，走向前端開發之路
恭喜你完成 HTML5 網頁設計完整手冊的學習！在這趟學習旅程中，我們從基本的網頁標記語法出發，一步步深入語意結構、多媒體應用、互動 API 與最佳實踐，逐步建構出具有現代感、可維護性高且具備良好可及性的網站基礎。
HTML 是前端開發的第一塊基石，但並非終點。接下來你可以持續進修：
- 掌握 CSS，控制網頁的視覺風格與排版佈局
- 學習 JavaScript，讓網頁具備互動性與邏輯行為
- 探索前端框架（如 React、Vue、Svelte），強化開發效率
- 認識 SEO、無障礙設計、網站效能優化等實務技巧
記得，好的網頁設計不僅是美觀，更要兼具結構、語意與可用性。
願這份手冊成為你邁向前端職人之路的起點，並在未來的學習與實作中，持續深化與拓展你的技能。
—— HTML 是語言，網頁是舞台，創作者是你。
