码农教程 - 一技在手,衣食无忧! tools

HTML <aside> 标签

❮上一节 完整的 HTML参考 下一节❯

示例

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

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<h4>Epcot Center</h4>
<p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>
亲自试一试 »

下面有更多 "亲自试一试" 示例。

定义和用法

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

旁白内容应与周围内容间接相关。

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

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

浏览器支持

表中的数字指定完全支持该元素的第一个浏览器版本。

Element
<aside> 6.0 9.0 4.0 5.0 11.1

全局属性

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

事件属性

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

更多示例

示例

使用 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>The aside element</h1>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

<aside>
<p>The Epcot center is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</aside>

<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>
<p>My family and I visited The Epcot center this summer. The weather was nice, and Epcot was amazing! I had a great summer together with my family!</p>

</body>
</html>
亲自试一试 »

相关页面

HTML DOM 参考：放在一边的对象

默认 CSS 设置

大多数浏览器都会显示<aside>具有以下默认值的元素：

aside {
  display: block;
}


❮上一节 完整的 HTML参考 下一节❯