介绍
<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 标签用于定义网页的页脚，可以用来存放与网页相关的各种信息，例如链接和版权数据。我们还学习了如何自定义页脚以包含联系信息和社交媒体链接。
