Web学习网站

Appearance

<blockquote> 标签 ​

<blockquote> 标签用于定义从其他来源引用的长段落内容。它表示引用自其他来源的文本块。

概述 ​

<blockquote> 标签是 HTML 中的语义化标签，用于标识从其他来源引用的大段文本内容。它通常用于引用书籍、演讲、文章或其他网页中的内容。

语法 ​

html
<blockquote>
  引用的内容
</blockquote>

使用 cite 属性指定引用来源：

html
<blockquote cite="引用来源URL">
  引用的内容
</blockquote>

基本用法 ​

简单引用 ​

html
<blockquote>
  生活就像一盒巧克力，你永远不知道下一颗是什么味道。
</blockquote>

带来源的引用 ​

html
<blockquote cite="https://example.com/article">
  <p>人工智能是计算机科学的一个分支，它企图了解智能的实质，并生产出一种新的能以人类智能相似的方式做出反应的智能机器。</p>
</blockquote>

实际示例 ​

名人名言 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>blockquote 标签示例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    
    blockquote {
      margin: 2rem 0;
      padding: 1.5rem 2rem;
      border-left: 4px solid #007bff;
      background-color: #f8f9fa;
      font-style: italic;
      position: relative;
    }
    
    blockquote:before {
      content: """;
      font-size: 4em;
      color: #007bff;
      opacity: 0.2;
      position: absolute;
      left: 10px;
      top: -10px;
    }
    
    blockquote p {
      margin: 0;
      font-size: 1.1em;
      color: #333;
    }
    
    cite {
      display: block;
      margin-top: 1rem;
      text-align: right;
      font-style: normal;
      font-weight: bold;
      color: #666;
    }
    
    cite:before {
      content: "— ";
    }
  </style>
</head>
<body>
  <h1>名人名言</h1>
  
  <blockquote>
    <p>天才是百分之一的灵感加上百分之九十九的汗水。</p>
    <cite>托马斯·爱迪生</cite>
  </blockquote>
  
  <blockquote>
    <p>生活就像一盒巧克力，你永远不知道下一颗是什么味道。</p>
    <cite>《阿甘正传》</cite>
  </blockquote>
  
  <blockquote>
    <p>书山有路勤为径，学海无涯苦作舟。</p>
    <cite>韩愈</cite>
  </blockquote>
</body>
</html>

学术引用 ​

html
<article>
  <h1>人工智能发展现状</h1>
  
  <p>根据最新研究报告：</p>
  
  <blockquote cite="https://example.com/ai-report-2023">
    <p>人工智能技术在过去十年中取得了突破性进展，特别是在深度学习、自然语言处理和计算机视觉领域。预计到2030年，人工智能将为全球经济贡献超过15万亿美元的价值。</p>
  </blockquote>
  
  <p>专家们普遍认为：</p>
  
  <blockquote>
    <p>人工智能的发展将重塑各行各业，从医疗保健到金融服务，从制造业到教育领域都将发生深刻变革。</p>
    <cite>《2023年人工智能发展白皮书》</cite>
  </blockquote>
  
  <p>然而，也有学者提出警告：</p>
  
  <blockquote>
    <p>在享受人工智能带来便利的同时，我们也必须关注其潜在风险，包括就业冲击、隐私保护和伦理道德等问题。</p>
    <cite>李教授，计算机科学研究院</cite>
  </blockquote>
</article>

用户评论 ​

html
<section>
  <h2>用户评价</h2>
  
  <blockquote>
    <p>这款产品的质量超出了我的预期，使用体验非常好，强烈推荐给其他用户。</p>
    <cite>用户张三</cite>
  </blockquote>
  
  <blockquote>
    <p>售后服务很到位，遇到问题时客服响应迅速，解决方案专业有效。</p>
    <cite>用户李四</cite>
  </blockquote>
  
  <blockquote>
    <p>性价比很高，功能齐全，操作简单，非常适合我们中小企业使用。</p>
    <cite>王经理，XX公司</cite>
  </blockquote>
</section>

与相关标签的区别 ​

与 <q> 标签的区别 ​

html
<!-- blockquote 标签：用于长段落引用 -->
<blockquote>
  <p>这是长段落的引用内容，通常包含多个句子或段落。</p>
</blockquote>

<!-- q 标签：用于短引用 -->
<p>他说：<q>今天天气真好</q>，然后就出去了。</p>

与普通段落的区别 ​

html
<!-- 普通段落 -->
<p>这是普通文本内容。</p>

<!-- blockquote 标签：表示引用内容 -->
<blockquote>
  <p>这是引用的内容，具有特殊的语义含义。</p>
</blockquote>

样式化 ​

自定义引用样式 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    /* 默认 blockquote 样式 */
    blockquote {
      margin: 1em 40px;
    }
    
    /* 现代引用样式 */
    .modern-quote {
      position: relative;
      margin: 2rem 0;
      padding: 2rem;
      background-color: #f8f9fa;
      border-radius: 8px;
      font-style: italic;
      color: #495057;
    }
    
    .modern-quote:before,
    .modern-quote:after {
      content: """;
      font-size: 4em;
      color: #007bff;
      opacity: 0.2;
      position: absolute;
    }
    
    .modern-quote:before {
      top: -10px;
      left: 10px;
    }
    
    .modern-quote:after {
      content: """;
      bottom: -40px;
      right: 10px;
    }
    
    /* 简约引用样式 */
    .simple-quote {
      border-left: 3px solid #6c757d;
      padding: 1rem 1.5rem;
      margin: 1.5rem 0;
      background-color: #fff;
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    }
    
    /* 对话式引用 */
    .dialogue-quote {
      background-color: #e8f4fd;
      border-left: 4px solid #007bff;
      padding: 1.5rem;
      margin: 1.5rem 0;
      border-radius: 0 8px 8px 0;
    }
  </style>
</head>
<body>
  <blockquote class="modern-quote">
    <p>想象力比知识更重要，因为知识是有限的，而想象力概括着世界上的一切。</p>
    <cite>阿尔伯特·爱因斯坦</cite>
  </blockquote>
  
  <blockquote class="simple-quote">
    <p>成功是从失败到失败，也依然不改热情。</p>
    <cite>温斯顿·丘吉尔</cite>
  </blockquote>
  
  <blockquote class="dialogue-quote">
    <p>让我们用乐观的态度面对未来，相信明天会更好。</p>
    <cite>演讲者</cite>
  </blockquote>
</body>
</html>

无障碍访问 ​

使用 cite 属性 ​

html
<blockquote cite="https://example.com/speech">
  <p>我们不仅要看到眼前的困难，更要看到未来的希望。</p>
  <cite>演讲者姓名</cite>
</blockquote>

为屏幕阅读器提供信息 ​

html
<figure>
  <blockquote>
    <p>教育是人类进步的阶梯。</p>
  </blockquote>
  <figcaption>—— 诺贝尔奖获得者言论</figcaption>
</figure>

响应式设计 ​

移动端优化 ​

html
<!DOCTYPE html>
<html>
<head>
  <style>
    .responsive-quote {
      margin: 1.5rem 0;
      padding: 1.5rem;
      border-left: 4px solid #007bff;
      background-color: #f8f9fa;
      font-style: italic;
    }
    
    .responsive-quote cite {
      display: block;
      margin-top: 1rem;
      text-align: right;
      font-style: normal;
      font-weight: bold;
    }
    
    @media (max-width: 768px) {
      .responsive-quote {
        padding: 1rem;
        margin: 1rem 0;
        font-size: 0.95em;
      }
    }
  </style>
</head>
<body>
  <blockquote class="responsive-quote">
    <p>在任何情况下，都要保持积极的心态，相信自己能够克服困难，实现目标。</p>
    <cite>励志导师</cite>
  </blockquote>
</body>
</html>

最佳实践 ​

  1. 语义化使用：只在引用其他来源的内容时使用 <blockquote> 标签
  2. 长度适宜：用于较长的引用内容，短引用应使用 <q> 标签
  3. 注明来源：使用 cite 属性或 <cite> 标签指明引用来源
  4. 样式化：通过 CSS 为引用内容提供清晰的视觉区分
  5. 可访问性：确保屏幕阅读器用户能够理解引用内容的来源

浏览器兼容性 ​

<blockquote> 标签在所有浏览器中都得到完美支持：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • Internet Explorer

注意事项 ​

  1. <blockquote> 标签是块级元素
  2. 通常用于引用较长的文本内容
  3. 可以使用 cite 属性指定引用来源的 URL
  4. 建议使用 <cite> 标签指明引用来源或作者
  5. 浏览器默认会为 blockquote 添加左右边距

相关标签 ​