PHP小码农

Appearance

aside 侧边栏 ​

<aside> 元素表示页面的辅助内容或补充内容，这些内容与页面的主内容间接相关。典型的用法包括侧边栏、广告区域、相关链接、作者介绍、标签云等。<aside> 的核心特征是：如果移除它，主内容的完整性不受影响。

前置知识

阅读本节前，建议先了解：section 章节

基础概念 ​

什么是 aside ​

<aside> 是 HTML5 语义化标签，用于表示与主内容间接相关的辅助信息。它的隐式 ARIA 角色是 complementary，屏幕阅读器会将其识别为"补充内容" landmark。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>aside 示例</title>
</head>
<body>
  <main>
    <article>
      <h1>CSS Grid 布局教程</h1>
      <p>Grid 是二维布局系统...</p>
    </article>

    <!-- 侧边栏：辅助内容 -->
    <aside>
      <h2>相关文章</h2>
      <ul>
        <li><a href="#">Flexbox 教程</a></li>
        <li><a href="#">CSS 定位详解</a></li>
      </ul>
    </aside>
  </main>
</body>
</html>

aside 的隐式角色 ​

属性值说明
隐式角色complementary补充内容 landmark
可访问名称通过 aria-label 或标题需要可访问名称才能作为 landmark
可移除性移除后主内容不受影响核心特征

适合放在 aside 中的内容 ​

内容类型示例说明
相关链接"相关文章"、"推荐阅读"与主内容相关但不属于正文
侧边栏网站侧边栏传统的侧边栏内容
广告广告横幅、赞助内容商业性辅助内容
作者信息作者简介、联系方式关于文章作者的补充信息
标签/分类标签云、分类列表内容的元信息
引用块拉引语（pull quote）文章中的突出引用

语法与使用 ​

基本语法 ​

html
<aside>
  <h2>侧边栏标题</h2>
  <!-- 辅助内容 -->
</aside>

<!-- 带 aria-label -->
<aside aria-label="侧边栏">
  <!-- 辅助内容 -->
</aside>

aside 的两种层级 ​

<aside> 可以出现在两个层级：

  1. 页面级 aside：整个页面的侧边栏，与 <main> 并列
  2. 内容级 aside：在 <article> 内部，与该文章相关的辅助内容
html
<body>
  <main>
    <article>
      <h1>文章标题</h1>
      <p>正文内容...</p>

      <!-- 内容级 aside：文章内的辅助信息 -->
      <aside>
        <h2>术语解释</h2>
        <dl>
          <dt>CSS</dt>
          <dd>层叠样式表</dd>
        </dl>
      </aside>
    </article>
  </main>

  <!-- 页面级 aside：页面侧边栏 -->
  <aside>
    <h2>热门文章</h2>
    <ul>
      <li><a href="#">文章1</a></li>
      <li><a href="#">文章2</a></li>
    </ul>
  </aside>
</body>

详细说明 ​

典型的 aside 使用场景 ​

