HTML 5中的内联报价和可访问性

Question

建议用什么方式在HTML文本中引用其他人？ 特别是如果我想确保屏幕阅读器能够正确处理它？

• 我应该使用双引号是这样的： "
• 我应该写" 看起来像这样：“？
• 我应该使用显然无法在此处演示的<q></q>对吗？
• 还有吗

http://html5doctor.com/blockquote-q-cite/对<q>工作原理有很多解释，但我没有看到建议。

Answer 1

对于短内联引号，请使用<q></q>标记。 大多数浏览器都会在引号周围插入引号，但是，如果您使用的是CSS重置，则可能需要执行以下操作：

q:before, q:after {
    content: """
}

对于任何更长的报价，我建议将<blockquote></blockquote>标记与<cite></cite>标记结合使用，如下所示：

<blockquote>
    This text is from another source
    <cite>
        <a href="http://source-url.com">Source Title</a>
    </cite>
</blockquote>

根据HTML5规范：

blockquote元素表示从另一个来源引用的内容，可以选择带有必须在页脚或cite元素内的引用，还可以带有内联更改（例如，注释和缩写）。

来源： https : //w3c.github.io/html/grouping-content.html#the-blockquote-element

避免将内联引号与<q></q>标记结合使用，但是可以将它们与<blockquote></blockquote>标记一起使用。 无论哪种情况，建议在外部来源的引用和页面的原始内容之间进行某种图形上的区分（例如，斜体或不同的背景颜色）。

Answer 2

TL; DR：使用q用于在线报价，无痕迹， blockquote用于长片段（带引号的时候，它不是内唯一的内容blockquote ）

您有两种选择：

• <q>元素 ，引号

该元素不能包含引号标点

引用元素内容的引号标点符号（例如引号）不能紧接在q元素之前，之后或内部。 它们将由用户代理插入渲染中。

但是您可以使用CSS覆盖默认值。 例如：

:lang(en) q:before {
  content: "“";
}
:lang(en) q:after {
  content: "”";
}

:lang(fr) q:before {
  content: "«";
}
:lang(fr) q:after {
  content: "»";
}

如您所见， 每种语言可能会有所不同

例：

<p>Shakespeare said <q>To be or not to be</q> was a question
     but never said what the answer was.</p>

• <blokquote>元素 ，用于摘要

该元素可以包括引号：

引号可用于在引用的文本和块引用内的注释之间划定轮廓。

小心<cite>元素，该元素旨在参考创意作品或其作者的名字。 它不包含报价。 例

<blockquote>
 <p>My favorite quote of Shakespeare is "To be or not to be ?"</p>
  <footer>
    — <cite class="title">The Tragedy of Hamlet, Prince of Denmark</cite>
    by <cite class="author">William Shakespeare</cite>
  </footer>
</blockquote>