横向及页脚导航均须用包裹并配aria-label，页脚导航需独立、禁混版权信息；推荐display: flex布局，子容器设flex-wrap或媒体查询适配折行，路径高亮须区分精确/前缀匹配。
横向导航条必须用 <nav></nav> 包裹，页脚导航也得是独立的 <nav></nav>
很多人把页脚里的一串链接直接塞进顶部 <nav></nav> 里，或者用 <div class="footer-nav"> 包着——这会导致读屏器跳过、SEO 权重稀释、键盘 Tab 顺序错乱。页脚导航是独立语义区域，必须单独用 <code><nav aria-label="页脚导航"></nav> 包裹。同一页面最多 2–3 个 <nav></nav>：顶部主导航、页脚快捷链接、面包屑（后者需加 aria-label）。别把版权信息、联系方式、备案号混进去，它们属于 <footer></footer>，不是导航。
display: flex 是横向导航布局的唯一稳解，但页脚导航要慎用 flex-wrap: wrap
顶部导航用 display: flex + justify-content: space-around 对齐，没问题；页脚导航如果项数多（比如“隐私政策｜用户协议｜联系我们｜加入我们｜招聘信息”），直接设 flex-wrap: wrap 容易在中等屏幕（768–992px）下折成两行且不对齐。更可靠的做法是：
- 给页脚
<nav></nav>的子<ul></ul>设display: flex，但不设flex-wrap - 用媒体查询在
max-width: 768px时切为flex-direction: column - 若项数极少（≤4），可保留
flex-wrap: wrap，但必须配align-content: center防止上下空隙不均 - 绝对避免在
<nav></nav>上设white-space: nowrap——小屏会强制横向滚动，体验崩坏
当前页高亮逻辑不能共用，顶部和页脚需分别判断路径
HTML 无法自动识别“我在哪”，硬编码 class="active" 到所有页面是维护灾难。更麻烦的是：顶部导航和页脚导航的路径匹配规则往往不同。比如顶部有 /products，页脚可能只列 /contact 和 /about。JS 判断时容易漏掉这些差异：
- 顶部导航常用
window.location.pathname.startsWith('/products')匹配前缀 - 页脚导航更适合精确匹配：
window.location.pathname === '/contact' - 哈希路由（如
#!/projects）或本地开发（file://协议）下，pathname可能为空，必须兜底处理 - 推荐统一用函数封装：
isActive(path, exact = false)，exact参数控制是否严格相等
页脚导航里嵌图标或小 logo 时，vertical-align 和 line-height 容易失准
页脚常混排文字链接 + SVG 图标 + 小 logo，用 display: inline-block 或 float 会导致基线错位、高度塌陷。Flex 是解法，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 别给
<nav></nav>自身设display: flex，应设在它的直接子容器（如<ul></ul>）上 - 图标用
<img alt="HTML横向导航条与页脚导航搭配的做法" >或<svg></svg>时，加vertical-align: middle比依赖align-items: center更兼容老浏览器 - 若用字体图标（如 Font Awesome），确保
font-size和周围文字一致，否则line-height计算会偏移 - IE11 不支持
gap，页脚项间距退回到margin-right，但必须用:last-child { margin-right: 0 }清除末项多余间隙
<nav></nav> 多套一层、路径少判一个斜杠、图标没对齐，都可能让辅助技术用户完全迷失。
