如何使用HTML向网页添加页脚

网站页脚是网页底部的最后一块内容。 页脚可以包含任何类型的 HTML 内容，包括文本、图像和链接。 在本系列的最后一个教程中，我们将使用 <footer> 元素为我们的网页创建以下基本页脚：

首先，在结束 </div> 标记之后和结束 </body> 标记之前粘贴以下代码片段：

. . .
<!--Footer--> 
<footer style="height:auto; background-color:#F7C201;">
  <h1><Made with 🤍 at DigitalOcean</h1>
</footer>
. . .

在此代码段中，<!--Footer--> 是一个注释，浏览器不会读取 而不是 ，用于帮助组织我们的 html 文件以提高可读性。 在这条评论下方，我们添加了一个 <footer> 元素，指定了它的背景颜色，并使用 style 属性设置了它的高度以自动调整到里面的内容。 <footer> 元素是 semantic 元素，因为它的名称告诉开发人员内容的用途。 这对开发人员以及使用屏幕阅读器的网站访问者都有帮助。 否则，该<footer>元素就像一个how-to-use-a-div-the-html-content-division-element

元素 . 我们还在 <h1> 元素中添加了文本内容和表情符号。 随意使用您选择的消息和表情符号更改此文本内容。

保存文件并在浏览器中重新加载以检查结果。 您应该会收到如下信息：

请注意，我们的页脚内容与演示站点中的内容不太一样。 我们的页脚内容有一个白色的下边距，文本有不同的样式。 要删除底部边距并设置文本样式，请将突出显示的属性添加到 <h1> 元素，如下所示：

<h1 style="color:white; padding:40px; margin:0; text-align:center;"Made with 🤍 at DigitalOcean</h1>

保存文件并在浏览器中重新加载。 您现在应该有一个页脚，其样式与本教程顶部的演示站点相同。

在本教程中，您学习了如何创建和设置页脚样式。 您现在可以探索使用本教程系列中的元素向页脚添加不同类型的内容和样式。