<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 元素