首页 > 文章 > 前端

HTML页脚怎么设置footer标签，简单教程

时间：2025-10-07 20:09:44 208浏览收藏

还在为HTML页脚设置发愁吗？本文为您详细讲解如何使用语义化的 `

推荐使用语义化footer标签添加页脚，结构清晰且利于SEO；基本用法为
版权信息
；结合CSS可设置样式与定位，如fixed固定底部或static随内容布局；通常置于body最后，也可用于article等内部区块标注元信息。

HTML页脚怎么添加_HTML页脚footer标签设置

在HTML中添加页脚，推荐使用语义化的 footer 标签。它不仅结构清晰，还对搜索引擎和辅助设备更友好。页脚通常包含版权信息、联系方式、导航链接或备案号等内容。

1. 基本的 footer 标签用法

直接在页面底部插入

标签即可：

<footer>
  <p>© 2024 我的网站. 版权所有。</p>
</footer>

2. 结合 CSS 设置样式

为了让页脚更好看，可以配合CSS设置位置、背景色、文字居中等效果：

<style>
  footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px;
    width: 100%;
    position: fixed;  /* 固定在底部 */
    bottom: 0;
    left: 0;
  }
</style>
<p><footer>
<p>联系我们：contact@example.com</p>
</footer>
</p>

说明：使用 position: fixed 可让页脚始终显示在浏览器底部；若希望页脚随内容自然排列，可改为 position: static 或省略定位属性。

3. 在网页布局中的常见位置

一般将 footer 放在的最后，作为页面结构的收尾：

<body>
  <header>网站头部</header>
  <main>主要内容区域</main>
  <footer>
    <p>京ICP备12345678号</p>
  </footer>
</body>

4. 多个 footer 的使用场景

虽然一个页面通常只有一个主页脚，但 footer 也可用于文章或区块内部：

<article>
  <h2>博客文章标题</h2>
  <p>文章内容...</p>
  <footer>
    <small>发布于 2024年4月1日</small>
  </footer>
</article>

这种用法适合为独立内容块添加元信息。

基本上就这些。合理使用 footer 标签，能让网页结构更清晰，维护也更方便。不复杂但容易忽略细节。

本篇关于《HTML页脚怎么设置footer标签，简单教程》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！

前往漫画官网入口并下载 ➜

html CSS SEO 网页布局 footer标签