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


Section是HTML中使用的标签之一,用于定义文档的部分,例如页眉、页脚、章节等。

  • Section标签将文档内容分成两部分:section和subsection。

  • 当需要两个页眉或页脚或章节或文档的其他部分时,它非常有用。

  • 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标签。

subsection标签主要用于组织复杂的文档。因此,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 次浏览

启动你的职业生涯

完成课程获得认证

开始学习
广告