HTML <aside> 标签
实例
<p>今年夏天，我和我的家人参观了 The Epcot 中心。 天气很好，Epcot 很棒！ 我和家人一起度过了一个美好的夏天！</p>
<aside>
<h4>未来世界中心</h4>
<p>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</aside>
亲自试一试 »
<aside>
<h4>未来世界中心</h4>
<p>Epcot 是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</aside>
下面有更多实例。
定义和用法
<aside> 标签定义其所处内容之外的内容。
aside 的内容应该与附近的内容相关。
提示: <aside> 内容通常作为侧边栏放在文档中。
注释: <aside> 元素在浏览器中不会呈现为任何特殊元素。但是，您可以使用CSS来设置 <aside>
元素的样式（参见下面的示例）。
浏览器支持
表中的数字指完全支持该元素的第一个浏览器版本。
| 元素 | |||||
|---|---|---|---|---|---|
| <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>aside 元素 - 使用 CSS 设置样式</h1>
<p>今年夏天，我和我的家人参观了 The Epcot 中心。 天气很好，Epcot 很棒！ 我和家人一起度过了一个美好的夏天！</p>
<aside>
<p>未来世界中心是华特迪士尼世界度假区的一个主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</aside>
<p>今年夏天，我和我的家人参观了 The Epcot 中心。 天气很好，Epcot 很棒！ 我和家人一起度过了一个美好的夏天！</p>
<p>今年夏天，我和我的家人参观了 The Epcot 中心。 天气很好，Epcot 很棒！ 我和家人一起度过了一个美好的夏天！</p>
</body>
</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 元素 - 使用 CSS 设置样式</h1>
<p>今年夏天，我和我的家人参观了 The Epcot 中心。 天气很好，Epcot 很棒！ 我和家人一起度过了一个美好的夏天！</p>
<aside>
<p>未来世界中心是华特迪士尼世界度假区的一个主题公园，拥有令人兴奋的景点、国际展馆、屡获殊荣的烟花和季节性特别活动。</p>
</aside>
<p>今年夏天，我和我的家人参观了 The Epcot 中心。 天气很好，Epcot 很棒！ 我和家人一起度过了一个美好的夏天！</p>
<p>今年夏天，我和我的家人参观了 The Epcot 中心。 天气很好，Epcot 很棒！ 我和家人一起度过了一个美好的夏天！</p>
</body>
</html>
相关页面
HTML DOM 参考手册: Aside 对象
默认CSS设置
大多数浏览器将使用以下默认值显示 <aside> 元素:
aside {
display: block;
}
display: block;
}
