Question

您好我在html中看到了很多不同的方法来实现blockquote但是在文档中似乎并不清楚我应该如何正确格式化blockquote 让我们说< / em>一个着名的引文和作者喜欢：

在胜利中，你应该得到香槟，在失败中，你需要它。

Napoleon Bonaparte

HTML5中的正确格式是什么？

作者是否应在blockquote标记之内或之外？它应该在cite属性中吗？（即使知道文档指定了URI，也不是作者）

Answer 1

我用Google搜索了这个内容，看起来<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

Answer 2

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

例如，使用

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

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

Answer 3

这就是Bootstrap quotes in 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>）。页脚通常包含信息关于该部分的作者，版权数据或相关链接文档。

您也可以考虑使用Structured Data，例如微数据，RDFa和微格式。

Answer 4

更新2018年

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

W3C谈到了cite element：

引用元素表示对广告素材作品的引用。它必须包括作品的标题或作者的名称（人，人员或组织）或URL引用或引用缩写形式按照用于添加的惯例引文元数据。

所以下面的代码很好：

<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>

Answer 5

我的偏好并且验证了......

<!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>

Answer 6

这可以由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>

HTML5阻止引用与作者

6 个答案: