Tanda <aside> HTML

Definisi dan penggunaan

<aside> Tanda ini menentukan kandungan yang berlainan daripada kandungan yang berdekatan.

Kandungan aside sepatutnya berhubungan dengan kandungan disekitarnya.

Petikan:<aside> Kandungan biasanya diletakkan di samping dokumen.

Perhatian:<aside> Elemen ini tidak akan dipaparkan dengan gaya khusus dalam pelayar. Tetapi, anda boleh mengatur gaya menggunakan CSS <aside> Gaya elemen (lihat contoh di bawah).

Lihat juga:

Panduan HTML DOM:Objek Aside

Contoh

Contoh 1

Tunjukkan kandungan yang berlainan daripada kandungan yang berdekatan:

<p>今年夏天我和我的家人参观了上海海昌海洋公园。天气很好，海洋公园非常梦幻！我和我的家人度过了一个美好的夏天！</p>
<aside>
<h4>Perkampungan Laut Shanghai Haichang</h4>
<p>上海海昌海洋公园是位于浦东新区的主题乐园，围绕海洋文化特色，总占地面积约为29.7公顷，同时也是国家 AAAA 级旅游景区，</p>
</aside>

亲自试一试

Contoh 2

Tetapkan gaya <aside> menggunakan CSS:

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