Html HTML5 块引用与作者
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/5460356/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 block-quote with author
提问by zanona
Hi I'm seeing a great number of different ways to implementat blockquote
in html but it doesn't seem clear in its documentation how should I properly format a blockquote
let's sayof a famous quote and metion its author like:
嗨我看到不同的方式是否履行到了大量blockquote
的HTML,但它似乎并没有明确的说明文件中我应该如何正确地格式化blockquote
让我们说一句名言和求佛它的作者一样的:
In victory, you deserve Champagne, in defeat, you need it.
Napoleon Bonaparte
胜利时,你值得香槟,失败时,你需要香槟。
拿破仑·波拿巴
What would the correct format of that be in HTML5?
HTML5 中的正确格式是什么?
Should the author be inside or outside the blockquote
tag?
Should it be inside the cite
attribute? (even knowing the documentation specifies an URI , not author)
作者应该在blockquote
标签内部还是外部?它应该在cite
属性内吗?(即使知道文档指定了 URI ,而不是作者)
采纳答案by Mat D
http://neilpie.co.uk/2011/12/13/html5-quote-attribution/
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."
HTML 5 文档说:“小字体通常具有免责声明、警告、法律限制或版权。小字体有时也用于归属或满足许可要求。”
回答by iGEL
I googled about this and it looks like <figure>
and <figcaption>
should do the job:
我在谷歌上搜索了这个,它看起来<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
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
http://www.w3.org/html/wg/drafts/html/master/grouping-content.html#the-figure-element
回答by skibulk
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
更多关于 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.
HTML
<footer>
元素代表其最近的分节内容或分节根元素(即,其最近的父元素)的页脚<article>, <aside>, <nav>, <section>, <blockquote>, <body>, <details>, <fieldset>, <figure>, <td>
。页脚通常包含有关该部分作者的信息、版权数据或相关文档的链接。
You may also consider using Structured Data, such as microdata, RDFa, and microformats.
您还可以考虑使用结构化数据,例如微数据、RDFa 和微格式。
回答by SandroMarques
UPDATE 2018
2018 年更新
HTML 5.3 Editor's Draft, 9 March 2018
HTML 5.3 编辑草案,2018 年 3 月 9 日
W3C says about the cite element:
W3C 关于cite 元素的说明:
The cite element represents a reference to a creative work. It must include the titleof the work or the nameof 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.
cite 元素代表对创造性作品的引用。它必须包括作品的标题或作者的姓名(人、人或组织)或 URL 引用,或按照用于添加引文元数据的惯例的缩写形式的引用。
So the following code 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>
回答by justinlabenne
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>
回答by Penny Liu
This can be covered by Bootstrap 4 <footer class="blockquote-footer">
element:
这可以由 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>