52

嗨，我blockquote在 html 中看到了很多不同的实现方式，但在它的文档中似乎并不清楚我应该如何正确格式化一个blockquote 让我们说一个著名的引言并提到它的作者，比如：

胜利时，你值得香槟，失败时，你需要香槟。

拿破仑·波拿巴

HTML5 中的正确格式是什么？

作者应该在标签内还是blockquote标签外？它应该在cite属性内吗？（即使知道文档指定了 URI，而不是作者）

4

6 回答 6

56

我对此进行了谷歌搜索，它看起来<figure>应该<figcaption>可以完成这项工作：

<figure>
  <blockquote cite="https://developer.mozilla.org/samples/html/figure.html">
    Quotes, parts of poems can also be a part of figure.
  </blockquote>
  <figcaption>MDN editors</figcaption>
</figure>

https://developer.mozilla.org/samples/html/figure.html

<figure>
  <blockquote cite="http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element">
    The figure element represents some flow content, optionally with a caption,
    that is self-contained and is typically referenced as a single unit from the
    main flow of the document.
  </blockquote>
  <figcaption>asdf</figcaption>
</figure>

http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element

于 2012-05-13T15:27:51.563 回答
21

2020 年更新

WHATWG 关于blockquote 元素的说法

引用的属性（如果有）必须放在 blockquote 元素之外。

WHATWG 对cite 元素的评价

cite 元素代表作品的标题（例如一本书、一篇论文、[...]）

人名不是作品的标题[...]，因此不得使用该元素来标记人名。

所以下面的 HTML 没问题：

<blockquote>
 <p>In victory, you deserve Champagne, in defeat, you need it.</p>
</blockquote>
<p>— Napoleon Bonaparte</p>

旧帖子 2018

HTML 5.3 编辑草稿，2018 年 3 月 9 日

W3C 谈到cite 元素：

cite 元素代表对创意作品的引用。它必须包括作品的标题或作者的姓名（个人、人员或组织）或 URL 参考，或根据用于添加引文元数据的约定的缩写形式的参考。

所以下面的 HTML 没问题：

<blockquote>
    Those who pass by us, do not go alone, and do not leave us alone; 
    they leave a bit of themselves, and take a little of us.
    <cite>Antoine de Saint-Exupéry</cite>
</blockquote>
于 2018-03-10T18:24:03.303 回答
18

这就是 Bootstrap在 v3.3 中引用的方式。

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

更多来自 MDN 的页脚元素：https ://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

HTML<footer>元素代表其最近的分段内容或分段根元素（即其最近的父元素 <article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>）的页脚。页脚通常包含有关该部分作者的信息、版权数据或相关文档的链接。

您也可以考虑使用结构化数据，例如微数据、RDFa 和微格式。

于 2014-12-04T15:01:17.230 回答
16

http://neilpie.co.uk/2011/12/13/html5-quote-attribution/

例如，使用

<small class="author">Napoleon Bonaparte<small>

HTML 5 文档说，“小字体通常包含免责声明、警告、法律限制或版权。小字体有时也用于署名或满足许可要求。”

于 2012-04-20T00:47:03.560 回答
0

我的偏好，它验证...

<!doctype html>
<html lang="en">
<head><title>Blockquote Test</title></head>
<body>

<div style="width:300px;border:1px solid #cecece; padding:10px;">

<blockquote cite="URL">
In victory, you deserve Champagne, in defeat, you need it.
</blockquote>
<div class="credit" style="text-align:right;">
<cite><a href="URL">Napoleon Bonaparte</a></cite>
</div>

</div>

</body>
</html>
于 2011-03-28T21:29:48.937 回答
0

这可以由 Bootstrap 4<footer class="blockquote-footer">元素覆盖：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

<blockquote class="blockquote">
  <p>In the digital age, knowledge is our lifeblood. And documents are the DNA of knowledge.</p>
  <footer class="blockquote-footer">Rick Thoman, CEO, <cite title="Xerox Corporation">Xerox</cite></footer>
</blockquote>

于 2019-01-25T03:32:11.377 回答