使用 `<cite>` 标签进行 HTML 引用格式化

HTMLHTMLBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

介绍

本实验将向你介绍 HTML 中的 <cite> 标签,该标签用于以不同于普通文本的格式显示引用。在本实验中,你将学习如何在 HTML 文档中使用 <cite> 标签以及 <blockquote> 标签来引用引文的作者。

注意:你可以在 index.html 中练习编码,并学习如何在 Visual Studio Code 中编写 HTML。请点击右下角的 'Go Live' 以在端口 8080 上运行 Web 服务。然后,你可以刷新 Web 8080 标签以预览网页。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("`HTML`")) -.-> html/BasicStructureGroup(["`Basic Structure`"]) html(("`HTML`")) -.-> html/TextContentandFormattingGroup(["`Text Content and Formatting`"]) html(("`HTML`")) -.-> html/AdvancedElementsGroup(["`Advanced Elements`"]) html/BasicStructureGroup -.-> html/basic_elems("`Basic Elements`") html/TextContentandFormattingGroup -.-> html/text_head("`Text and Headings`") html/TextContentandFormattingGroup -.-> html/quotes("`Quotations`") html/AdvancedElementsGroup -.-> html/inter_elems("`Interactive and Dynamic Elements`") subgraph Lab Skills html/basic_elems -.-> lab-70723{{"`使用 `` 标签进行 HTML 引用格式化`"}} html/text_head -.-> lab-70723{{"`使用 `` 标签进行 HTML 引用格式化`"}} html/quotes -.-> lab-70723{{"`使用 `` 标签进行 HTML 引用格式化`"}} html/inter_elems -.-> lab-70723{{"`使用 `` 标签进行 HTML 引用格式化`"}} end

包含 <cite> 元素

要使用 <cite> 元素,必须将其包含在你的 HTML 文档中。以下是所需的语法:

<cite> ... </cite>

<cite> 元素中添加内容

要显示引用,需要将引用的内容嵌入到 <cite> 标签中。

<cite>The text to be cited</cite>

结合使用 <blockquote><cite> 元素

为了引用引文的作者,我们可以将 <blockquote> 标签与 <cite> 标签结合使用。

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

注意:引用的文本用引号包裹,作者的名字则用 <cite> 标签包裹。

<cite> 标签应用 CSS

默认情况下,<cite> 标签内的文本会以斜体显示。我们还可以为 <cite> 标签应用额外的 CSS 样式,以改变引用的外观。以下是一个示例:

<style>
  cite {
    color: blue;
    font-size: 1.2em;
  }
</style>

<blockquote>
  "The text to be quoted."
  <cite>Author Name</cite>
</blockquote>

总结

在本实验中,我们学习了如何使用 HTML <cite> 标签以不同于普通文本的格式显示引用。我们还学习了如何在 HTML 文档中将 <cite> 标签与 <blockquote> 标签结合使用,以引用引文的作者。最后,我们讨论了如何为 <cite> 标签应用 CSS 样式,以改变引用的外观。

您可能感兴趣的其他 HTML 教程