HTML 中的引用：引言、引文和块引用

在标记中使用错误的 HTML 引号非常常见。在本文中，让我们深入探讨所有这些，看看不同的情况和不同的 HTML 标签来处理这些情况。

引号涉及三个主要的 HTML 元素

• <blockquote>
• <q>
• <cite>

让我们来看一看。

块引用

块引用标签用于区分引用文本和其他内容。我十年级的英语老师反复强调，任何四行或四行以上的引用都应该以这种方式分开。HTML 规范没有这样的要求，但只要文本是引用，并且您希望它与周围的文本和标签分开，块引用就是语义上的选择。

默认情况下，浏览器会通过在每一侧添加边距来缩进块引用。

查看 CodePen
块引用标签 由 Undead Institute (@undeadinstitute) 创建
在 CodePen 上。

作为流动元素（即“块级”元素），块引用可以在其中包含其他元素。例如，我们可以毫无问题地将段落放在其中

<blockquote>
  <p></p>
  <p></p>
</blockquote>

但它也可以是其他元素，例如标题或无序列表

<blockquote>
    <h2></h2>
    <ul>
      <li></li>
      <li></li>
    </ul>
</blockquote>

需要注意的是，块引用应该仅用于引用，而不是作为设计中的装饰元素。这也有助于辅助功能，因为屏幕阅读器用户可以在块引用之间跳转。因此，仅出于美观目的使用的块引用元素可能会真正迷惑这些用户。如果您需要更具装饰性的东西，超出扩展引用的范围，那么也许带有类的 div 是可行的方案。

blockquote,
.callout-block {
  /* These could share styling */
}

使用 Q 进行引用

Q 标签（<q>）用于内联引用，或者我十年级的老师所说的四行以下的引用。许多现代浏览器会自动将引号作为伪元素添加到引用中，但您可能需要为旧版浏览器提供备用解决方案。

查看 CodePen
Q 标签 由 CSS-Tricks (@css-tricks) 创建
在 CodePen 上。

对于内联引用，典型的引号与<q>元素一样有效。但是，使用<q>的好处是它包含一个 cite 属性、引号的自动处理和引用级别的自动处理。<q>元素不应用于讽刺（例如，“你会为讽刺使用<q>标签，不是吗？”），或用引号表示一个词（例如，“很棒”是对作者的“准确”描述）。但是，如果您能想出如何标记带引号的词，请告诉我。因为那将是“很棒”。

cite 属性

<q>和块引用都可以使用 cite (cite) 属性。此属性包含一个 URL，该 URL 提供引用材料的上下文和/或参考。规范特别指出 URL 可以用空格包围。（我不确定为什么要指出这一点，但如果您想激怒语义代码神灵，您需要做的不仅仅是在周围添加空格。）

<p>The officer left a note saying <q cite="https://johnrhea.com/summons">You have been summoned to appear on the 4th day of January on charges of attempted reader bribery.</q></p>

默认情况下，cite属性对用户不可见。您可以使用一些 CSS 魔法将其添加进来，如下面的演示所示。您甚至可以进一步调整它，使引用在悬停时出现。

查看 CodePen
可归因的引用 由 CSS-Tricks (@css-tricks) 创建
在 CodePen 上。

以上两种选项都不太好。如果您需要引用一个来源，以便用户可以看到并访问它，您应该在 HTML 中执行此操作，并且可能使用<cite>元素，我们将在接下来介绍。

cite 元素

<cite>标签应该用于引用创意作品，而不是引用说话者或作者。换句话说，它不是用于引用。以下是示例 来自规范

<p>My favorite book is <cite>The Reality Dysfunction</cite> by
Peter F. Hamilton. My favorite comic is <cite>Pearls Before
Swine</cite> by Stephan Pastis. My favorite track is <cite>Jive
Samba</cite> by the Cannonball Adderley Sextet.</p>

这是另一个示例

查看 CodePen
引用此内容！ 由 CSS-Tricks (@css-tricks) 创建
在 CodePen 上。

如果本文的作者告诉你他会给你一个纸杯蛋糕，而你按姓名<cite>他，那在语义上是不正确的。因此，不会有纸杯蛋糕易手。如果你引用了他提供给你纸杯蛋糕的文章，那在语义上就是正确的，但由于作者不会那样做，你仍然不会得到纸杯蛋糕。抱歉。

默认情况下，浏览器会将 cite 标签斜体显示，并且使用 cite 元素不需要存在<q>或<blockquote>。如果您想引用一本书或其他创意作品，那么将其放在 cite 元素中。语义代码神灵会因为您没有使用<i>或<em>元素而对您微笑。

但是将 cite 元素放在哪里？在里面？外面？倒置？如果我们将其放在<blockquote>或<q>的内部，我们就将其作为引用的组成部分。出于这个原因，规范禁止这样做。

<!-- This is apparently wrong -->
<blockquote>
  Quote about cupcake distribution from an article
  <cite>The Article</cite>
</blockquote>

将其放在外面感觉很奇怪，并且如果您想将它们一起设置样式，还需要一个封闭元素，例如<div>。

<div class="need-to-style-together">
  <blockquote>
    Quote about cupcake distribution from an article
  </blockquote>
  <cite>The Article</cite>
</div>

