如何在 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>
广告