在 HTML 中建立小文字


如果我們想在 HTML 文件中設定較小的字型大小,可以使用 <small> 標籤。此標籤用於將字型大小減小一個級別,即從中等大小減小到小尺寸,或從特大尺寸減小到大型尺寸。有兩種方法可以使用此 <small> 標籤在 HTML 中

  • 巢狀形式

  • 非巢狀形式

語法

以下是 HTML 中小字型標籤的使用方法 -

<small>text… </small>

它具有開始和結束標籤。它支援全域性屬性和事件屬性。

示例

以下示例演示了 small 標籤的使用 -

<!DOCTYPE html>
<html>
<head>
   <title>HTML small Tag</title>
</head>
<body>
   <h2>Tutorialspoint</h2>
   <p><small> Simply Easy Learning</small></p>
</body>
</html>

巢狀形式

如果我們在巢狀形式中使用 small 標籤,它會根據父級字型大小更改其間存在的字型大小。例如,如果我們增加父文字的字型大小,small 標籤的字型大小也會自動增加。

示例

以下示例演示瞭如何新增 HTML 的標題、主體和其他結構。

<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <h2>HTML Tutorial</h2>
   <p style="font-size: 15px;">HTML means <small>Hyper Text Markup Language</small></p>
</body>
</html>

示例

在以下示例中,我們嘗試增加 <small> 標籤父元素的字型大小。

<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <h2>HTML Tutorial</h2>
   <p style="font-size: 40px;">HTML means <small>Hyper Text Markup Language</small></p>
</body>
</html>

注意 - 巢狀小文字的字型大小與父元素文字的字型大小之間的比率相同。

什麼是非巢狀形式?

非巢狀形式意味著,我們可以將 small 標籤作為 HTML 中的單獨元素使用,這樣父元素的字型大小就不會影響 small 標籤文字。

示例

以下是非巢狀 small 標籤的示例 -

<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <h2>HTML Tutorial</h2>
   <p style="font-size: 15px;">HTML means </p>
   <small>Hyper Text Markup Language</small>
</body>
</html>

示例

現在考慮另一個示例,嘗試更改段落的字型大小,並檢查 <small> 標籤的字型大小發生了什麼變化。

<!DOCTYPE html>
<html>
<head>
   <title>TutorialsPoint</title>
</head>
<body>
   <h2>HTML Tutorial</h2>
   <p style="font-size: 30px;">HTML means </p>
   <small>Hyper Text Markup Language</small>
</body>
</html>

對 <small> 標籤的 CSS 設定

現在,我們嘗試應用 CSS 屬性,透過使用 small 標籤來設定文字的字型大小。

<!DOCTYPE html>
<html>
<head>
   <style>
      span.small {
         font-size: smaller;
         color: blue;
      }
   </style>
</head>
<body>
   <h2>Demonstrating smaller text by applying CSS</h2>
   <p>HTML Means,</p>
   <p>
      <span class="small">Hyper Text Markup Language.</span>
   </p>
</body>
</html>

更新於: 2023年10月10日

569 次檢視

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.