<aside>: The Aside element

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

<aside> HTML 元素表示文档中与文档主要内容间接相关的一部分。<aside> 元素通常呈现为侧边栏或呼出框。

试一试

<p>
  Salamanders are a group of amphibians with a lizard-like appearance, including
  short legs and a tail in both larval and adult forms.
</p>

<aside>
  <p>The Rough-skinned Newt defends itself with a deadly neurotoxin.</p>
</aside>

<p>
  Several species of salamander inhabit the temperate rainforest of the Pacific
  Northwest, including the Ensatina, the Northwestern Salamander and the
  Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects,
  worms and other small creatures.
</p>
aside {
  width: 40%;
  padding-left: 0.5rem;
  margin-left: 0.5rem;
  float: right;
  box-shadow: inset 5px 0 5px -5px #29627e;
  font-style: italic;
  color: #29627e;
}

aside > p {
  margin: 0.5rem;
}

属性

此元素仅包含全局属性

用法说明

  • 不要使用 <aside> 元素来标记括号中的文本,因为这类文本被认为是主流程的一部分。

示例

使用 <aside>

此示例使用 <aside> 来标记文章中的一个段落。该段落与文章的主要内容仅间接相关。

html
<article>
  <p>
    The Disney movie <cite>The Little Mermaid</cite> was first released to
    theatres in 1989.
  </p>
  <aside>
    <p>The movie earned $87 million during its initial release.</p>
  </aside>
  <p>More info about the movie…</p>
</article>

结果

技术摘要

内容类别 流程内容区块内容可触及内容
允许内容 流内容.
标签省略 无,起始标签和结束标签都必须存在。
允许父级 任何接受 流程内容 的元素。请注意,<aside> 元素不能是 <address> 元素的后代。
隐式 ARIA 角色 complementary
允许的 ARIA 角色 feed, none, note, presentation, region, search
DOM 接口 HTMLElement

规范

规范
HTML
# the-aside-element

浏览器兼容性

另见