PHP小码农

Appearance

blockquote 引用块 ​

<blockquote> 标签用于标记块级别的引用内容，表示引用自其他来源的一段或多段文字。它常用于引用名人名言、文章摘录、用户评论等。在语义上，<blockquote> 表示这段内容是从其他来源引用的，并非作者本人的原创内容。

前置知识

阅读本节前，建议先了解：hr 分隔线

基础概念 ​

<blockquote> 是块级元素，用于表示从其他地方引用的一段或多段文本。浏览器默认会为 <blockquote> 添加左侧缩进（通常是 40px），使其在视觉上与正文区分开来。

<blockquote> 通常与 <cite> 或 <footer> 搭配使用，标注引用的来源。此外，<blockquote> 可以嵌套使用，表示引用中的引用。

语法 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>blockquote 引用块示例</title>
</head>
<body>
  <h1>经典名言</h1>

  <!-- 基本用法：包裹引用内容 -->
  <blockquote>
    <p>学而不思则罔，思而不学则殆。</p>
  </blockquote>

  <!-- 使用 footer 标注引用来源 -->
  <blockquote>
    <p>千里之行，始于足下。</p>
    <footer>—— <cite>《道德经》</cite></footer>
  </blockquote>
</body>
</html>

详细说明 ​

cite 属性 ​

<blockquote> 的 cite 属性用于指定引用来源的 URL。这个属性不会在页面上显示，但对机器（如搜索引擎）有意义。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>cite 属性示例</title>
</head>
<body>
  <!-- cite 属性提供来源 URL（不可见） -->
  <blockquote cite="https://www.w3.org/TR/html5/">
    <p>HTML5 定义了第五版超文本标记语言，它是描述网页结构和内容的标准语言。</p>
  </blockquote>

  <!-- 配合 footer 和 cite 标签展示引用来源（可见） -->
  <blockquote cite="https://www.example.com/speech">
    <p>我们不能总是为我们的青年建设美好的未来，但我们必须为未来建设我们的青年。</p>
    <footer>—— 富兰克林·罗斯福，<cite>就职演说</cite></footer>
  </blockquote>
</body>
</html>

cite 属性 vs cite 标签

  • <blockquote cite="..."> 中的 cite 是一个属性，值为 URL，对用户不可见
  • <cite> 是一个独立的标签，用于标记作品标题，对用户可见
  • 两者功能不同，但常常配合使用

blockquote 中包含的内容 ​

<blockquote> 是块级容器，可以包含段落、标题、列表等块级内容，甚至可以包含其他 <blockquote>（嵌套引用）。

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>blockquote 内容示例</title>
</head>
<body>
  <!-- 引用多段文字 -->
  <blockquote>
    <p>第一段引用内容。这段文字来自某篇技术博客。</p>
    <p>第二段引用内容。继续引用同一来源的后续内容。</p>
  </blockquote>

  <!-- 引用中包含标题和列表 -->
  <blockquote>
    <h3>编程的基本原则</h3>
    <p>以下是几个重要的编程原则：</p>
    <ul>
      <li>保持代码简洁</li>
      <li>遵循单一职责原则</li>
      <li>编写可读性高的代码</li>
    </ul>
  </blockquote>

  <!-- 引用包含 figure -->
  <blockquote>
    <p>这段引文配有一张插图：</p>
    <figure>
      <img src="diagram.png" alt="系统架构图">
      <figcaption>图 1：系统架构示意图</figcaption>
    </figure>
  </blockquote>
</body>
</html>

嵌套引用 ​

