HTML - 格式化

上一頁
下一頁

HTML 格式化 定義了網頁上內容表示的方式，以提高可讀性，賦予語義含義，並改進視覺樣式。

HTML 格式化 是透過使用 HTML 物理和邏輯標籤來完成的。在本章中，我們將學習如何使用 HTML 格式化來控制文字的外觀。

讓我們瞭解一下什麼是物理標籤和邏輯標籤

  • 物理標籤： 這些標籤用於為文字內容提供視覺外觀。
  • 邏輯標籤： 這些標籤用於為文字內容提供邏輯和語義含義。有一些邏輯標籤用於螢幕閱讀器，但這些標籤的影響在瀏覽器上是可見的。
HTML Text Formatting

HTML 格式化的用途

如果沒有格式化，任何東西看起來都不美觀或舒適。但 HTML 格式化不僅僅是為了讓眼睛舒適或使文字內容更具吸引力。進行 HTML 格式化有幾個原因。

HTML 格式化在許多方面都很有用

  • 任何文字的外觀都提供了對內容意圖的清晰檢視，例如突出顯示關鍵詞，將有意義的資訊放在引號中，對主要句子進行下劃線等。
  • 格式化有助於搜尋引擎理解內容結構，也有助於搜尋引擎最佳化。
  • 格式化可以改善視覺佈局並提高內容的可讀性。

HTML 格式化標籤

下表列出了用於文字格式化的常用HTML 格式化標籤

標籤 描述 類別
<b> 此標籤用於使文字粗體。 物理標籤
<i> 此標籤用於使文字斜體。 物理標籤
<big> 此標籤用於使文字更大。它在 HTML5 中不受支援。 物理標籤
<small> 此標籤用於使文字更小。 物理標籤
<u> 此標籤用於為文字新增下劃線。 物理標籤
<strike> 此標籤用於刪除線文字。它在 HTML5 中不受支援。 物理標籤
<tt> 此標籤用於使文字以電傳打字機（等寬字型）顯示。它在 HTML5 中不受支援。 物理標籤
<strong> 此標籤用於使文字粗體並賦予其語義重要性。 邏輯標籤
<em> 此標籤用於使文字斜體並賦予其語義強調。 邏輯標籤
<sup> 此標籤用於建立上標文字（略高於正常行）。 其他標籤
<sub> 此標籤用於建立下標文字（略低於正常行）。 其他標籤
<ins> 此標籤用於指示內容已新增（通常帶下劃線）。 其他標籤
<del> 此標籤用於指示內容已刪除（通常帶刪除線）。 其他標籤
<mark> 此標籤用於使用黃色背景突出顯示文字。 其他標籤

HTML 格式化標籤示例

以下是每個格式化標籤及其示例的詳細說明

HTML <b> 標籤

HTML <b> 標籤用於使文字變為粗體；此標籤沒有邏輯方面；它僅用於視覺效果。

示例

此示例演示瞭如何使用<b> 標籤使文字格式變為粗體

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>
輸出 
The following word uses a bold typeface.

HTML <strong> 標籤

HTML <strong> 標籤用於使文字變為粗體，表示其更重要，並且其內部文字通常以粗體顯示。

注意：<b> 標籤僅出於樣式目的使文字變為粗體，而<strong> 標籤使文字變為粗體，併為其內容中的文字新增重要性。

示例

此示例演示瞭如何使用<strong> 標籤顯示重要文字

<!DOCTYPE html>
<html>
<head>
   <title>Bold Text Example</title>
</head>
<body>
   <p>The following word uses a <strong>strong</strong> typeface.</p>
</body>
</html>
輸出 
The following word uses a strong typeface.

HTML <i> 標籤

包含在<i>...</i> 元素中的任何內容都以斜體顯示。

示例

此示例演示瞭如何使用<i> 標籤使文字變為斜體

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>
輸出 
The following word uses a italicized typeface.

HTML <em> 標籤

HTML <em> 標籤為其包含的文字賦予語義含義，並在瀏覽器上將其呈現為斜體。

示例

此示例演示瞭如何使用<em> 標籤使文字強調

<!DOCTYPE html>
<html>
<head>
   <title>Italic Text Example</title>
</head>
<body>
   <p>The following word uses a <em>emphasized</em> typeface.</p>
</body>
</html>
輸出 
The following word uses a emphasized typeface.

HTML <big> 標籤

包含在<big>...</big> 元素中的任何內容都顯示為比周圍文字大一個字型大小。

示例

此示例演示瞭如何使用<big> 標籤使文字顯示得比周圍文字更大

<!DOCTYPE html>
<html>
<head>
   <title>Larger Text Example</title>
