新手必备HTML搭建网站底部导航
底部导航必须用<nav>而非<footer>，因<nav>是语义化导航标签，专指主导航区域，无论位置；<footer>仅为尾部容器，无导航含义。正确结构为<footer><nav aria-label="底部导航">...</nav></footer>。
底部导航用 <nav> 还是 <footer>？
<nav> 是语义化标签，专指“主导航区域”，不管它在页面顶部、侧边还是底部；<footer> 是页面/区块的“尾部容器”，不自带导航含义。
如果你的底部栏是用户切换页面的核心入口（比如首页、分类、购物车、我的），必须用 <nav> 包裹，否则屏幕阅读器和搜索引擎无法识别这是导航功能。
<footer> 可以作为外层容器放版权信息，但别把导航项直接塞进 <footer> 里再当导航用——这等于告诉辅助技术：“这里只是页脚，别管链接”。
常见错误：
- 把
<nav>放在<footer>里面，又没给<nav>加aria-label="底部导航"，导致语音朗读时只说“页脚”，不说“导航” - 用
<div class="bottom-nav">替代<nav>，失去语义和默认可聚焦能力
正确结构示例：
<footer><nav aria-label="底部导航"><a href="index.html"><i class="icon-home"></i>首页</a><a href="list.html"><i class="icon-list"></i>分类</a></nav><p>© 2026 MySite. All rights reserved.</p></footer>
position: fixed 底部定位为什么有时会遮住内容？
因为 fixed 脱离文档流，浏览器不会为它预留空间，后续内容会从视口顶部开始渲染，直接叠在导航上。
解决方法不是加 margin-bottom，而是给 <body> 或主内容区加 padding-bottom，值至少等于导航高度（比如 60px）。
容易踩的坑：
- 在移动端用
height: 100vh布局，又加fixed底部导航 → 视口高度被撑满，内容被截断 - 使用
bottom: 0但没设left: 0; right: 0→ 导航只占宽度的一部分，左右留白 - 忘记加
z-index，遇到弹窗或轮播图时被盖住
推荐写法：
.bottom-nav {position: fixed;bottom: 0;left: 0;right: 0;height: 60px;z-index: 100;}然后在 <body> 上加 style="padding-bottom: 60px;"，或统一用 CSS 类控制。如何让当前页的底部导航项自动加 active 类？
不能靠 header.html 自己读 window.location 判断——它加载时宿主页面可能还没解析完 URL，且缓存后逻辑失效。
得由宿主页面在 DOM 就绪后主动设置。
关键点：
- 提取路径标识要稳定，比如
location.pathname.split('/')[1] || 'index'，比直接匹配.html后缀更可靠（避免 /products/ 和 /products/index.html 差异） - 不要用
location.href全地址匹配，参数（?ref=abc）、hash（#section）、斜杠结尾（/about/vs/about）都会导致失败 - 如果用路由模式（如 Vue Router / React Router），应监听路由变化，而不是只在页面加载时设一次
简单 JS 示例（放在页面末尾或 DOMContentLoaded 里）：
const currentPage = location.pathname.split('/')[1] || 'index';document.querySelector(`.bottom-nav a[href="/${currentPage}/"]`)?.classList.add('active');
图标文字垂直居中总对不齐？
这不是“看起来差不多”，而是 Flex 布局没对齐基线。常见原因是：
- 文字行高（
line-height）和图标容器高度不一致 - 图标用了
<i>或 SVG，但没设vertical-align: middle或display: flex - 父容器用了
text-align: center，但子元素是 inline，受字母下沉影响
最稳做法：整个导航项用 Flex：
.nav-item {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 100%;}然后确保图标和文字都用块级或弹性子元素，不要依赖 inline 对齐。另外注意：iOS Safari 对 flex: 1 在固定高度容器里的行为偶尔抽风，建议显式写 flex: 0 0 auto + width: 25%（四等分时）更可控。
底部导航看似简单，但语义错、定位错、激活逻辑错、对齐错，任何一个都会在真实设备或辅助工具里暴露问题。尤其 aria-label 和路径提取逻辑，上线前务必用真机+VoiceOver 测试一遍。
