返回

blockquote

<blockquote>:HTMLElement

全局属性 说明
cite 是一个标注引用的信息的来源文档或者相关信息的URL。通常用来描述能够解释引文的上下文或者引用的信息。 
[Exposed=Window]
interface HTMLQuoteElement : HTMLElement {
  [HTMLConstructor] constructor();

  [CEReactions] attribute USVString cite;
};

blockquote元素表示从另一个来源引用的部分。

blockquote中的内容必须从另一个来源引用，如果引用的地址中有内容，则可以在cite属性中引用它。

如果存在cite属性，则它必须是一个有效的URL，可能会被空格包围。 为了获得相应的引用链接，必须相对于元素的节点文档来解析属性的值。 用户代理可以允许用户跟踪此类引用链接，但它们主要供私人使用（例如，通过服务器端脚本收集有关站点使用报价的统计信息），而不是读者。

blockquote的内容可以缩写，也可以以常规方式为文本的语言添加上下文。

例子

例如，英语通常使用方括号来完成此操作。 考虑一页上写着“Jane ate the cracker. She then said she liked apples and fish.”的页面。 它可以引用如下：

<blockquote>
 <p>[Jane] then said she liked [...] fish.</p>
</blockquote>

quotation的属性（如果有的话）必须放在blockquote元素之外。

例如，此处的属性在引号后的段落中给出

<blockquote>
 <p>I contend that we are both atheists. I just believe in one fewer
 god than you do. When you understand why you dismiss all the other
 possible gods, you will understand why I dismiss yours.</p>
</blockquote>
<p>— Stephen Roberts</p>

下面的其他示例显示了其他显示归因的方式。

cite IDL属性必须反映元素的引用内容属性。

这里，blockquote元素与figure元素及其figcaption结合使用，以清楚地将引号与其属性联系起来（这不是引号的一部分，因此不属于blockquote本身）：

<figure>
 <blockquote>
  <p>The truth may be puzzling. It may take some work to grapple with.
  It may be counterintuitive. It may contradict deeply held
  prejudices. It may not be consonant with what we desperately want to
  be true. But our preferences do not determine what's true. We have a
  method, and that method helps us to reach not absolute truth, only
  asymptotic approaches to the truth — never there, just closer
  and closer, always finding vast new oceans of undiscovered
  possibilities. Cleverly designed experiments are the key.</p>
 </blockquote>
 <figcaption>Carl Sagan, in "<cite>Wonder and Skepticism</cite>", from
 the <cite>Skeptical Inquirer</cite> Volume 19, Issue 1 (January-February
 1995)</figcaption>
</figure>

下一个示例显示在引用和块引用之间的用法：

<p>His next piece was the aptly named <cite>Sonnet 130</cite>:</p>
<blockquote cite="https://quotes.example.org/s/sonnet130.html">
  <p>My mistress' eyes are nothing like the sun,<br>
  Coral is far more red, than her lips red,<br>
  ...

此示例显示论坛帖子如何使用blockquote显示用户正在回复的帖子。 每个帖子都使用article元素，以标记主题。

<article>
 <h1><a href="https://bacon.example.com/?blog=109431">Bacon on a crowbar</a></h1>
 <article>
  <header><strong>t3yw</strong> 12 points 1 hour ago</header>
  <p>I bet a narwhal would love that.</p>
  <footer><a href="?pid=29578">permalink</a></footer>
  <article>
   <header><strong>greg</strong> 8 points 1 hour ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>Dude narwhals don't eat bacon.</p>
   <footer><a href="?pid=29579">permalink</a></footer>
   <article>
    <header><strong>t3yw</strong> 15 points 1 hour ago</header>
    <blockquote>
     <blockquote><p>I bet a narwhal would love that.</p></blockquote>
     <p>Dude narwhals don't eat bacon.</p>
    </blockquote>
    <p>Next thing you'll be saying they don't get capes and wizard
    hats either!</p>
    <footer><a href="?pid=29580">permalink</a></footer>
    <article>
     <article>
      <header><strong>boing</strong> -5 points 1 hour ago</header>
      <p>narwhals are worse than ceiling cat</p>
      <footer><a href="?pid=29581">permalink</a></footer>
     </article>
    </article>
   </article>
  </article>
  <article>
   <header><strong>fred</strong> 1 points 23 minutes ago</header>
   <blockquote><p>I bet a narwhal would love that.</p></blockquote>
   <p>I bet they'd love to peel a banana too.</p>
   <footer><a href="?pid=29582">permalink</a></footer>
  </article>
 </article>
</article>

此示例显示了对短代码段使用blockquote的情况，表明在blockquote元素内不必使用p元素：

<p>He began his list of "lessons" with the following:</p>
<blockquote>One should never assume that his side of
the issue will be recognized, let alone that it will
be conceded to have merits.</blockquote>
<p>He continued with a number of similar points, ending with:</p>
<blockquote>Finally, one should be prepared for the threat
of breakdown in negotiations at any given moment and not
be cowed by the possibility.</blockquote>
<p>We shall now discuss these points...