HTML <aside> 标签

提示

1. <aside>标签的功能：HTML <aside> 标签用于表示文档中与主要内容间接相关的部分，常作为侧边栏使用。
2. 无默认渲染效果：在浏览器中，<aside> 标签不会自动渲染任何特殊内容，需要配合CSS进行样式设计。
3. 结合CSS的应用：通过CSS可以设置 <aside> 的样式，如调整尺寸、边框、内边距等，以适应页面布局和设计需求。

HTML <aside> 标签用于表示文档中与主要内容间接相关的部分。它最常用作文档中的侧边栏。它在浏览器中不会渲染任何特殊内容。例如，

<div>
  <h1>这是一个标题</h1>
  <aside>
    <p>这是一段文字</p>
  </aside>
</div>

浏览器输出

这里，<aside> 元素包含了一个与 <h1> 元素间接相关的段落。

HTML <aside> 和 CSS

我们使用 CSS 来设置 HTML <aside> 的样式。例如，

<aside>
  <h2>侧边栏</h2>
  <p>这是侧边栏中的一些内容。</p>
</aside>
<main>
  <h1>主要内容</h1>
  <p>这是页面的主要内容。</p>
</main>
<style>
  main {
    padding: 10px;
    margin: 10px;
  }

  aside {
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
    float: left;
  }
</style>

浏览器输出