在HTML中引用：引号，引用和块

这太常见了，无法在标记中看到用于引号的不正确的HTML。在本文中，让我们研究所有这些，查看不同的情况和不同的HTML标签以处理这些情况。

报价中涉及三个主要的HTML元素：

让我们看看。

块

BlockQuote标签用于区分引用的文本和其余内容。我的十年一年级的英语老师将其钻入我的脑海中，即以这种方式将任何四行或更长的报价都与众不同。 HTML规格没有这样的要求，但是只要文本是报价，您希望将其与周围的文本和标签区分开来，那么blockquote就是语义选择。

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

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

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

但这也可能是其他元素，例如标题或无序列表：

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

重要的是要注意，BlockQuotes仅用于引号，而不是设计中的装饰元素。这也有助于可访问性，因为屏幕读取器用户可以在blockquotes之间跳跃。因此，仅用于美学的块状元素确实会使这些用户感到困惑。如果您需要一些更具装饰性的东西，这些装饰能超出扩展报价的范围，那么也许与一堂课的div是必经之路。

 blockquote，
.callout-block {
  / *这些可以共享样式 */
}

引用Q

Q标签（）用于内联行情，或者我十年一年级的老师说的是四行。许多现代浏览器会自动将报价标记添加到报价中，作为伪元素，但您可能需要用于较旧浏览器的备份解决方案。

典型的报价标记对于内联引号与元素一样有效。但是，使用的好处是，它包括引用属性，引号的自动处理以及自动处理报价级别。 元素不应用于讽刺（例如，“您将使用标签来讽刺，不是吗？”），或表示带有空气报价的单词（例如“很棒”是对作者的“准确”描述）。但是，如果您能弄清楚如何标记空气报价，请告诉我。因为那将是“很棒的”。

引文属性

和blockquotes均可使用引文（cite）属性。该属性具有一个URL，可为引用材料提供上下文和/或参考。规格指的是说URL可以被空间包围。 （我不确定为什么要指出，但是如果您想激怒语义代码神灵，您必须做的不仅仅是抛弃空间。）

 <p>官员留下一张纸条，说<q cite="“" https:>您已被召集在一月的第四天出庭，涉嫌未遂读者贿赂。</q> </p>

默认情况下，用户看不到该引用属性。您可以在以下演示中添加大量CSS魔术。您甚至可以进一步摆弄它，以使引文出现在悬停。

这些选项都不特别。如果您需要引用一个来源，以使用户可以看到它并转到它，则应该在HTML中进行，并且可能使用元素进行操作，我们将接下来介绍。

引用元素

标签应用于引用创意工作，而不是说或写报价的人。换句话说，这不是为了引用。以下是规格的示例：

 <p>我最喜欢的书是<cite>现实功能障碍</cite>
彼得·汉密尔顿。我最喜欢的漫画是<cite>珍珠之前
猪</cite>由斯蒂芬·帕斯蒂斯（Stephan Pastis）制作。我最喜欢的曲目是<cite> jive
桑巴</cite></p>

这是另一个例子：

如果本文的作者告诉您，他会给您一个纸杯蛋糕，而您的名字>他，那在语义上是不正确的。因此，没有纸杯蛋糕会易手。如果您引用了他为您提供纸杯蛋糕的文章，那在语义上是正确的，但是由于作者不这样做，您仍然不会得到纸杯蛋糕。对不起。

默认情况下，浏览斜体标签，并且不需要出现或

使用Cite元素。如果您想引用一本书或其他创造性作品，请在引用元素中拍打。语义神会因为不使用或元素而对您微笑。

但是在哪里放置引用元素？里面？外部？颠倒了？如果我们将其放入

或中，则将其作为报价的一部分。仅出于这个原因，规格禁止这一点。

 
<blockquote>
  关于纸杯蛋糕发行的报价
  <cite>文章</cite>
</blockquote>

将其放在外面感觉不对，还需要您拥有一个封闭元素，例如

，如果您想将它们造型。

 <div>
  <blockquote>
    关于纸杯蛋糕发行的报价
  </blockquote>
  <cite>文章</cite>
</div>

NB如果您在Google上进行了搜索，则可能会遇到2013年的HTML5 Doctor文章，与此处的许多内容相矛盾。就是说，每当它链接到文档以寻求支持时，文档都与您当前阅读的文章一致，而不是HTML5 Doctor文章。自从该文章撰写以来，文档很可能发生了变化。

嘿，图元素呢？

