HTML blockquote 标签：块级引用与来源标注

HTML <blockquote> 标记从另一来源引用的独立部分。它可以包含多个段落。你可以在其 cite 属性中记录原始 URL，并添加一个单独的可见链接，以便读者查看来源。

什么时候应该使用 blockquote？

使用 blockquote 将引用内容作为独立区块展示，不要仅用它来缩进段落或更改颜色。句子中的短引用可以使用 <q>，具体用法请参阅HTML q 标签参考。

块引用可以包含段落和其他流内容。保持引用与其归属清晰分开：将作者或来源说明放在 <blockquote> 之外。检查原文并只使用为你的目的所需的材料。

带有源链接的完整示例

将以下代码保存为 quote.html 并在浏览器中打开。不需要服务器或额外的库。简短的英文引用直接来自 HTML 标准。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>块级引用示例</title>
</head>
<body>
  <p>HTML 标准对 blockquote 所表示的内容作出了如下说明。</p>
  <blockquote cite="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element">
    <p lang="en">a section that is quoted from another source</p>
  </blockquote>
  <p>来源: <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-blockquote-element"
    target="_blank" rel="noopener noreferrer"><cite>HTML Standard, blockquote element</cite></a></p>
</body>
</html>

浏览器按顺序显示引言段落、引用内容和来源链接。默认样式各不相同，但浏览器通常会给引用内容增加额外的边距。链接会打开 HTML 标准中相关的章节。引用内容保留其原始英文措辞。

cite 属性不同于可见的引用

cite 属性包含所引用来源的 URL。添加它不会自动显示链接或注明来源。当读者需要查看参考资料时，应包含一个单独的 <a> 元素和描述性文本。

cite 属性和 <cite> 元素名字相同，但作用不同。该属性用于记录来源地址；该元素用于标注作品标题，例如书籍或文档。仅有作者姓名并不构成作品标题。

使用 CSS 样式美化引用内容

在 HTML 中保留引用的含义，并使用 CSS 调整其边距和边框。从示例的 head 中链接样式表，然后向该样式表添加以下规则。你也可以将该规则添加到页面使用的现有样式表中。

blockquote {
  margin: 1.5rem 0;
  padding: 0.5rem 1rem;
  border-left: 0.25rem solid #477080;
}

引用获得左边框和内部间距。如果添加背景或文本颜色，请保持可读的对比度。不要仅为了获得这种外观而将普通的、未引用的内容标记为引用。请参阅 HTML 标准的引用定义 以及 MDN 引用参考，了解其语法和使用条件。