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

介绍

在 HTML 中，我们使用 <blockquote> 标签在网页上显示引用内容，并附带作者姓名或来源。该标签用作块级元素，并显示为单独的段落。在本实验中，你将学习如何使用 HTML <blockquote> 标签创建引用块。

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

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

添加 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 标签，你可以轻松地在网页上显示引用内容！

HTML 引用文本块

介绍

添加 HTML 结构

添加 Blockquote 标签

添加 CSS 样式

总结