📚 本課學習目標

  • 掌握各種文字格式化標籤
  • 了解語義化標籤的重要性
  • 學會使用特殊字符和符號
  • 能夠建立格式豐富的文字內容

🎨 基本文字格式化標籤

1. 粗體文字

<strong>這段文字很重要（語義化）</strong>
<b>這段文字是粗體（純樣式）</b>

顯示效果： - 這段文字很重要（語義化） - 這段文字是粗體（純樣式）

區別： - <strong>：表示內容很重要（有語義） - <b>：只是讓文字變粗（純視覺效果）

2. 斜體文字

<em>這段文字需要強調（語義化）</em>
<i>這段文字是斜體（純樣式）</i>

顯示效果： - 這段文字需要強調（語義化） - 這段文字是斜體（純樣式）

3. 底線文字

<u>這段文字有底線</u>

顯示效果： - 這段文字有底線

4. 刪除線

<del>這段文字被刪除了</del>
<s>這段文字不再準確</s>

顯示效果： - ~~這段文字被刪除了~~ - ~~這段文字不再準確~~

5. 插入文字

<ins>這段文字是新加入的</ins>

顯示效果： - 這段文字是新加入的（通常有底線）

📝 文字標記標籤

1. 標記/高亮文字

<mark>這段文字被標記了</mark>

顯示效果： - 這段文字被標記了（通常是黃色背景）

2. 小字體

<small>這是小字體文字</small>

3. 上標和下標

水的化學式是 H<sub>2</sub>O
愛因斯坦的質能方程式是 E=mc<sup>2</sup>

顯示效果： - 水的化學式是 H₂O - 愛因斯坦的質能方程式是 E=mc²

💻 實作練習 1：格式化文字

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>文字格式化範例</title>
</head>
<body>
    <h1>文字格式化示範</h1>

    <p>這是<strong>非常重要</strong>的資訊！</p>
    <p>請<em>特別注意</em>這個部分。</p>
    <p>原價 <del>$1000</del> 特價 <strong>$800</strong></p>
    <p>我最喜歡的元素是 O<sub>2</sub></p>
    <p>2<sup>3</sup> = 8</p>
    <p><mark>這段話很重要，要標記起來！</mark></p>
</body>
</html>

📚 引用標籤

1. 短引用

<p>愛因斯坦說過：<q>想像力比知識更重要。</q></p>

顯示效果： - 愛因斯坦說過："想像力比知識更重要。"

2. 長引用（區塊引用）

<blockquote cite="https://example.com">
    <p>人生就像騎單車，想保持平衡就得往前走。</p>
    <footer>— 愛因斯坦</footer>
</blockquote>

3. 縮寫

<p><abbr title="HyperText Markup Language">HTML</abbr> 是網頁的基礎。</p>

顯示效果： - 滑鼠移到 HTML 上會顯示完整名稱

💻 程式碼相關標籤

1. 行內程式碼

<p>使用 <code>console.log()</code> 可以在主控台輸出訊息。</p>

2. 程式碼區塊

<pre>
<code>
function sayHello() {
    console.log("Hello, World!");
}
</code>
</pre>

3. 鍵盤輸入

<p>按下 <kbd>Ctrl</kbd> + <kbd>C</kbd> 可以複製文字。</p>

4. 變數

<p>請將結果存入 <var>x</var> 變數中。</p>

5. 範例輸出

<p>程式執行後顯示：<samp>Hello, World!</samp></p>

🔤 特殊字符和符號

HTML 中某些字符有特殊意義，需要使用實體字符來顯示：

顯示 實體字符 說明
< &lt; 小於符號
> &gt; 大於符號
& &amp; 和號
" &quot; 雙引號
' &apos; 單引號
© &copy; 版權符號
® &reg; 註冊商標
™ &trade; 商標
€ &euro; 歐元符號
£ &pound; 英鎊符號
¥ &yen; 日圓/人民幣符號
&nbsp; 不間斷空格

範例

<p>在 HTML 中，&lt;p&gt; 是段落標籤。</p>
<p>&copy; 2026 版權所有。</p>
<p>價格：&euro;99.99</p>

💻 實作練習 2：完整範例

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>文字格式化完整範例</title>
</head>
<body>
    <h1>產品介紹</h1>

    <h2>全新智慧手機</h2>

    <p><strong>重要公告：</strong>限時優惠活動開跑！</p>

    <p>
        原價 <del>$15,000</del> 
        <mark>現在只要 <strong>$12,000</strong></mark>
    </p>

    <h3>產品特色</h3>
    <p>
        採用最新的 <abbr title="人工智慧">AI</abbr> 技術，
        搭載 8GB <abbr title="Random Access Memory">RAM</abbr>。
    </p>

    <h3>技術規格</h3>
    <p>
        電池容量：5000mAh<br>
        螢幕尺寸：6.5"<br>
        重量：180g
    </p>

    <h3>顧客評價</h3>
    <blockquote>
        <p>這是我用過<em>最棒</em>的手機！效能超級好！</p>
        <footer>— 王小華</footer>
    </blockquote>

    <p><small>&copy; 2026 科技公司版權所有。</small></p>
</body>
</html>

📝 本課重點回顧

  • ✅ <strong> 和 <em> 是語義化標籤，優於 <b> 和 <i>
  • ✅ 使用 <mark> 標記重要文字
  • ✅ 使用 <sub> 和 <sup> 顯示下標和上標
  • ✅ <blockquote> 用於長引用，<q> 用於短引用
  • ✅ 使用實體字符顯示特殊符號（如 &lt; &copy;）
  • ✅ <code> 和 <pre> 用於顯示程式碼

🎯 課後練習

  1. 基礎練習：建立一個書籍介紹頁面 - 使用 <h1> 顯示書名 - 使用 <strong> 標註作者 - 用 <blockquote> 引用書中的一段話 - 用 <mark> 標記關鍵訊息 - 加入價格（原價用刪除線，特價用強調）

  2. 進階挑戰：建立一個科學文章頁面 - 使用 <abbr> 標註縮寫（如 DNA、CPU） - 使用 <sub> 和 <sup> 顯示化學式（如 H₂O、CO₂） - 使用 <code> 顯示一些程式碼片段 - 加入版權符號和其他特殊字符

  3. 實戰練習：建立一個產品說明頁 - 整合本課學到的所有標籤 - 至少使用 5 種不同的文字格式化標籤 - 加入引用、縮寫和特殊字符

🔗 下一課預告

在下一課中，我們將學習如何建立列表（有序列表、無序列表、定義列表）和連結，讓網頁內容更有結構性！

← 上一課：HTML 基礎介紹 | 返回目錄 | 下一課：列表和連結 →