Question

我读了两个关于blockquotes的事情：

cite-tag必须位于blockquote-tag
引号不是semntic布局的一部分。这是有道理的，因为我不希望用户处理正确的报价。例如。如果我想使用Guillemets。

这会导致问题。如果我希望它看起来那样：

"Blockquotes are an essential part of a fancy website."
                                                – Cite

标记看起来像这样：

<blockquote><p>Blockquotes are an essential part of a fancy website."</p>
<cite>Cite</cite></blockquote>

我可以使用：before和：after元素来添加引号和短划线。但是，如果我有两个段落怎么办？我可以将它们包装成一个跨度，但在那时，它真的太复杂了我的用户无法处理它。（另外：Wordpress甚至没有办法添加引用标签，但那是另一个故事）

你会如何解决这个问题？什么是正确的blockquote的HTML-Markup以及如何添加引号？

Answer 1

这样的事情怎么样？

blockquote p:first-of-type:before {
    content:"\00AB";
    font-size:1.5em;
}

blockquote p:last-of-type:after {
    content:"\00BB";
    font-size:1.5em;}

cite:before {
    content:"\2014"
}

这使用guillemets和mdash来格式化输出。

jsfiddle：http://jsfiddle.net/9LjTB/1/

Answer 2

（编辑：请注意，blockquote和cite这两个元素的定义最近在HTML 5.1中发生了变化;此答案反映了当前 HTML5状态，不是改变的HTML 5.1之一。）

cite元素必须不成为blockquote的一部分（除非您引用引号+归属地）。 blockquote必须只包含引用的内容，而不是引用作者/来源。

HTML5 spec for blockquote：

报价的归属（如果有）必须放在blockquote元素之外。

所以它应该是：

<blockquote>…</blockquote>
<cite>…</cite>

请注意，在HTML5中，cite element仅可用于“作品标题”;因此，您可能希望使用div，可能包含cite：

<blockquote>…</blockquote>
<div class="quote-attribution">Walter White, <cite>Breaking Bad</cite></div>

正确的blockquote标记和CSS样式

2 个答案: