引用标签(blockquote, q)

在HTML中，引用标签用于标记文档中的引用内容，包括块级引用(<blockquote>)和内联引用(<q>)。它们不仅语义化地标注内容来源，还能通过CSS实现丰富的样式效果。

<blockquote>标签

<blockquote>用于定义长引用，通常是独立成段的块级元素。浏览器默认会为其添加左右外边距，使其与其他内容区分开。该标签通常与cite属性配合使用，标明引用来源的URL。

<blockquote cite="https://example.com/philosophy">
  <p>To be or not to be, that is the question.</p>
</blockquote>

嵌套结构

<blockquote>可以包含其他块级元素，最常见的是<p>标签：

<blockquote>
  <p>第一段引用内容</p>
  <p>第二段引用内容</p>
</blockquote>

样式定制

通过CSS可以自定义引用样式，比如添加引号装饰：

blockquote {
  border-left: 4px solid #ccc;
  padding-left: 1em;
  font-style: italic;
  color: #555;
}

<q>标签

<q>用于短小的内联引用，浏览器会自动为其添加双引号（可通过CSS修改）。与<blockquote>类似，它也支持cite属性：

<p>正如莎士比亚所说：<q cite="https://example.com/hamlet">生存还是毁灭</q>，这是个问题。</p>

引号控制

不同语言的引号样式可以通过quotes属性定义：

q {
  quotes: "「" "」" "『" "』";
}
/* 使用示例 */
<p>日文引用：<q>こんにちは</q></p>

组合使用案例

两种引用标签可以混合使用，形成层次结构：

<blockquote>
  <p>鲁迅在《狂人日记》中写道：</p>
  <q>我横竖睡不着，仔细看了半夜，才从字缝里看出字来，满本都写着两个字是"吃人"！</q>
  <footer>— <cite>《狂人日记》</cite></footer>
</blockquote>

语义化重要性

使用引用标签而非普通元素+引号，能为屏幕阅读器等辅助技术提供明确语义：

<!-- 不推荐 -->
<div class="fake-quote">看起来像引用的内容</div>

<!-- 推荐 -->
<q>真正的语义化引用</q>

高级应用示例

结合<figure>和<figcaption>创建带说明的引用区块：

<figure>
  <blockquote>
    <p>我们所有的知识都开始于感性，然后进入到知性，最后以理性告终。</p>
  </blockquote>
  <figcaption>— 康德, <cite>纯粹理性批判</cite></figcaption>
</figure>

浏览器兼容性注意事项

虽然现代浏览器都支持这两个标签，但需要注意：

• IE7及以下版本需要特殊样式处理
• 某些语言环境可能需要手动设置lang属性以保证引号正确显示
• 打印样式可能需要单独调整引用内容的显示效果

/* IE7修复方案 */
blockquote {
  zoom: 1;
  display: inline;
}

动态内容处理

通过JavaScript动态插入引用时，需保持语义完整性：

document.addEventListener('DOMContentLoaded', function() {
  const newQuote = document.createElement('blockquote');
  newQuote.innerHTML = '<p>动态添加的引用内容</p>';
  document.body.appendChild(newQuote);
});

可访问性最佳实践

确保引用内容对辅助技术友好：

• 始终为<blockquote>提供文本内容，避免空标签
• 当引用图像或媒体时，使用aria-labelledby关联描述
• 对于长引用，考虑添加"跳转到引用来源"的链接

<blockquote aria-labelledby="quote-source">
  <p id="quote-content">...</p>
  <a id="quote-source" href="#citation">查看来源</a>
</blockquote>