HTML Blockquote 标签：优化网页引用显示

介绍

在 HTML 中，我们使用 <blockquote> 标签在网页上显示引用内容，并附带作者姓名或来源。该标签用作块级元素，并显示为单独的段落。在本实验中，你将学习如何使用 HTML <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/LayoutandSectioningGroup(["Layout and Sectioning"]) 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/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") html/AdvancedElementsGroup -.-> html/inter_elems("Interactive and Dynamic Elements") subgraph Lab Skills html/basic_elems -.-> lab-70714{{"HTML 引用文本块"}} html/text_head -.-> lab-70714{{"HTML 引用文本块"}} html/quotes -.-> lab-70714{{"HTML 引用文本块"}} html/doc_flow -.-> lab-70714{{"HTML 引用文本块"}} html/inter_elems -.-> lab-70714{{"HTML 引用文本块"}} end

添加 HTML 结构

创建一个名为 index.html 的 HTML 文件，并在代码编辑器中打开它。

添加如下所示的 HTML 结构：

<!doctype html>
<html>
  <head>
    <title>HTML Blockquote Tag</title>
  </head>
  <body>
    <h1>HTML Blockquote Tag</h1>

    <!-- 添加 blockquote -->
  </body>
</html>

添加 Blockquote 标签

使用以下语法将 blockquote 标签添加到你的 HTML 代码中：

<blockquote>
  Your quote comes here...
  <cite>- Author Name</cite>
</blockquote>

注意： cite 标签被添加到 blockquote 标签内部，用于提供引用的作者姓名或来源。

添加 CSS 样式

使用以下代码片段为 blockquote 标签添加 CSS 样式：

<style>
  blockquote {
    display: block;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
    font-style: italic;
    color: #555;
    padding: 5px 20px;
    border-left: 5px solid #ccc;
  }
</style>

注意： 此代码为 blockquote 标签设置了一些基本样式。border-left 属性为 blockquote 标签添加了左侧边框。

将你想要在网页上显示的引用内容替换掉 Your quote comes here...。

保存 HTML 文件并在浏览器中打开，查看网页上显示的 blockquote。

总结

在本实验中，你学习了如何使用 <blockquote> 标签在网页上以单独的块显示引用内容。你还了解了可以与该标签一起使用的属性，以及如何使用 CSS 对其进行样式设置。通过 blockquote 标签，你可以轻松地在网页上显示引用内容！