当前位置：文江博客话题详情

HTML5 块引用与作者

发布于 2024-10-27 00:02:29 字数 326 浏览 5 评论 0原文

您好，我看到有很多不同的方法在 html 中实现 blockquote，但在其文档中似乎并不清楚我应该如何正确格式化 blockquote 让我们说一句著名的话并提及其作者，例如：

胜利时，你值得香槟，失败时，你需要它。
拿破仑·波拿巴

HTML5 中的正确格式是什么？

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小巷里的女流氓 2024-11-03 00:02:29

我用谷歌搜索了一下，看起来

和

应该可以完成这项工作：

<figure>
  <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure#quotations">
    Quotes, parts of poems can also be a part of figure.
  </blockquote>
  <figcaption>MDN editors</figcaption>
</figure>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure#quotations< /a>

<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

I googled about this and it looks like <figure> and <figcaption> should do the job:

<figure>
  <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure#quotations">
    Quotes, parts of poems can also be a part of figure.
  </blockquote>
  <figcaption>MDN editors</figcaption>
</figure>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure#quotations

<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

回复收藏 0 原文

茶色山野 2024-11-03 00:02:29

更新 2020

WHATWG 关于的说法块引用元素

引用的出处（如有）必须置于
块引用元素。

WHATWG 关于引用元素的说法

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

人名不是作品的标题 [...] 并且该元素必须
因此不能用于标记人名。

所以下面的 HTML 就可以了：

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

OLD POST 2018

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

W3C 谈到了引用元素：

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>

UPDATE 2020

WHATWG says about the blockquote element

Attribution for the quotation, if any, must be placed outside the
blockquote element.

WHATWG says about the cite element

The cite element represents the title of a work (e.g. a book, a paper,
[...])

A person's name is not the title of a work [...] and the element must
therefore not be used to mark up people's names.

So the following HTML it's fine:

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

OLD POST 2018

HTML 5.3 Editor’s Draft, 9 March 2018

W3C says about the cite element:

The cite element represents a reference to a creative work. It must
include the title of the work or the name of the author (person,
people or organization) or an URL reference, or a reference in
abbreviated form as per the conventions used for the addition of
citation metadata.

So the following HTML it's fine:

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

回复收藏 0 原文

绝不服输 2024-11-03 00:02:29

这就是 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
元素表示其最近的页脚
分段内容或分段根元素（即，其最近的父元素）
<文章>、<旁白>、<导航>、<部分>、<块引用>、<正文>、<详细信息>、 <字段集>、<图>、）。页脚通常包含信息
关于该部分的作者、版权数据或相关链接
文件。

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

This is how Bootstrap does 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>

More on the footer element from MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/footer

The HTML <footer> Element represents a footer for its nearest
sectioning content or sectioning root element (i.e, its nearest parent
<article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>). A footer typically contains information
about the author of the section, copyright data or links to related
documents.

You may also consider using Structured Data, such as microdata, RDFa, and microformats.

回复收藏 0 原文

吹泡泡o 2024-11-03 00:02:29

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

例如，使用

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

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

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

For example, use

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

HTML 5 documentation says, "Small print typically features disclaimers, caveats, legal restrictions, or copyrights. Small print is also sometimes used for attribution, or for satisfying licensing requirements."

回复收藏 0 原文

以可爱出名 2024-11-03 00:02:29

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

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

My preference and it validates...

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

回复收藏 0 原文

生生不灭 2024-11-03 00:02:29

Bootstrap 4

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

This can be covered by Bootstrap 4 <footer class="blockquote-footer"> element:

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

回复收藏 0 原文

~没有更多了~