HTML 脚注标签

本文将讨论 HTML <footer> 标签。

HTML <footer> 标签用于定义文档或章节的脚注。它通常用于章节的末尾（页面底部）。

脚注标签是在 HTML5 中引入的，在此之前，它是使用 "id" 属性指定的，例如：<div id = "footer">。脚注放置在网页底部。它包含典型信息。

HTML <footer> 标签包含作者信息、网站地图、联系信息、版权信息、返回顶部链接、相关文档等信息。

注意：一个文档中可以有一个或多个脚注元素。

如果您想在网页中包含有关作者的信息，例如他们的地址、电子邮件等，所有相关元素都应包含在脚注中。

HTML <footer> 标签支持事件属性和全局属性。

HTML 脚注标签示例

让我们通过示例来正确理解 HTML <footer> 标签。

示例 1

在此演示中，我们将使用 <footer> 标签。我们将在 <footer> 标签中写入作者和邮件信息。

代码

输出

我们可以在下面的输出中看到 <footer> 标签。

示例 2

我们可以注意到，在示例 1 中，脚注不在底部，因为我们使用 CSS 将其置于底部并使其易于识别。在此演示中，我们将为 <footer> 标签应用样式。

代码

输出

我们可以在下面的输出中清楚地看到网页底部的脚注。

示例 3

在此演示中，我们将在 HTML <footer> 标签中添加“关于我们”信息，例如主页、关于、职业、联系我们和访问此处。

代码

输出

这是结果。我们可以在网页上看到带有“关于我们”信息的脚注。

示例 4

我们将看到包含版权信息的 HTML 脚注标签的演示。我们将使用 <script> 标签添加功能，以便我们构建一个按钮，点击该按钮时，会在页面底部显示脚注。

代码

在这里，在结果中，当按钮被按下时，我们可以看到版权信息。

按钮未按下时的结果

按钮按下时的结果

示例 5

我们将在 HTML 脚注标签中构建 3 个部分，分别是“关于我们”部分、“重要链接”部分和“联系信息”部分。

代码

输出

我们可以在下面的输出中清楚地看到脚注中的三个部分。

示例 6

在 HTML5 之前，脚注是使用“id”属性定义的。在此演示中，我们将使用“id”属性创建脚注。

代码

输出

我们可以在下面的输出中看到脚注。

支持的浏览器

• Chrome 浏览器
• 火狐
• Opera
• Internet Explorer
• Safari

结论

本文我们学习了 HTML 脚注标签。<footer> 标签定义了网页的脚注，用于显示联系方式、版权等信息。我们学习了 HTML <footer> 标签的各种示例，以便更好地理解它们。