<blockquote>: 块级引用元素

Baseline 已广泛支持

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

<blockquote> HTML 元素表示其包含的文本是扩展引用的文本。通常,这会以缩进(关于如何更改,请参阅 “使用说明”)的形式在视觉上呈现。引用的来源 URL 可以使用 cite 属性指定,而来源的文本表示可以使用 <cite> 元素来提供。

试一试

<div>
  <blockquote cite="https://www.huxley.net/bnw/four.html">
    <p>
      Words can be like X-rays, if you use them properly—they’ll go through
      anything. You read and you’re pierced.
    </p>
  </blockquote>
  <p>—Aldous Huxley, <cite>Brave New World</cite></p>
</div>
div:has(> blockquote) {
  background-color: #ededed;
  margin: 10px auto;
  padding: 15px;
  border-radius: 5px;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote + p {
  text-align: right;
}

属性

此元素的属性包括全局属性

cite

一个指定引述信息的来源文档或消息的 URL。此属性旨在指向解释引述的上下文或参考信息。

用法说明

根据规范,引述的署名(如果有)必须放在 <blockquote> 元素之外。

要更改应用于引述文本的缩进,请使用 CSSmargin-left 和/或 margin-right 属性,或使用 margin 简写属性。

要包含较短的行内引用而非单独的块级引用,请使用 <q>(引用)元素。

示例

此示例演示了如何使用 <blockquote> 元素引用 RFC 1149 中的一段话,其标题为 _《通过禽类载体传输 IP 数据报的标准》_。

html
<blockquote cite="https://datatracker.ietf.org/doc/html/rfc1149">
  <p>
    Avian carriers can provide high delay, low throughput, and low altitude
    service. The connection topology is limited to a single point-to-point path
    for each carrier, used with standard carriers, but many carriers can be used
    without significant interference with each other, outside early spring. This
    is because of the 3D ether space available to the carriers, in contrast to
    the 1D ether used by IEEE802.3. The carriers have an intrinsic collision
    avoidance system, which increases availability.
  </p>
</blockquote>

结果

技术摘要

内容类别 流内容、分段根、可感知内容。
允许内容 流内容.
标签省略 无,起始标签和结束标签都必须存在。
允许父级 任何接受流内容的元素。
隐式 ARIA 角色 块引用
允许的 ARIA 角色 任意
DOM 接口 HTMLQuoteElement

规范

规范
HTML
# the-blockquote-element

浏览器兼容性

另见

  • 用于行内引用的 <q> 元素。
  • 用于来源引用的 <cite> 元素。
  • 通过 heydonworks.com (2024) 提供的 blockquote 元素