试一试
<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 |
浏览器兼容性
加载中…