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

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

標題（Heading）

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

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

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

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

範例：

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

加上註解以後：

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

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

文本格式化

粗體字：、

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

小小範例：

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

斜體字：、

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

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

刪除線：<del>

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

底線：<ins>

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

小文字：

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

上標、下標文字：、

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

螢光筆：

1 2	<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:+886212345678">+886-2-1234-5678</a><br>
  電子郵件：<a href="mailto:contact@example.com">contact@example.com</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 語法，那要怎麼讓他正常顯示呢？當然是透過內建的特殊字元啦。

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

以下是特殊字元表：

字元	實體名稱	字元編碼
不換行空格	` `	` `
<	`<`	`<`
>	`>`	`>`
“	`"`	`"`
‘	`'`	`'`
&	`&`	`&`

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

總結

SEO 標籤結構

標籤對 SEO 的影響：正確使用標籤（如 h1、h2、h3）有助於搜尋引擎索引文章。
- h1：僅用於主標題，每頁限一個。
- h2：次要標題，可多個。
- h3 至 h6：用於補充結構，增加層次清晰度。
其他標籤：
- <hr>：水平線，用於分隔內容。
- ：註解，不顯示於網頁，用於程式碼說明。

文本格式化

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