HTML<section>标签怎么用？

最新推荐文章于 2024-03-30 08:30:00 发布

weixin_45587319

最新推荐文章于 2024-03-30 08:30:00 发布

阅读量8.6k

点赞数 1

分类专栏： HTML

原文链接：https://www.html.cn/qa/html5/10399.html

版权

HTML 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Section标签文档中的节（section、区段），即文档的各个部分，例如章节，页眉，页脚或任何其他部分；section标签将内容划分为section和子部分。当需要两个页眉或页脚或任何其他文档部分时，将使用section标记。

Section标签对相关内容的通用块进行了分组。section标签的主要优点是，它是语义元素，它描述了它对浏览器和开发人员的意义。

语法：

<section>
      部分内容
</section>

Section标签用于分发内容，即分发部分和子部分。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Section标签</title> 
    </head> 
    <body> 
        <section> 
            <h1>第1节</h1> 
            <p>第1节内容</p> 
        </section> 
        <section> 
            <h1>第2节</h1> 
            <p>第2节内容</p> 
        </section> 
        <section> 
            <h1>第3节</h1> 
            <p>第3节内容</p> 
        </section> 
    </body> 
</html>

效果图：

嵌套的Section标签

section标签可以嵌套。如果文本包含相同的font属性，则子节的字体大小小于section标签。section标签用于组织复杂文档。根据经验，该部分在逻辑上应出现在文档的大纲中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Section标签</title> 
    </head> 
    <body> 
        <section> 
            <h1>第1节</h1> 
            <p>第1节内容</p> 
            <section> 
                <h1>小节</h1> 
                <h1>小节</h1> 
            </section> 
        </section> 
        <section> 
            <h1>第1节</h1> 
            <p>第2节内容</p> 
            <section> 
                <h1>小节</h1> 
                <h1>小节</h1> 
            </section> 
        </section> 
    </body> 
</html>

效果图：