使用 HTML 创建基本页脚

介绍

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

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

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL html(("HTML")) -.-> html/LayoutandSectioningGroup(["Layout and Sectioning"]) html(("HTML")) -.-> html/BasicStructureGroup(["Basic Structure"]) html(("HTML")) -.-> html/TextContentandFormattingGroup(["Text Content and Formatting"]) html/BasicStructureGroup -.-> html/basic_elems("Basic Elements") html/BasicStructureGroup -.-> html/head_elems("Head Elements") html/TextContentandFormattingGroup -.-> html/lists_desc("Lists and Descriptions") html/LayoutandSectioningGroup -.-> html/layout("Layout Elements") html/LayoutandSectioningGroup -.-> html/nav_links("Navigation and Links") html/LayoutandSectioningGroup -.-> html/doc_flow("Document Flow Understanding") subgraph Lab Skills html/basic_elems -.-> lab-70761{{"HTML 文档/页脚部分"}} html/head_elems -.-> lab-70761{{"HTML 文档/页脚部分"}} html/lists_desc -.-> lab-70761{{"HTML 文档/页脚部分"}} html/layout -.-> lab-70761{{"HTML 文档/页脚部分"}} html/nav_links -.-> lab-70761{{"HTML 文档/页脚部分"}} html/doc_flow -.-> lab-70761{{"HTML 文档/页脚部分"}} end

设置网页的基本结构

创建一个扩展名为 .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>邮箱：[email protected]</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 标签用于定义网页的页脚，可以用来存放与网页相关的各种信息，例如链接和版权数据。我们还学习了如何自定义页脚以包含联系信息和社交媒体链接。