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