footer是语义化页脚容器，标识内容归属而非强制沉底；可多处使用但须有明确归属；联系信息需用address包裹；禁作通用容器、导航或布局工具。

footer 标签不是用来“把内容钉在页面最底下”的，它只负责说清楚：“这部分信息，属于谁的结尾”。

footer 是语义容器，不是 CSS 定位指令

写 <footer>© 2026</footer> 后它没沉底？不是你代码错了，是它本来就不该自动沉底。HTML 规范里没有“footer 必须渲染在视口底部”这条规则。

它的位置完全由 DOM 位置 + 父元素的 CSS 决定：

• 如果父容器（比如 ）没设 min-height: 100vh，也没用 Flex/Grid，footer 就老老实实流式排布，紧贴前面内容
• 用 position: fixed 或 absolute 强行固定，容易遮挡内容、破坏滚动，且移动端软键盘弹出时 vh 失准，footer 可能被截断
• 真正稳的方案是：给包裹 <header></header>、<main></main>、<footer></footer> 的容器（通常是 或外层 <div>）设 <code>display: flex + flex-direction: column + min-height: 100vh，再给 <main></main> 加 flex: 1

  一个页面可以有多个 footer，但每个都必须有明确归属

  别再以为整个页面只能有一个 <footer></footer>。HTML5 允许多个，而且鼓励按语义区块拆分：

  • <footer>…</footer>：网站级页脚，放版权、备案号、全局链接
  • @#@#@#@#@#@#@#@#@#@0：模块级页脚，补充操作入口
  • 禁止行为：<section><footer></footer><footer></footer></section>（同一区块两个 footer）、<footer><nav>…</nav></footer>（导航不属于页脚语义）

  footer 里的联系信息必须用 <address></address> 包裹

  HTML5 明确要求：如果 <footer></footer> 包含联系信息（邮箱、电话、地址），得用 <address></address> 标签，不能直接用 <p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx"><img src="https://img.php.cn/upload/skill/000/000/081/179051045119472.jpg" alt="html-to-pptx" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="overflowclass">html-to-pptx</a> <p class="overflowclass">将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。</p> </div> <a rel="nofollow" href="/xiazai/skill5493" title="html-to-pptx" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 或 <div>： <pre class="brush:php;toolbar:false;">&lt;footer&gt;&lt;address&gt;contact@example.com | +86 123-4567-89&lt;/address&gt; &lt;p&gt;© 2026 All rights reserved.&lt;/p&gt; &lt;/footer&gt;</pre> <p>原因很实际：</p> <ul> <li> <code><address></address> 是专为联系信息设计的语义标签，读屏软件会特殊处理（比如朗读时加停顿）

• 版权文字、友情链接、使用条款这些，就该用 <p></p> 或 <ul></ul>，别硬塞进 <address></address>
• IE8 及更早版本不支持 <footer></footer>，需引入 html5shiv；但 <address></address> 在 HTML4 就存在，兼容性更好

footer 不该干的三件事

最容易被忽略的，其实是“不该做什么”：

• 别把它当通用容器：广告位、相关推荐、语言切换栏，若不属于当前内容区块的结尾信息，就别塞进去
• 别用它替代 <nav></nav>：主导航、主搜索框、站点地图链接，这些是导航职责，该归 <nav></nav> 管
• 别靠它撑高度或实现视觉布局：想让页面内容区占满剩余空间？控制 <main></main> 的 flex 属性，而不是给 <footer></footer> 加 margin-top 或 height

真正难的，是每次写 <footer></footer> 前问一句：删掉它，上面那段内容是否还完整独立？如果答案是否定的，那它大概率放对了——语义归属比视觉位置重要得多。