HTML 文本格式化是一套用於定義網頁文字結構、樣式和視覺呈現的技術集合，它使得普通的文字能夠通過特定的標籤和樣式規則，展現出清晰的層次感和豐富的視覺效果。下面這個表格可以幫助你快速把握其核心概覽。

格式化維度

核心機制

典型代表/值

主要作用

結構格式化

HTML 標籤

<h1>~<h6>, <p>, <br>, <hr>

定義標題、段落、換行、水平線等文檔結構。

樣式格式化

HTML 物理/邏輯標籤

<b>, <i>, <strong>, <em>, <sup>, <sub>

控制粗體、斜體、上下標等內聯文本樣式或語義強調。

空白符處理

CSS white-space屬性

normal, pre, pre-wrap, pre-line

控制空格、換行符、自動換行等空白字符的顯示方式。

精細樣式控制

CSS 文本屬性

color, font-family, text-align, text-indent等

實現字體、顏色、對齊、縮進等精細化視覺樣式。

🔰 使用 HTML 標籤進行基礎格式化

HTML 提供了豐富的標籤來定義文本的結構和基本樣式。

1. 結構性與語義化標籤

這類標籤用於構建文檔的骨架，併為內容賦予含義，這有助於SEO和無障礙訪問。

  • 標題與段落：<h1>到 <h6>定義六級標題，重要性逐級遞減，一個頁面最好只有一個 <h1>。<p>標籤定義一個段落，瀏覽器會自動在其前後添加一些外邊距，從而實現段落間距。
  • 換行與水平線：<br>是用於在文本中強制換行的空元素（沒有結束標籤）。<hr>則用於創建一條水平分割線，通常表示故事或主題的轉換。
  • 引用的語義化標籤：<blockquote>用於定義一段塊級引用，通常會縮進。<q>用於行內短引用，瀏覽器通常會為其自動添加引號。<cite>則用於標明對某作品（如書籍、電影）的引用標題。

2. 樣式與語義強調標籤

這類標籤用於改變文本的呈現形式，有些僅表示外觀（物理樣式），有些則增加了語義（邏輯樣式）。

  • 物理樣式標籤：直接定義外觀。
  • <b>：加粗文本，無語義。
  • <i>：斜體文本，通常用於技術術語、外文短語等。
  • <u>：為文本添加下劃線。
  • <s>或 <strike>：為文本添加刪除線。
  • <sup>和 <sub>：定義上標（如 x²）和下標（如 H₂O）。
  • 邏輯樣式標籤（推薦）：在改變外觀的同時，賦予文本特定語義。
  • <strong>：表示內容非常重要，通常渲染為粗體。
  • <em>：表示強調，通常渲染為斜體。與 <strong>的強調程度不同。
  • <mark>：表示突出顯示或高亮，類似熒光筆效果。
  • <small>：表示細則，如免責聲明、版權信息等，字體較小。
  • <ins>和 <del>：分別表示插入和刪除的文本。

最佳實踐：在現代Web開發中，為了更好的可訪問性和SEO，建議優先使用邏輯樣式標籤（如 <strong>, <em>）。

3. 保留原始格式：<pre>標籤

當需要展示代碼、詩歌或任何需要嚴格保留空格和換行符的文本時，<pre>標籤是最佳選擇。它會以等寬字體顯示，並嚴格保持你在HTML源代碼中的格式。

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

🎨 使用 CSS 進行精細化樣式控制

CSS 提供了強大而靈活的屬性，用於精確控制文本的外觀。

1. 控制空白符：white-space屬性

這個屬性至關重要，它決定了元素內的空白符（空格、製表符、換行符）如何處理。

屬性值

作用

normal

默認值。合併連續的空白符，文本自動換行。

pre

行為類似 <pre>標籤，保留所有空白符（空格、換行），不自動換行。

pre-wrap

保留所有空白符，但會在必要處自動換行。

pre-line

合併連續的空格，但保留換行符，並自動換行。

 
.poem {
  white-space: pre-wrap; /* 保留詩歌格式，同時允許自動換行 */
}

2. 常用文本樣式屬性

  • 字體與顏色：font-family設置字體系列；font-size設置大小；color設置顏色。
  • 對齊與間距：text-align控制水平對齊（左、中、右、兩端）；line-height設置行高，影響閲讀舒適度；letter-spacing和 word-spacing分別控制字母和單詞間距；text-indent設置首行縮進。
  • 裝飾與變換：text-decoration用於添加下劃線、上劃線、刪除線；text-transform控制英文大小寫轉換（全大寫、全小寫、首字母大寫）。

💡 實用技巧與最佳實踐

  1. 響應式文本設計：使用相對單位（如 rem, vw）和 CSS 函數（如 clamp()）讓文字大小能根據不同屏幕尺寸自適應調整，提升移動設備上的可讀性。
  2. 文本截斷與省略號：對於可能超出容器的單行文本，可以使用以下CSS實現溢出顯示省略號（...）的效果：
.truncate {
  white-space: nowrap;      /* 禁止換行 */
  overflow: hidden;         /* 隱藏溢出部分 */
  text-overflow: ellipsis;  /* 顯示省略號 */
}

對於多行文本截斷，可以使用 -webkit-line-clamp屬性。

  1. 結合多種方法：在實際項目中，通常是 HTML 和 CSS 協同工作。例如，使用 <pre>標籤包裹代碼，再配合 CSS 添加背景色和內邊距，使其展示效果更佳。

💎 總結

總而言之，掌握 HTML 文本格式化需要理解並協同使用 HTML 標籤和 CSS 樣式。HTML 負責搭建內容和語義結構，而 CSS 則專注於視覺表現的精細化控制。遵循語義化優先的原則，並善用CSS，你就能創造出既美觀又具可訪問性的文本內容。

希望這些信息能幫助你更好地運用HTML文本格式化。如果你對某個具體的標籤或屬性有更深入的興趣，我們可以繼續探討。