【HTML 筆記】文本格式化標籤、特殊字元【part 4】
===

[TOC]

Hello Guys，我是 LukeTseng，自從大學放榜後，我就積極不間斷的學習資訊相關的東西，持續地茁壯自己，主要最大的成分還是興趣與熱愛這個學科來支撐的～總之，廢話不多說，本文主要透過網路上的各大免費平台自學，並且整理成一篇筆記以供自己閱讀的同時，也能促進個人的學習軌跡。

標題（Heading）
---

這邊主要稍微講一下標籤對 SEO 優化的影響，建議是大標題就使用 h1 字體，次要則使用 h2，最後才是 h3。總之就是要掌握跟檢查這個結構，可以讓搜尋引擎更容易抓取索引，去找到文章。

若是一個符合 SEO 規範的文章，h1 標籤只能有一個，h2 可以有無數多個，h3 是為了讓文章結構更加明確才加的，最多可以到 h6。

然後補充以下兩個前面章節未講到的標籤：

| 標籤 | 說明 |
| -------- | -------- |
| `<hr>` | 定義一個水平線 |
| `<!--...-->` | 定義一行註解 |

範例：

<h1>HTML 水平線~</h1> <hr>


加上註解以後：

<!-- 這是 HTML 的註解, 然後下面是水平線 -->
<h1>HTML 水平線~</h1> <hr>

這個註解不會被顯示在網頁當中，只是提醒自己在寫 html 時，哪些標籤代表什麼意義。

文本格式化
---

粗體字：`<strong>`、`<b>`

> 在使用的意義上 `<strong>` 表示「重要的文字」（a span of text with strong importance），而 `<b>` 則沒有任何意義，所以建議使用 `<strong>`。

小小範例：

<p><strong>好粗哦～</strong></p>
<p>細狗</p>


斜體字：`<em>`、`<i>`

> 在使用的意義上 `<em>` 表示「需要強調的文字」（a span of text with emphatic stress.），而 `<i>` 則沒有任何意義，所以建議使用 `<em>`。

<p><em>我是斜的</em></p>
<p>我很正</p>


刪除線：`<del>`

<p><del>我很帥</del></p>


底線：`<ins>`

<p><ins>重點重點重點重點!!!</ins></p>


小文字：`<small>`

<p><small>真小，哀</small></p>
<p>我蠻大的哦</p>


上標、下標文字：`<sup>`、`<sub>`

<p>2<sup>2</sup>=4</p>
<p>CO<sub>2</sub></p>


螢光筆：`<mark>`

<p><mark>這可是super重要的重點哦!</mark></p>
<p>這不是重點，重點是重點</p>


引用文字：`<blockquote>`、`<q>`、`<cite>`

| 引用文字元素 | 說明 |
| -------- | -------- |
| `<blockquote>` | 引用比較多的文字，使用後獨立一個區塊呈現。 |
| `<q>` | 引用較少的文字，使用後會自動替文字的左右邊加上雙引號。 |
| `<cite>` | 表示引用內容的標題，使用後會自動將文字改成斜體。 |

表格來源：https://steam.oxxostudio.tw/category/html/tags/blockquote.html

<!-- blockquote 用於較長的引用 -->
<blockquote>
    生活就像一盒巧克力，你永遠不知道下一塊是什麼口味。
</blockquote>

<!-- q 用於短句引用 -->
<p>湯姆說：<q>知識就是力量。</q></p>

<!-- cite 用於引用標題 -->
<p>這句話出自 <cite>培根隨筆集</cite>。</p>


預先格式化：`<pre>`

> `<pre>` 預先格式化元素（preformatted text）可以保留原始文字內容格式，不論是空白或換行都會被保留，加上預設等寬字的屬性，通常都是作為程式碼的顯示使用。

<h3>pre 標籤範例：</h3>
    <pre>
def hello_world():
    print("Hello, World!")
    for i in range(3):
        print(f"Count: {i}")
    </pre>
<h3>使用段落：</h3>
    <p>
def hello_world():
    print("Hello, World!")
    for i in range(3):
        print(f"Count: {i}")
    </p>


程式碼區塊：`<code>`

通常 `<code>` 會搭配 `<pre>` 一起使用：

<pre>
    <code>
    a = 0
    print(a)
    </code>
</pre>


收縮內容：`<details>`、`<summary>`

<h1>HTML &lt;details&gt; 和 &lt;summary&gt; 範例</h1>

<details>
  <summary>點擊展開常見問題</summary>
  <p>這是一個常見問題的解答內容。您可以在此處添加更多的文字、圖片或其他 HTML 元素。</p>
  <ul>
      <li>問題 1：這是什麼？答：一個範例。</li>
      <li>問題 2：如何使用？答：點擊標題展開或收起。</li>
  </ul>
</details>

<details>
  <summary>點擊查看更多資訊</summary>
  <p>這裡是額外的詳細資訊，可以包含任何您想展示的內容。</p>
