HTML - section 标签

HTML <section> 标签用于表示 HTML 文档中独立的、自包含的组合内容。此标签包含在 HTML5 中。

<section> 标签类似于 <article> 标签。单个 HTML 文档可以有多个 Section 元素。

当嵌套 HTML <section> 元素时，内部元素表示与外部元素相关的部分。

例如，对社交媒体帖子的评论可以是嵌套在表示社交媒体帖子的部分中的部分元素。它主要用于论坛帖子、杂志或报纸部分、博客条目、产品卡等。

语法


<section> ..... </section>

属性

<section> 标签支持 HTML 的全局属性和事件属性。

<section> 标签示例

下面的示例将说明<section> 标签的用法。在何处、何时以及如何使用 <section> 标签来创建 Section 元素。

使用<section> 标签创建自包含内容

在以下示例中，我们使用 <section> 标签创建了 2 个自包含内容，它们彼此独立，也独立于父级。


<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML section tag</title>
</head>
<body>
	 <!-- Creating section Element -->
	 <h2>HTML 'section' Element</h2>
	 <section>
			<h3>HTML Tags</h3>
			<p>
					HTML tags are similar to keywords, which specify 
					how a web browser will format and display content.
					A web browser can differentiate between simple content 
					and HTML content with the use of tags. 
			</p>
	 </section>
	 <section>
			<h3>HTML Attributes</h3>
			<p>
					An attribute is used to define the characteristics
					of an HTML element and is placed inside the element's 
					opening tag. All attributes are made up of two parts:
					a name and a value
			</p>
	 </section>
</body>
</html>

<section> 标签的样式

考虑以下示例，我们将在其中使用 <section> 标记并应用 CSS 属性。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML section tag</title>
	 <style>
			section {
				 width: 300px;
				 height: 150px;
				 background-color: aquamarine;
				 border-radius: 10px;
			}
			section h3,
			p {
				 margin: 10px 10px;
			}
	 </style>
</head>

<body>
	 <!--create a section element-->
	 <h2>HTML 'section' Element</h2>
	 <section>
			<h3>HTML Tags</h3>
			<p>
					HTML tags are similar to keywords, which specify 
					how a web browser will format and display content.
					A web browser can differentiate between simple content 
					and HTML content with the use of tags. 
			</p>
	 </section>
	 <section>
			<h3>HTML Attributes</h3>
			<p>
					An attribute is used to define the characteristics
					of an HTML element and is placed inside the element's 
					opening tag. All attributes are made up of two parts:
					a name and a value
			</p>
	 </section>
</body>

</html>

嵌套<section> 标签元素

让我们看一下另一个场景，我们将在其中创建一个嵌套的 section 元素。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML section Tag</title>
	 <style>
			section {
				 margin: 5px;
				 border-radius: 10px;
				 padding: 10px;
				 border: 2px solid black;
			}
			p {
				 margin: 10px;
			}
	 </style>
</head>

<body>
	 <!--create a section element-->
	 <h2>HTML 'section' Element</h2>
	 <section>
	 <h3>HTML Elements</h3>
	 <p>
			 HTML Elements are building block of a web page.
			 It is used to create component for webpages.
	 </p>
	 <section>
			<h3>HTML Tags</h3>
			<p>
					HTML tags are similar to keywords, which specify 
					how a web browser will format and display content.
					A web browser can differentiate between simple content 
					and HTML content with the use of tags. 
			</p>
	 </section>
	 <section>
			<h3>HTML Attributes</h3>
			<p>
					An attribute is used to define the characteristics
					of an HTML element and is placed inside the element's 
					opening tag. All attributes are made up of two parts:
					a name and a value
			</p>
	 </section>
	 </section>
</body>

</html>

在<section> 标签上实现图像

在以下示例中，我们将创建嵌套的“section”元素，以使用 <section> 标签来表示博客文章及其评论的独立内容。


<!DOCTYPE html>
<html lang="en">

<head>
	 <title>HTML section tag</title>
	 <style>
			section img {
				 width: 200px;
			}
	 </style>
</head>

<body>
	 <!--create a section element-->
	 <section>
			<h2>Blog post</h2>
			<img src="/images/logo.png?v3" alt="qikepu.com logo">
			<section>
			<h2>Comments</h2>
			<p>Dman good...</p>
			<p>fabulous...!</p>
			</section>
	 </section>
</body>

</html>

支持的浏览器

浏览器
是否支持	6.0	9.0	4.0	5.0	11.1

打印本页