</head>
<body>
   <p>Hello Welcome to <big>Tutorialspoint</big>.</p>
</body>
</html>
輸出 
Hello Welcome to Tutorialspoint.

HTML <small> 標籤

包含在<small>...</small> 元素中的內容顯示為比周圍文字小一個字型大小。

示例

此示例演示瞭如何使用<small> 標籤使文字顯示得比周圍文字更小

<!DOCTYPE html>
<html>
<head>
   <title>Smaller Text Example</title>
</head>
<body>
   <p>Hello Welcome to <small>Tutorialspoint</small>.</p>
</body>
</html>
輸出 
Hello Welcome to Tutorialspoint.

HTML <sup> 標籤

包含在<sup>...</sup> 元素中的任何內容都以上標形式編寫；使用的字型大小與周圍字元相同，但顯示高度為周圍字元的一半，與其餘文字相比，它顯得更小且略微升高。

示例

此示例演示瞭如何使用<sup> 標籤使文字顯示在正常文字的略微上方

<!DOCTYPE html>
<html>
<head>
   <title>Superscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sup>superscript</sup> typeface. </p>
</body>
</html>
輸出 
The following word uses a superscript typeface.

HTML <sub> 標籤

<sub>...</sub> 元素的任何內容都以下標形式編寫；使用的字型大小與周圍字元相同，並顯示在其他字元下方字元高度的一半處。它通常用於編寫化學式，其中某些字元需要顯示在常規文字行的下方。

示例

此示例演示瞭如何使用<sub> 標籤使文字顯示在正常文字的略微下方

<!DOCTYPE html>
<html>
<head>
   <title>Subscript Text Example</title>
</head>
<body>
   <p>The following word uses a <sub>subscript</sub> typeface. </p>
</body>
</html>
輸出 
The following word uses a subscript typeface.

HTML <ins> 標籤

包含在<ins>...</ins> 元素中的任何內容都顯示為插入文字。

示例

此示例演示瞭如何使用<ins> 標籤標記已插入的文字

<!DOCTYPE html>
<html>
<head>
   <title>Inserted Text Example</title>
</head>
<body>
   <p>I want to drink <del>cola</del> <ins>wine</ins></p>
</body>
</html>
輸出 
I want to drink cola wine

HTML <del> 標籤

包含在<del>...</del> 元素中的內容顯示為已刪除文字。

示例

此示例演示瞭如何使用<del> 標籤標記已刪除的文字

<!DOCTYPE html>
<html>
<head>
   <title>Deleted Text Example</title>
</head>
<body>
   <p>Hello welcome to <del>Madras</del> <ins>Chennai</ins></p>
</body>
</html>
輸出 
Hello welcome to Madras Chennai

HTML <u> 標籤

包含在<u>...</u> 元素中的任何內容都顯示為帶下劃線。

示例

此示例演示瞭如何使用<u> 標籤製作帶下劃線的文字

<!DOCTYPE html>
<html>
<head>
   <title>Underlined Text Example</title>
</head>
<body>
   <p>The following word uses a <u>underlined</u> typeface.</p>
</body>
</html>
輸出 
The following word uses a underlined typeface.

HTML <strike> 標籤

包含在<strike>...</strike> 元素中的內容顯示為刪除線，即文字上的細線。

示例

此示例演示瞭如何使用<strike> 標籤顯示刪除線文字

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <strike>strikethrough</strike> typeface.</p>
</body>
</html>
輸出 
The following word uses a strikethrough typeface.

HTML <mark> 標籤

HTML <mark> 標籤用於標記或突出顯示對註釋目的很重要的文字。

示例

此示例演示瞭如何使用<mark> 標籤製作標記文字

<!DOCTYPE html>
<html>
<head>
   <title>Strike Text Example</title>
</head>
<body>
   <p>The following word uses a <mark>strikethrough</mark> typeface.</p>
</body>
</html>
輸出 
The following word uses a marked typeface.

HTML <tt> 標籤

包含在<tt>...</tt> 元素中的任何內容都以等寬字型編寫。大多數字體被稱為可變寬度字型，因為不同的字母具有不同的寬度（例如，字母“m”比字母“i”寬）。但是，在等寬字型中，每個字母都具有相同的寬度。

示例

此示例演示瞭如何使用<tt> 標籤製作電傳打字機文字

<!DOCTYPE html>
<html>
<head>
   <title>Monospaced Font Example</title>
</head>
<body>
   <p>The following word uses a <tt>monospaced</tt> typeface.</p>
</body>
</html>
輸出 
The following word uses a monospaced typeface.
列印頁面

上一頁
下一頁
廣告