</details>


這個箭頭是可以改的，只是要學會一點 css 語法才能改，如以下範例：

<style>
  details > summary:first-of-type {
    list-style-type: '$';
  }
  details[open] > summary:first-of-type {
    list-style-type: '$$$';
  }
</style>
<details open>
  <summary style="color:red;">《夜思》作者：李白</summary>
  床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。
</details>

範例來源：https://steam.oxxostudio.tw/category/html/tags/details.html

標示聯絡方式 `<address>`：

<h1>HTML &lt;address&gt; 標籤範例</h1>
    
<address>
  聯繫我們：<br>
  公司名稱：XX有限公司<br>
  地址：台灣台北市XX區XX路<br>
  電話：<a href="tel:[phone]">[phone]</a><br>
  電子郵件：<a href="mailto:[e-mail]">[e-mail]</a>
</address>


標示鍵盤按鍵 `<kbd>`：

<h1>HTML &lt;kbd&gt; 標籤範例</h1>
    
<p>以下是如何使用鍵盤快捷鍵的說明：</p>
<ul>
    <li>儲存檔案：按 <kbd>Ctrl</kbd> + <kbd>S</kbd></li>
    <li>複製文字：按 <kbd>Ctrl</kbd> + <kbd>C</kbd></li>
    <li>貼上文字：按 <kbd>Ctrl</kbd> + <kbd>V</kbd></li>
    <li>開啟新分頁：按 <kbd>Ctrl</kbd> + <kbd>T</kbd></li>
</ul>


html 的特殊字元
---

有些特殊字元如 `<>` 這是 html 本身的語法，直接打的話會被系統判定是屬於 html 語法，那要怎麼讓他正常顯示呢？當然是透過內建的特殊字元啦。

須注意這些特殊字元皆以 & 開頭，; 分號結束。

以下是特殊字元表：

| 字元 | 實體名稱 | 字元編碼 |
| -------- | -------- | -------- |
| 不換行空格 | `&nbsp;` | `&#160;` |
| < | `&lt;` | `&#60;` |
| > | `&gt;` | `&#62;` |
| " | `&quot;` | `&#34;` |
| ' | `&apos;` | `&#39;` |
| & | `&amp;` | `&#38;` |

若 html 在標籤內空許多格，但最終只會顯示一格而已，這也是為什麼需要不換行空格的存在。

總結
---

### SEO 標籤結構

* 標籤對 SEO 的影響：正確使用標籤（如 h1、h2、h3）有助於搜尋引擎索引文章。
* h1：僅用於主標題，每頁限一個。
* h2：次要標題，可多個。
* h3 至 h6：用於補充結構，增加層次清晰度。

* 其他標籤：
* `<hr>`：水平線，用於分隔內容。
* `<!--...-->`：註解，不顯示於網頁，用於程式碼說明。

### 文本格式化

* 粗體：推薦 `<strong>`（表重要性），而非無語義的 `<b>`。
* 斜體：推薦 `<em>`（表強調），而非無語義的 `<i>`。
* 刪除線：`<del>`，表示被刪除內容。
* 底線：`<ins>`，表示新增或重點內容。
* 小文字：`<small>`，顯示較小字體。
* 上標/下標：`<sup>`（如 2²）、`<sub>`（如 CO₂）。
* 螢光筆：`<mark>`，highlight 重點文字。
* 引用：
* `<blockquote>`：長篇引用，獨立區塊。
* `<q>`：短句引用，自動加雙引號。注意這是 q，不是 p，p 是段落。
* `<cite>`：引用標題，自動斜體。
* 預格式化：`<pre>`，保留原始格式（空白、換行），常用於程式碼展示。
* 程式碼：`<code>`，通常搭配 `<pre>` 用於程式碼區塊。
* 收縮內容：`<details>` 與 `<summary>`，創建可展開/收起內容，支援 CSS 自訂樣式。
* 聯絡方式：`<address>`，標示聯繫資訊，如地址、電話、郵件。
* 鍵盤按鍵：`<kbd>`，表示鍵盤快捷鍵（如 <kbd>Ctrl + S</kbd>）。

### 特殊字元

* HTML 特殊字元用於顯示保留字元（如 <、>），以 & 開頭，; 結尾。
* 例：< 寫成 <，& 寫成 &。
* 不換行空格（ ）：可解決 HTML 忽略多餘空格問題，確保顯示多個空格。

參考資料
---

[粗體字 `<strong>`、`<b>` - HTML 教學 | STEAM 教育學習網](https://steam.oxxostudio.tw/category/html/tags/strong.html)

[HTML 特殊字元 - HTML 教學 | STEAM 教育學習網](https://steam.oxxostudio.tw/category/html/info/character.html)

[HTML 文本格式化 | 菜鸟教程](https://www.runoob.com/html/html-formatting.html)