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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 07:38:54  来源:igfitidea点击:

HTML5 block-quote with author

htmlquote

提问by zanona

Hi I'm seeing a great number of different ways to implementat blockquotein html but it doesn't seem clear in its documentation how should I properly format a blockquotelet'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 blockquotetag? Should it be inside the citeattribute? (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.

这就是 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>

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>