HTML - aside 标签

HTML <aside> 标签用于提供有关 aside 元素周围内容的额外信息。

<aside> 标签中可以包含的信息包括尾注、注释、术语列表、参考数据、一组链接、拉引号等。

它通常用于通过添加更多细节或强调读者会觉得有趣的段落来改进文章。

如果从网页中删除旁留内容，则主要内容不会受到影响，因为旁留内容是页面的单独可选组件。

语法


<aside>.....</aside>

属性

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

<aside> 标签的示例

下面的示例将说明 <aside> 标签的用法。在哪里、何时以及如何使用 <aside> 标签来创建部分以提供额外信息。

创建<aside> 标签内容

在此示例中，我们将创建一个 <aside> 标签来呈现一些额外的信息。


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

<head>
	 <title>HTML aside Tag</title>
</head>

<body>
	 <!-- Creating aside Element -->
	 <p>
			It is typically used to improve an article by
			adding more details or emphasizing passages that
			the reader would find interesting. If you remove
			aside content from a web page, the main content 
			will not be impacted because aside content is a 
			separate, optional component of the page.
	 </p>
	 <aside>About HTML aside Tag</aside>
</body>

</html>

使用<aside> 标签创建段落

以下是 <aside> 标签的另一个示例。在这里，我们使用 <aside> 标签来标记 'article' 元素中的段落。该段落仅与文章主要内容间接相关。


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

<head>
	 <title>HTML aside Tag</title>
</head>

<body>
	 <!-- Creating aside Element -->
	 <p>Example of the HTML 'aside' Element</p>
	 <article>
			<p>
				 The HTML full form is Hyper Text Markup Language.
			</p>
			<aside>
				 <p>
						The HyperText Markup Language or HTML is the 
						standard markup language for documents designed 
						to be displayed in a web browser.
				 </p>
			</aside>
	 </article>
</body>

</html>

设置 <aside> 标签的样式

在下面的程序中，我们使用 HTML<aside> 标签来表示 HTML 文档的一部分。我们使用 CSS 来设置创建的“aside”元素的样式。


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

<head>
		<title>HTML aside Tag</title>
		<style>
				aside {
						width: 30%;
						padding-left: 15px;
						margin-left: 15px;
						float: right;
						background-color: lightgray;
						border-radius: 10px;
				}
				p {
						width: 60%;
						float: left;
				}
		</style>
</head>

<body>
		<!-- Creating aside Element -->
		<h2>HTML 'aside' Element</h2>
		<p>
				It is typically used to improve an article by adding more details 
				or emphasizing passages that the reader would find interesting. 
				If you remove aside content from a web page, the main content will
				not be impacted because aside content is a separate, optional 
				component of the page.
		</p>
		<aside>
				<ul>
						<li>HTML</li>
						<li>CSS</li>
						<li>JavaScript</li>
						<li>Angular</li>
						<li>React</li>
				</ul>
		</aside>
</body>

</html>

支持的浏览器

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

打印本页