HTML 文档/页脚部分

HTMLBeginner
立即练习

介绍

<footer> 标签可用于创建网页/网站的页脚。在本实验中,你将学习如何使用 HTML 的 footer 标签创建一个基本的页脚。

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

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

设置网页的基本结构

创建一个扩展名为 .html 的新文件,并将其命名为 index.html。我们将在此文件中添加 HTML 代码以创建页脚。

在这一步中,我们将创建网页的基本结构。以下是代码:

<!doctype html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <!-- Header will be here -->
    <main>
      <!-- Main content will be here -->
    </main>
    <!-- Footer will be here -->
  </body>
</html>

添加页脚代码

main 标签后添加以下代码以创建一个基本的页脚:

<footer>
  <p>Copyright © 2021 My Webpage. All Rights Reserved.</p>
</footer>

在这个示例中,我们在页脚中添加了一个简单的段落标签和一些文本。你可以自定义页脚以添加链接、作者信息、站点地图和其他内容。

保存 index.html 文件并在你的网页浏览器中打开它。你应该会看到一个带有底部页脚的基本网页。

自定义页脚

在这一步中,我们将通过添加更多信息来自定义页脚。以下是一个示例:

<footer>
  <p>联系我们:</p>
  <ul>
    <li>邮箱:info@example.com</li>
    <li>电话:123-456-7890</li>
  </ul>
  <p>关注我们:</p>
  <ul>
    <li><a href="#">Facebook</a></li>
    <li><a href="#">Twitter</a></li>
    <li><a href="#">Instagram</a></li>
  </ul>
</footer>

在这个示例中,我们添加了两个段落和两个无序列表。第一个列表包含网站的联系信息,第二个列表包含社交媒体资料的链接。

保存 index.html 文件并在你的网页浏览器中打开它。你应该会在网页底部看到自定义的页脚。

总结

在本实验中,我们学习了如何使用 HTML 的 footer 标签创建一个基本的页脚。footer 标签用于定义网页的页脚,可以用来存放与网页相关的各种信息,例如链接和版权数据。我们还学习了如何自定义页脚以包含联系信息和社交媒体链接。