HTML 引用

HTML 引用和引文元素

HTML 提供了特定的元素来对引用、缩写、地址和引文进行语义化标记（semantically mark up）。

正确使用这些元素可以改善文档结构和可访问性（accessibility），并能为浏览器和搜索引擎提供有用的信息。

短引用： 元素

<q> 元素用于短的内联引用（inline quotation），不需要段落换行。

浏览器通常会在 <q> 元素的内容周围加上引号。你不应该在 <q> 内部的文本手动添加引号。

示例：

<p>As the famous saying goes, <q>Be the change you wish to see in the world.</q></p>

可选的 cite 属性可以用来提供指向引用来源的 URL（尽管浏览器通常不会显示此内容）。

<p>According to the documentation, <q cite="https://example.com/doc#section1">The function returns a promise.</q></p>

块级引用：

元素

<blockquote> 元素用于较长的引用，通常跨越多行或需要单独的块。

浏览器通常会以两侧缩进的方式渲染 <blockquote> 元素。样式应通过 CSS 控制。

示例：

<p>The W3C website states:</p>
<blockquote cite="https://www.w3.org/standards/">
  <p>W3C standards define an Open Web Platform for application development that has the unprecedented potential to enable developers to build rich interactive experiences, powered by vast data stores, that are available on any device.</p>
</blockquote>

cite 属性应包含指向引用来源文档或消息的 URL。

缩写： 元素

<abbr> 元素定义缩写词或首字母缩略词（acronym）。

使用 title 属性提供缩写词或首字母缩略词的完整展开形式。这对于可访问性和清晰度很重要，因为浏览器通常会在鼠标悬停时将 title 文本显示为工具提示（tooltip）。

示例：

<p>We use <abbr title="HyperText Markup Language">HTML</abbr> and <abbr title="Cascading Style Sheets">CSS</abbr> to build web pages.</p>

<p>The <abbr title="World Health Organization">WHO</abbr> provides global health guidelines.</p>

注意：<acronym> 标签在 HTML5 中已废弃（obsolete）；请对缩写词和首字母缩略词都使用 <abbr>。

联系信息：

元素

<address> 元素定义文档或文章作者或所有者的联系信息。它不应用于表示任意的邮政地址。

联系信息可以包括与文档上下文相关的姓名、电子邮件地址、URL、物理地址、电话号码等。

浏览器通常会将 <address> 文本渲染为斜体，并在其前后添加换行符。使用 CSS 进行自定义样式。

文章页脚中的示例：

<footer>
  <address>
    Written by Jane Doe.<br>
    Contact: <a href="mailto:jane.doe@example.com">jane.doe@example.com</a><br>
    Visit us at:<br>
    Example Inc.<br>
    123 Web St, Internet City
  </address>
</footer>

作品标题： 元素

<cite> 元素定义创意作品的标题（例如，书籍、论文、散文、诗歌、乐谱、歌曲、剧本、电影、电视剧、游戏、雕塑、绘画、音乐剧、展览等）。

它不应用于引用人名。

浏览器通常会将 <cite> 元素渲染为斜体。

示例：

<p>My favorite book is <cite>The Hitchhiker's Guide to the Galaxy</cite> by Douglas Adams.</p>
<p>The painting <cite>The Starry Night</cite> by Van Gogh is iconic.</p>

双向覆盖： 元素

<bdo> 元素会覆盖当前的文本方向性（directionality）。它用于特定情况，通常涉及将从右到左书写的语言（如阿拉伯语或希伯来语）与从左到右的文本混合使用。

dir 属性是必需的，它指定方向：ltr（从左到右）或 rtl（从右到左）。

示例：

<!-- Forcing right-to-left rendering -->
<p>This text is LTR. <bdo dir="rtl">This text will render RTL.</bdo></p>

<!-- Example with Arabic -->
<p>English: <bdo dir="rtl">مرحبا</bdo></p>

仅在双向算法的默认行为需要明确纠正时使用 <bdo>。

总结：引用和引文元素

标签	描述
<q>	定义短的内联引用（添加引号）。
<blockquote>	定义较长的块级引用（缩进）。
<abbr>	定义缩写词或首字母缩略词（使用 title 属性提供展开形式）。
<address>	定义文档/文章作者/所有者的联系信息。
<cite>	定义创意作品的标题。
<bdo>	覆盖文本方向性（需要 dir 属性）。