1. 网站侧边栏 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aside 侧边栏示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; color: #333; }

    .site-header { background: #2c3e50; color: #fff; padding: 1rem 2rem; }
    .site-header nav a { color: #bdc3c7; text-decoration: none; margin-left: 1rem; }

    .page-layout {
      max-width: 1100px; margin: 2rem auto; padding: 0 2rem;
      display: grid; grid-template-columns: 1fr 280px; gap: 2rem;
    }

    main article {
      background: #fff; padding: 2rem; border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    main h1 { margin-bottom: 1rem; }

    /* aside 侧边栏 */
    aside { display: flex; flex-direction: column; gap: 1.5rem; }

    .sidebar-widget {
      background: #fff; padding: 1.25rem; border-radius: 8px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .sidebar-widget h2 {
      font-size: 1rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem;
      border-bottom: 2px solid #3498db; color: #2c3e50;
    }
    .sidebar-widget ul { list-style: none; }
    .sidebar-widget li { margin-bottom: 0.5rem; }
    .sidebar-widget a { color: #3498db; text-decoration: none; font-size: 0.9rem; }
    .sidebar-widget a:hover { text-decoration: underline; }

    /* 搜索框 */
    .sidebar-search {
      display: flex; gap: 0.5rem;
    }
    .sidebar-search input {
      flex: 1; padding: 0.5rem 0.75rem;
      border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem;
    }
    .sidebar-search button {
      padding: 0.5rem 1rem; background: #3498db; color: #fff;
      border: none; border-radius: 4px; cursor: pointer;
    }

    /* 标签云 */
    .tag-cloud { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .tag-cloud a {
      padding: 0.25rem 0.75rem; background: #ecf0f1;
      border-radius: 3px; font-size: 0.8rem; color: #555;
      text-decoration: none;
    }
    .tag-cloud a:hover { background: #3498db; color: #fff; }
  </style>
</head>
<body>
  <header class="site-header">
    <h1>TechBlog</h1>
    <nav aria-label="主导航">
      <a href="/">首页</a>
      <a href="/blog">博客</a>
      <a href="/about">关于</a>
    </nav>
  </header>

  <div class="page-layout">
    <main>
      <article>
        <h1>CSS Grid 布局完全指南</h1>
        <p>CSS Grid 是二维布局系统，可以同时控制行和列的排布...</p>
        <p>与 Flexbox 的一维布局不同，Grid 提供了更强大的布局能力...</p>
      </article>
    </main>

    <!-- 页面级 aside -->
    <aside aria-label="侧边栏">
      <!-- 搜索 -->
      <div class="sidebar-widget">
        <h2>搜索</h2>
        <div class="sidebar-search">
          <input type="search" placeholder="搜索文章..." aria-label="搜索文章">
          <button>搜索</button>
        </div>
      </div>

      <!-- 作者信息 -->
      <div class="sidebar-widget">
        <h2>关于作者</h2>
        <p>张三，前端开发工程师，专注于 CSS 和 JavaScript 开发。</p>
        <address>
          <a href="mailto:zhangsan@example.com">联系作者</a>
        </address>
      </div>

      <!-- 热门文章 -->
      <div class="sidebar-widget">
        <h2>热门文章</h2>
        <ul>
          <li><a href="#">Flexbox 30 分钟入门</a></li>
          <li><a href="#">CSS 变量完全指南</a></li>
          <li><a href="#">响应式设计最佳实践</a></li>
          <li><a href="#">JavaScript 事件机制</a></li>
        </ul>
      </div>

      <!-- 标签云 -->
      <div class="sidebar-widget">
        <h2>标签</h2>
        <div class="tag-cloud">
          <a href="#">HTML</a>
          <a href="#">CSS</a>
          <a href="#">JavaScript</a>
          <a href="#">Flexbox</a>
          <a href="#">Grid</a>
          <a href="#">响应式</a>
          <a href="#">动画</a>
          <a href="#">性能优化</a>
        </div>
      </div>

      <!-- 广告 -->
      <div class="sidebar-widget">
        <h2>推广</h2>
        <p>推荐学习资源：</p>
        <a href="#">前端开发在线课程</a>
      </div>
    </aside>
  </div>
</body>
</html>

2. 文章内的 aside（术语解释） ​

html
<article>
  <h1>Web 性能优化指南</h1>
  <p>...</p>

  <!-- 文章内的辅助信息 -->
  <aside>
    <h2>术语解释</h2>
    <dl>
      <dt>FCP</dt>
      <dd>First Contentful Paint，首次内容绘制时间</dd>
      <dt>LCP</dt>
      <dd>Largest Contentful Paint，最大内容绘制时间</dd>
      <dt>CLS</dt>
      <dd>Cumulative Layout Shift，累积布局偏移</dd>
    </dl>
  </aside>

  <p>...</p>
</article>

3. 文章内的 aside（引用块） ​

html
<article>
  <h1>人工智能发展简史</h1>
  <p>人工智能的概念最早由...</p>

  <aside>
    <blockquote>
      <p>"机器能思考吗？"这个问题是艾伦&middot;图灵在1950年提出的。</p>
      <cite>—— 艾伦&middot;图灵，《计算机器与智能》</cite>
    </blockquote>
  </aside>

  <p>此后，AI 经历了多次...</p>
</article>

实战示例 ​

aside 在不同位置的使用 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>aside 多位置示例</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, sans-serif; }

    .site-header { background: #1a1a2e; color: #fff; padding: 1rem 2rem; }
    .site-footer { background: #1a1a2e; color: #999; text-align: center; padding: 1rem; margin-top: 2rem; }

    .content-wrapper {
      max-width: 1000px; margin: 2rem auto; padding: 0 2rem;
      display: grid; grid-template-columns: 1fr 250px; gap: 2rem;
    }

    article { max-width: 100%; }
    article h1 { margin-bottom: 1rem; }
    article h2 { margin: 1.5rem 0 0.75rem; }

    /* 文章内 aside */
    article aside {
      background: #fffbeb; border-left: 3px solid #f59e0b;
      padding: 1rem; margin: 1.5rem 0; border-radius: 0 4px 4px 0;
      font-size: 0.9rem;
    }
    article aside h3 { margin-bottom: 0.5rem; color: #92400e; }

    /* 侧边栏 aside */
    .sidebar aside {
      background: #f8f9fa; padding: 1.25rem; border-radius: 8px;
    }
    .sidebar aside h3 {
      font-size: 0.95rem; margin-bottom: 0.75rem;
      padding-bottom: 0.5rem; border-bottom: 2px solid #6366f1;
    }
    .sidebar aside ul { list-style: none; }
    .sidebar aside li { margin-bottom: 0.4rem; }
    .sidebar aside a { color: #4f46e5; text-decoration: none; font-size: 0.85rem; }
  </style>
</head>
<body>
  <header class="site-header">
    <h1>DevWiki</h1>
  </header>

  <div class="content-wrapper">
    <main>
      <article>
        <h1>JavaScript 闭包详解</h1>
        <p>闭包（Closure）是 JavaScript 中一个重要的概念。简单来说，闭包是指一个函数能够记住并访问它的词法作用域，即使这个函数在其词法作用域之外执行。</p>

        <!-- 文章内 aside：术语提示 -->
        <aside>
          <h3>词法作用域</h3>
          <p>词法作用域是指函数在定义时（而非调用时）确定的作用域链。这意味着内部函数可以访问外部函数的变量。</p>
        </aside>

        <h2>闭包的基本示例</h2>
        <p>下面是一个简单的闭包示例：</p>

        <h2>闭包的应用场景</h2>
        <p>闭包在实际开发中有很多应用场景...</p>

        <!-- 文章内 aside：注意提示 -->
        <aside>
          <h3>注意</h3>
          <p>过度使用闭包可能导致内存泄漏，因为闭包会保持对外部变量的引用，阻止垃圾回收。</p>
        </aside>

        <h2>总结</h2>
        <p>闭包是 JavaScript 中强大而优雅的特性...</p>
      </article>
    </main>

    <!-- 页面级 aside：侧边栏 -->
    <aside class="sidebar">
      <aside aria-label="目录">
        <h3>本文目录</h3>
        <ul>
          <li><a href="#basics">闭包的基本示例</a></li>
          <li><a href="#use-cases">应用场景</a></li>
          <li><a href="#summary">总结</a></li>
        </ul>
      </aside>

      <aside aria-label="推荐阅读">
        <h3>推荐阅读</h3>
        <ul>
          <li><a href="#">JavaScript 作用域链</a></li>
          <li><a href="#">let 和 var 的区别</a></li>
          <li><a href="#">this 指向完全指南</a></li>
        </ul>
      </aside>

      <aside aria-label="相关课程">
        <h3>相关课程</h3>
        <ul>
          <li><a href="#">JavaScript 高级编程</a></li>
          <li><a href="#">设计模式精讲</a></li>
        </ul>
      </aside>
    </aside>
  </div>

  <footer class="site-footer">
    <p>&copy; 2024 DevWiki. All rights reserved.</p>
  </footer>
</body>
</html>

注意事项 ​

常见错误 ​

  1. 主内容放在 aside 中：aside 是辅助内容，不是主内容
html
<!-- 错误：文章正文放在 aside 中 -->
<aside>
  <h1>文章标题</h1>
  <p>这是文章的主要内容...</p> <!-- 不应该在 aside 中 -->
</aside>

<!-- 正确：主内容在 main 中 -->
<main>
  <article>
    <h1>文章标题</h1>
    <p>这是文章的主要内容...</p>
  </article>
</main>

  1. aside 内没有可识别的内容关系：aside 应该与主内容有间接关系

  2. 滥用 aside 代替 div：如果内容只是布局目的，使用 div

最佳实践 ​

  1. 为 aside 添加 aria-label：当页面有多个 aside 时帮助区分
  2. 确保移除 aside 不影响主内容：这是 aside 的核心特征
  3. 在响应式设计中处理 aside：小屏幕下可以将 aside 移到内容下方
  4. aside 内使用 section 分组：当 aside 包含多个独立区域时
  5. 保持 aside 内容简洁：侧边栏不应包含过长的内容

下一节

继续学习：footer 页脚

参考链接 ​