如何使用 HTML 新增子標題?


子標題是 HTML 中用於組織和構建網頁內容的文字元素。子標題通常用於分隔大段文字併為使用者提供清晰的資訊層次結構。子標題主要使用 HTML 中的“H2”、“H3”、“H4”、“H5”或“H6”標籤建立。這些標籤指示標題的級別,其中 H1 是最高級別的標題,H6 是最低級別的子標題。

使用 HTML 新增子標題

HTML 是一種標記語言,用於構建和格式化網頁上的內容。HTML 的重要方面之一是能夠建立標題和子標題來組織和構建文字。在本文中,我們將討論使用 HTML 新增子標題的各種方法。

  • 方法 1 − 使用“H”標籤

  • 方法 2 − 使用“P”標籤和 CSS

  • 方法 3 − 使用“Div”標籤和 CSS

方法 1:使用“H”標籤

這是在 HTML 中建立標題和子標題最常用的方法。這些標籤從 H1 到 H6,其中 H1 是最高級別的標題,H6 是最低級別的標題。為了建立子標題,我們主要使用 H2、H3、H4、H5 或 H6 標籤。例如,要使用 H3 標籤建立子標題,可以使用以下程式碼:

<h3>This is a subheading</h3> 

示例

此示例演示了在 HTML 中新增子標題的第一種方法。

<html>
<head>
   <title>Adding Subheading Using HTML</title>
   <style>
      body{
         background-color:#d1d0b4; 
      }
   </style>
</head>
<body>
   <h1>This is a Main Heading</h1>
   <h2>This is a Sub Heading</h2>
   <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
</body>
</html>

方法 2:使用“P”標籤和 CSS

在 HTML 中建立子標題的第二種方法是使用“P”標籤並使用 CSS 對其進行樣式設定。如果要建立不是傳統標題的子標題,此方法很有用。為此,我們將使用“P”標籤併為其指定一個類或 ID,您可以使用它來應用 CSS 樣式。例如,要使用 p 標籤建立子標題,可以使用以下 HTML 和 CSS 程式碼:

CSS

.subheading {
   font-size: 24px;
   font-weight: bold;
}

HTML

<p class="subheading">This is a subheading</p> 

示例

此示例演示了在 HTML 中新增子標題的第二種方法。

<html>
<head>
   <title>Adding Subheading Using HTML</title>
   <style>
      div {
         margin: auto;
         height: 250px;
         width: 500px;
         padding-left:10px;
         background-color: #d1d0b4;
         border: 2px solid #000000;
      }
      .subheading {
         font-size: 24px;
         font-weight: bold;
      }
   </style>
</head>
<body>
   <div>
      <h1>This is a Main Heading</h1>
      <p class="subheading">This is a Sub Heading</h2> 
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   </div>
</body>
</html>

方法 3:使用“Div”標籤和 CSS

在 HTML 中建立子標題的第三種方法是使用“Div”標籤並使用 CSS 對其進行樣式設定。此方法類似於“P”標籤方法。

示例

此示例演示了使用“div”標籤在 HTML 中新增子標題的方法。

<html>
<head>
   <title>Adding Subheading Using HTML</title>
   <style>
      div {
         margin: auto;
         height: 200px;
         width: 450px;
         padding-left:10px;
         background-color: #2596;
         bder: 2px solid #000000;
         border-radius:10px;
      }
      .subheading {
         font-size: 24px;
      }
   </style>
</head>
<body>
   <div>
      <h1>This is a Main Heading</h1>
      <p class="subheading">This is a Sub Heading</h2>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   </div>
</body>
</html> 

結論

有多種方法可以使用 HTML 新增子標題。“H”標籤、“P”標籤與 CSS 以及“Div”標籤與 CSS 都是有效的方法。需要注意的是,標題和子標題應該用於組織和構建網頁內容,而不僅僅用於樣式設定。

更新於: 2023年3月10日

5K+ 瀏覽量

開啟你的 職業生涯

透過完成課程獲得認證

開始學習
廣告