如何在 HTML 文件中包含一個 section 部分?


Section 是 HTML 中使用的標籤之一,用於定義文件的部分,例如標題、頁尾、章節等。

  • Section 標籤將文件內容分成兩部分:section 和子部分。

  • 當需要兩個標題或頁尾或章節或文件的其他部分時,它非常有用。

  • Section 標籤將相關內容分組到一個通用塊中。

  • 它是一個語義元素,可以向瀏覽器和開發人員描述含義。

  • section 有開始和結束標籤:<section> </section>

  • 它幾乎支援所有瀏覽器。

  • Section 標籤還支援全域性屬性和事件屬性。

語法

<section> Content </section>

示例

以下示例演示了 HTML 中 section 標籤的語法:

<!DOCTYPE html>
<html>
<body>
   <h1> Tutorials Point</h1>
   <!-- html section tag is used here -->
   <section>
      <h2>----- Section 1-----</h2>
      <p>HTML Tutorial</p>
   </section>
   <section>
      <h2>----- Section 2-----</h2>
      <p>JAVA Tutorial</p>
   </section>
   <section>
      <h2>-----Section 3-----</h2>
      <p>Oracle Tutorial</p>
   </section>
</body>
</html>

示例

以下另一個示例演示了 HTML 中 section 標籤的用法:

<!DOCTYPE html>
<html>
<head>
   <title>HTML Section Tag</title>
</head>
<body>
   <section>
      <h1>Java</h1>
      <h3>Inheritance</h3>
      <p>Inheritance defines the relationship between superclass and subclass.</p>
   </section>
</body>
</html>

巢狀 Section 標籤

一個位於另一個 section 內部的 section 稱為巢狀 section。如果兩個 section(主 section 和子 section)的字型屬性相同,則可以透過字型大小進行區分,子 section 的字型大小小於 section 標籤。

子 section 標籤主要用於組織複雜文件。因此,section 在文件的大綱中邏輯上顯示。

語法

以下是 HTML 中巢狀 section標籤的用法/語法:

<section>
    <section>
         <content>
   </section>
</section>

示例

在以下示例中,我們嘗試在 HTML 中建立一個巢狀 section:

<!DOCTYPE html>
<html>
<body>
   <h1> Tutorials Point</h1>
   <!-- html section tag is used here -->
   <section>
      <h2> ----- Section 1-----</h2>
      <p>HTML Tutorial</p>
      <section>
         <h4> Introduction</h4>
         <h4> Examples </h4>
      </section>
   </section>
   <section>
      <h2>----- Section 2-----</h2>
      <p>JAVA Tutorial</p>
      <section>
         <h4> Fundamentals of OOPs</h4>
         <h4> Example Programs</h4>
      </section>
   </section>
   <section>
      <h2>-----Section 3-----</h2>
      <p>Oracle Tutorial</p>
      <section>
         <h4> SQL Introduction</h4>
         <h4> SQL Commands </h4>
      </section>
   </section>
</body>
</html> 

示例

以下示例顯示了在 CSS 文件中使用 section 將其設定為所有瀏覽器的預設設定:

<!DOCTYPE html>
<html>
<head>
   <style>
      section {
         display: block;
      }
   </style>
</head>
<body>
   <p>A section element is displayed like this:</p>
   <section>
      <h1>TutorialsPoint</h1>
      <p>Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects.</p>
   </section>
   <p>To see the effects ,Change the default CSS settings .</p>
</body>
</html>

更新於: 2023年10月6日

896 次瀏覽

開啟您的 職業生涯

透過完成課程獲得認證

開始學習
廣告

© . All rights reserved.