<blockquote> 可以嵌套使用，用于表示引用中的引用。浏览器会为每一层嵌套增加缩进：

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>嵌套引用示例</title>
  <style>
    body {
      max-width: 680px;
      margin: 0 auto;
      padding: 2rem 1rem;
      font-family: sans-serif;
      line-height: 1.6;
    }
    blockquote {
      border-left: 3px solid #ccc;
      padding-left: 1rem;
      margin: 1rem 0;
      color: #555;
    }
    blockquote blockquote {
      border-left-color: #999;
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>嵌套引用示例</h1>

  <blockquote>
    <p>张三在他的文章中写道：</p>
    <blockquote>
      <p>李四曾说过：「真正的智慧不在于知道一切，而在于知道如何去寻找答案。」</p>
      <footer>—— 张三，<cite>《思考的力量》</cite></footer>
    </blockquote>
  </blockquote>

  <hr>

  <blockquote>
    <p>在讨论软件工程时，我们不能忘记 Fred Brooks 的经典论述：</p>
    <blockquote>
      <p>向一个已经延期的软件项目增加人手，只会使它更加延期。</p>
      <footer>—— Fred Brooks，<cite>《人月神话》</cite></footer>
    </blockquote>
  </blockquote>
</body>
</html>

blockquote 的默认样式 ​

属性默认值（Chrome）说明
displayblock块级元素
margin1em 40px上下 1em，左右 40px
其他无特殊样式不同浏览器可能有细微差异

自定义 blockquote 样式 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>自定义引用样式</title>
  <style>
    body {
      max-width: 680px;
      margin: 0 auto;
      padding: 2rem 1rem;
      font-family: sans-serif;
      line-height: 1.7;
    }

    /* 经典左侧竖线样式 */
    .quote-classic {
      border-left: 4px solid #4a90d9;
      padding: 0.5rem 1rem;
      margin: 1.5rem 0;
      background: #f8f9fa;
      color: #444;
    }
    .quote-classic footer {
      margin-top: 0.5rem;
      font-size: 0.875rem;
      color: #888;
    }

    /* 引号装饰样式 */
    .quote-decorated {
      position: relative;
      padding: 1rem 1.5rem 1rem 3rem;
      margin: 1.5rem 0;
      background: #fefefe;
      border: 1px solid #eee;
      border-radius: 4px;
    }
    .quote-decorated::before {
      content: "\201C";  /* 左双引号 */
      position: absolute;
      left: 0.5rem;
      top: 0;
      font-size: 3rem;
      color: #ccc;
      line-height: 1;
    }

    /* 居中样式 */
    .quote-center {
      text-align: center;
      padding: 1.5rem 2rem;
      margin: 2rem 0;
      font-size: 1.25rem;
      font-style: italic;
      color: #555;
    }
  </style>
</head>
<body>
  <h1>引用样式展示</h1>

  <p>经典左侧竖线样式：</p>
  <blockquote class="quote-classic">
    <p>简单是可靠的先决条件。</p>
    <footer>—— Edsger W. Dijkstra</footer>
  </blockquote>

  <p>引号装饰样式：</p>
  <blockquote class="quote-decorated">
    <p>好的设计是显而易见的。伟大的设计是透明的。</p>
    <footer>—— Joe Sparano</footer>
  </blockquote>

  <p>居中装饰样式：</p>
  <blockquote class="quote-center">
    <p>生活不是等待暴风雨过去，<br>而是学会在雨中跳舞。</p>
  </blockquote>
</body>
</html>

实战示例 ​

名言展示页面 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>名言集锦</title>
  <style>
    body {
      font-family: "Georgia", serif;
      max-width: 680px;
      margin: 0 auto;
      padding: 2rem 1rem;
      line-height: 1.8;
      color: #333;
    }
    blockquote {
      border-left: 4px solid #d4a574;
      padding: 0.75rem 1.25rem;
      margin: 2rem 0;
      background: #faf8f5;
      border-radius: 0 4px 4px 0;
    }
    blockquote p {
      margin: 0.5rem 0;
    }
    blockquote footer {
      margin-top: 0.75rem;
      text-align: right;
      font-size: 0.875rem;
      color: #888;
    }
    blockquote cite {
      font-style: italic;
    }
  </style>
</head>
<body>
  <h1>科技界名言集锦</h1>

  <blockquote>
    <p>创新区分领导者和追随者。</p>
    <footer>—— 史蒂夫·乔布斯</footer>
  </blockquote>

  <blockquote cite="https://www.brainyquote.com">
    <p>你的时间有限，不要浪费在过别人的生活上。</p>
    <footer>—— 史蒂夫·乔布斯，<cite>斯坦福演讲</cite></footer>
  </blockquote>

  <blockquote>
    <p>我们选择登月，不是因为它容易，而是因为它困难。</p>
    <footer>—— 约翰·肯尼迪</footer>
  </blockquote>

  <blockquote>
    <p>任何足够先进的技术，都与魔法无异。</p>
    <footer>—— 亚瑟·C·克拉克，<cite>《未来的轮廓》</cite></footer>
  </blockquote>
</body>
</html>

文章引用标注 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文章引用标注</title>
  <style>
    body { max-width: 680px; margin: 0 auto; padding: 2rem 1rem; line-height: 1.7; }
    blockquote { border-left: 3px solid #4a90d9; padding: 0.5rem 1rem; margin: 1rem 0; color: #555; }
    blockquote footer { font-size: 0.85rem; color: #888; margin-top: 0.5rem; }
  </style>
</head>
<body>
  <h1>Web 标准的发展</h1>

  <p>万维网的发明者蒂姆·伯纳斯-李在创建 Web 时，就设定了一些基本的原则。正如他所说：</p>

  <blockquote cite="https://www.w3.org/">
    <p>Web 的力量在于其普遍性。无论是残障人士还是健全人，无论使用何种设备，每个人都能访问，这一点至关重要。</p>
    <footer>—— 蒂姆·伯纳斯-李</footer>
  </blockquote>

  <p>这一理念至今仍是 Web 标准制定的核心指导思想。HTML5 规范在这一点上延续了这一传统，通过语义化标签和 ARIA 属性使 Web 内容对所有人更加可访问。</p>

  <p>关于 HTML5 的设计原则，W3C 明确指出：</p>

  <blockquote cite="https://www.w3.org/TR/html-design-principles/">
    <p>HTML5 的设计必须基于兼容性、实用性和互操作性。不应为理论上的纯洁性而牺牲实际的可用性。</p>
    <footer>—— <cite>HTML5 设计原则</cite></footer>
  </blockquote>

  <p>这种务实的设计哲学使得 HTML5 成为当今最广泛使用的标记语言。</p>
</body>
</html>

注意事项 ​

blockquote 的误用 ​

html
<!-- 错误：不应为了缩进而使用 blockquote -->
<p>正常段落。</p>
<blockquote>  <!-- 不推荐：这里只是想缩进文字，不是引用 -->
  <p>这段文字需要缩进显示。</p>
</blockquote>

<!-- 正确：使用 CSS margin 实现缩进 -->
<p style="margin-left: 2rem;">这段文字需要缩进显示。</p>

blockquote 与缩写的区别 ​

<blockquote> 是语义标签，表示引用内容。如果只需要视觉效果上的缩进，应使用 CSS 而非 <blockquote>。

需求推荐方案
引用外部内容使用 <blockquote>
视觉缩进使用 CSS margin 或 padding
侧边栏内容使用 <aside>
附属说明使用 <details> 或 <aside>

最佳实践 ​

  1. 使用 cite 属性：为 <blockquote> 添加 cite 属性标注引用来源的 URL
  2. 标注出处：使用 <footer> 和 <cite> 标签在页面上展示引用的来源
  3. 不要滥用：只在真正引用外部内容时使用，不要用作缩进工具
  4. 合理嵌套：嵌套引用的层级不宜过深（最多 2~3 层）
  5. CSS 美化：通过 CSS 添加左侧边框、背景色等视觉提示，让引用块更易识别

下一节

继续学习：pre 预格式文本

参考链接 ​