注意：如果您搜索此问题，您可能会遇到一篇来自 2013 年的HTML5 Doctor 文章，该文章与本文中概述的大部分内容相矛盾。也就是说，每次它链接到文档以寻求支持时，文档都同意您正在阅读的文章而不是 HTML5 Doctor 文章。很可能这些文档自该文章撰写以来已发生更改。

嘿，figure 元素怎么样？

一种标记引用的方法——并且以一种取悦语义代码神灵的方式——是将块引用放在 figure 元素中。然后，将 cite 元素和任何其他作者或引用信息放在 figcaption 中。

<figure class="quote">
  <blockquote>
    But web browsers aren’t like web servers. If your back-end code is getting so big that it’s starting to run noticably slowly, you can throw more computing power at it by scaling up your server. That’s not an option on the front-end where you don’t really have one run-time environment—your end users have their own run-time environment with its own constraints around computing power and network connectivity.
  </blockquote>
  <figcaption>
    &mdash; Jeremy Keith, <cite>Mental models</cite>
  </figcaption>
</figure>

虽然这使所需的元素数量增加了一倍，但有几个好处

1. 它在语义上对所有四个元素都是正确的。
2. 它允许您包含和封装超出引用作品名称的作者信息。
3. 它为您提供了一种轻松的方式来设置引用的样式，而无需使用 div、span 或其他糟糕的方式。

查看 CodePen
你会这么说是有道理的 由 CSS-Tricks (@css-tricks) 创建
在 CodePen 上。

这些都不适用于对话

不是<dialog>！这些用于引人注目的模态。对话，例如，人们之间口语或打字的对话交换。

<blockquote>、<q>或<cite>都不应用于对话以及说话者之间的类似交换。如果您正在标记对话，您可以使用任何对您最有意义的方法。没有语义上的方法可以做到这一点。也就是说，规范建议使用<p>标签和标点符号以及<span>或<b>标签来指定说话者，以及<i>标签来标记舞台说明。

引用的辅助功能

根据我所做的研究，屏幕阅读器在理解语义代码神灵批准的<q>、<blockquote>或<cite>标签方面应该没有任何问题。

更多“方式”来“引用”

您可以使用 CSS 伪元素向<blockquote>添加引号。<q>元素自带引号，因此无需添加，但是将它们作为伪元素添加可以作为旧版浏览器（不会自动添加引号）的解决方法。由于这是现代浏览器添加引号的方式，因此不会有添加重复引号的危险。新浏览器将覆盖默认的伪元素，而支持伪元素的旧版浏览器将添加引号。

但是您不能像我一样，假设上述方法总是能为您提供智能的开合引号。即使字体支持智能引号，有时也会显示直引号。为安全起见，最好使用quotes CSS 属性来提高这些引号的智能性。

blockquote {
  quotes: "“" "”" "‘" "’";
}

查看 CodePen
“引用”区块引用 by CSS-Tricks (@css-tricks)
在 CodePen 上。

多级引用

现在让我们看看引用的级别。<q>标签将自动调整引用的级别。

假设您所在的区域使用英国惯例，即使用单引号。您可以使用 CSS quotes 规则将开合单引号放在列表的第一位。以下是在两种方式下使用的示例

查看 CodePen
引用内的引用 by CSS-Tricks (@css-tricks)
在 CodePen 上。

嵌套没有限制。这些嵌套的<q>元素甚至可以位于区块引用内的区块引用中。

如果您向区块引用添加引号，请注意，区块引用不会像<q>标签那样更改引用的级别。如果您希望在区块引用中包含引号，则可能需要添加一个后代选择器规则，以便在区块引用中以单引号级别（或如果您遵循英国惯例则为双引号）开始<q>元素。

 blockquote q {
  quotes: "‘" "’" "“" "”";
}

您放入的最后一个引用级别将继续贯穿随后的引用级别。要使用双、单、双、单……的约定，请向 CSS quotes 属性添加更多级别。

q {
  quotes: "“" "”" "‘" "’" "“" "”" "‘" "’" "“" "”";
}

悬挂标点

许多排版专家会告诉您，在区块引用中悬挂引号看起来更好（而且他们是正确的）。悬挂标点在这种情况下是指从文本中推出的引号，以便文本的字符垂直对齐。

CSS 中的一种可能性是在text-indent属性上使用稍微负一点的值。确切的负缩进会因字体而异，因此请务必使用最终使用的字体仔细检查间距。

blockquote {
  text-indent: -0.45em;
}

使用hanging-punctuation CSS 属性可以更好地处理此问题。在撰写本文时，它仅在 Safari 中受支持，因此我们将不得不逐步增强

/* Fallback */
blockquote {
  text-indent: -0.45em;
}

/* If there's support, erase the indent and use the property instead */
@supports ( hanging-punctuation: first) {
  blockquote {
    text-indent: 0;
    hanging-punctuation: first;
  }
}

使用hanging-punctuation更好，因为它不那么繁琐。在可以的时候，它会正常工作。

查看 CodePen
悬挂标点 by CSS-Tricks (@css-tricks)
在 CodePen 上。

我们可以动画化引号吗？

当然可以。

查看 CodePen
跳舞的引号 by CSS-Tricks (@css-tricks)
在 CodePen 上。

我不确定为什么要这样做，但是<q>标签中的引号是在UA样式表中添加的伪元素，因此如果需要，我们可以选择和设置它们的样式——包括动画。

等等，也许我们最终解决了反引号的问题。