HTML <aside> 标签

定义和用法

<aside> 标签定义了它所在内容之外的一些内容。

aside 的内容应该与周围的内容间接相关。

提示：<aside> 内容通常作为侧边栏放置在文档中。

注意：<aside> 元素在浏览器中不会呈现为任何特殊的样式。但是，您可以使用 CSS 来设置 <aside> 元素的样式（参见下面的示例）。

另请参阅：

HTML DOM 参考手册：Aside 对象

实例

例子 1

显示一些除了它所在的内容之外的内容：

<p>今年夏天我和我的家人参观了上海海昌海洋公园。天气很好，海洋公园非常梦幻！我和我的家人度过了一个美好的夏天！</p>

<aside>
<h4>上海海昌海洋公园</h4>
<p>上海海昌海洋公园是位于浦东新区的主题乐园，围绕海洋文化特色，总占地面积约为29.7公顷，同时也是国家 AAAA 级旅游景区，</p>
</aside>

亲自试一试

例子 2

使用 CSS 设置 <aside> 元素的样式：

<html>
<head>
<style>
aside {
  width: 30%;
  padding-left: 15px;
  margin-left: 15px;
  float: right;
  font-style: italic;
  background-color: lightgray;
}
</style>
</head>
<body>

<h1>aside 元素</h1>

<p>今年夏天我和我的家人参观了上海海昌海洋公园。天气很好，海洋公园非常梦幻！我和我的家人度过了一个美好的夏天！</p>

<aside>
<p>上海海昌海洋公园是位于浦东新区的主题乐园，围绕海洋文化特色，总占地面积约为29.7公顷，同时也是国家 AAAA 级旅游景区，</p>
</aside>

<p>今年夏天我和我的家人参观了上海海昌海洋公园。天气很好，海洋公园非常梦幻！我和我的家人度过了一个美好的夏天！</p>
<p>今年夏天我和我的家人参观了上海海昌海洋公园。天气很好，海洋公园非常梦幻！我和我的家人度过了一个美好的夏天！</p>

</body>
</html>

亲自试一试

全局属性

<aside> 标签还支持 HTML 中的全局属性。

事件属性

<aside> 标签还支持 HTML 中的事件属性。

默认的 CSS 设置

大多数浏览器将使用以下默认值显示 <aside> 元素：

aside {
  display: block;
}

浏览器支持

表中的数字注明了首个完全支持该元素的浏览器版本。

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
6.0 9.0 4.0 5.0 11.1