标记引号的一种方法 - 并以一种使语义代码神灵愉悦的方式放置在图形元素中。然后，将引用元素和任何其他作者或引文信息放在小提琴中。

 <figud>
  <blockquote>
    但是Web浏览器不像Web服务器。如果您的后端代码变得如此之大，以至于它开始慢慢运行，则可以通过扩展服务器来向其投掷更多的计算能力。这不是您真正没有<em>一个</em>运行时环境的前端的选择 - 您的最终用户有自己的运行时环境，其围绕计算功率<strong>和</strong>网络连接的限制。
  </blockquote>
  <figcaption>
    ＆mdash;杰里米·基思（Jeremy Keith），<cite>心理模型</cite>
  </figcaption>
</figud>

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

1. 对于所有四个元素，它在语义上都是正确的。
2. 它允许您既包含并封装作者信息，否则就引用了作品名称。
3. 它为您提供了一种简单的方式来对报价进行样式，而无需求助于divs，跨越或可怜。

这些都不是对话

不是！这些是用于引人注目的模式。对话，就像在说话或互相打字之间进行的对话交流。

and and 均不得用于对话和说话者之间的类似交流。如果您要标记对话，则可以使用对您最有意义的任何东西。没有语义方法可以做到这一点。也就是说，规格建议使用

标签和标点符号使用或标签，以指定扬声器和标签以标记阶段方向。

引号的可访问性

从我所做的研究中，屏幕读取器不应该有任何问题，即了解语义鉴定的，

或标签。

更多的“引用”方式

您可以使用CSS伪元素将引号添加到

。 元素带有引号键，因此不需要添加它们，但是将它们添加为伪元素可能是对不自动添加它们的旧浏览器的解决方法。由于这是现代浏览器添加引号的方式，因此没有添加重复报价的危险。新的浏览器将覆盖默认的伪元素，而支持伪元素的较旧浏览器将添加报价。

但是，您不能像我一样，假设上述始终会给您聪明的开头和关闭报价。即使字体支持智能报价，有时也会显示直接引号。为了安全起见，最好使用引号CSS属性来提高这些引号的智能。

 blockquote {
  引号： ””” ””” ”'” ”'”;
} 

多层次引用

现在让我们看报价级别。 标签将自动调整报价级别。

假设您正在使用英国使用单语引号的惯例。您可以使用CSS引号规则将列表中的开口和关闭单引号放在首位。这是两种方式的示例：

嵌套没有限制。那些嵌套的元素甚至可以在一个块中的块中。

如果将引号添加到一个块引号，请知道blockQuote不会像标签那样更改报价级别。如果您期望在一个块语言中有报价，则可能需要在单引号级别的块中添加一个后代选择器规则以启动元素（如果您遵循英国公约，则可以双引号）。

 blockquote q {
  引号： ”'” ”'” ””” ”””;
}

您输入的最后一个报价级别将继续通过随后的报价级别。要使用双重，单，双，单，单…约定，请在CSS引号属性中添加更多级别。

 Q {
  引号： ””” ””” ”'” ”'” ””” ””” ”'” ”'” ””” ”””;
}

悬挂标点符号

许多排版专家会告诉您，将引号上的引号上的标记看起来更好（而且是对的）。在这种情况下，悬挂标点符号是从文本中推出的引号，以使文本的字符垂直串联。

CSS中的一种可能性是对文本内部属性使用略有负值。确切的负凹痕将因字体而异，因此请务必用最终使用的字体仔细检查间距。

 blockquote {
  文本式：-0.45em;
}

使用悬挂式CSS属性，有一种更好的方法来处理此问题。它仅在撰写本文时才在Safari中得到支持，因此我们必须逐步增强：

 /* 倒退 */
blockquote {
  文本式：-0.45em;
}

/ *如果有支持，请删除缩进并使用该属性 */
@supports（悬挂 - 函数：第一个）{
  blockquote {
    文字 -  0：0;
    悬挂 - 首先；
  }
}

使用悬挂 - 函数更好，因为它的烦恼较小。它可以在可能的情况下工作。

我们可以动画引号吗？

当然我们可以。

为什么您需要这样做，我不确定，但是添加了标签中的引号标记是UA样式表中的伪元素，因此，如果需要，我们可以选择和样式（包括动画）。

等等，也许我们只是解决了空气报价的问题。

以上是在HTML中引用：引号，引用和块的详细内容。更多信息请关注PHP中文网其他相关文章！