如何在 HTML 文档中包含一个部分?

htmljavascriptprogramming scripts更新于 2024/7/25 5:00:17

部分是 HTML 中使用的标签之一，它定义文档的部分，如页眉、页脚、章节等，

部分标签将文档的内容分为两部分，部分和子部分。
当需要两个页眉或页脚或章节或文档的其他部分时，它很有用。
部分标签将相关内容分组到一个通用块中。
它是一个语义元素，向浏览器和开发人员描述含义。
部分有开始和结束标签，<section> </section>
它支持几乎所有浏览器。
Section 标签还支持全局属性和事件属性。

语法


<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>
   <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>

嵌套部分标签

位于另一个部分中的部分称为嵌套部分。如果两个部分的主部分和子部分的字体属性相同，则可以通过字体大小进行区分，与部分标签相比，子部分的字体较小。

子部分标签主要用于组织复杂文档。因此，该部分在逻辑上出现在文档的轮廓中。

语法

以下是 HTML 中嵌套部分标签的用法/语法 −


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

示例

在下面的例子中，我们尝试在 HTML 中创建一个嵌套部分 −


<!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 文档中的部分设置为所有浏览器的默认设置 −


<!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>