nav标签必须包裹完整导航结构，不能只包单个链接；需用ul/ol包裹多个导航项，配合aria-label或aria-labelledby提供无障碍标识，且不可混入搜索框、登录按钮等非导航元素。
nav标签必须包裹完整导航结构，不能只包链接
很多人以为 <nav></nav> 就是给几个 <a></a> 套个壳，结果语义失效、屏幕阅读器读不出导航意图。它代表的是“一组导航链接”，不是“一个导航链接”。
常见错误现象：<nav><a href="/home">首页</a></nav> —— 单个链接不构成导航集合，会被辅助技术忽略或降级为普通段落。
- 正确用法：用
<nav></nav>包裹整个导航区块，包括<ul></ul>/<ol></ol>或带角色的<div>（但优先用列表） <li>使用场景：页眉主导航、侧边栏目跳转、页脚快速入口、文章内章节锚点列表</li> <li>注意：同一页面可有多个 <code><nav></nav>，比如<nav aria-label="主导航"></nav>和<nav aria-label="相关文章"></nav> - 推荐加
aria-label：<nav aria-label="主导航"></nav> - 如果已有可见标题（如
<h2>网站导航</h2>），用aria-labelledby="id"关联更准确 - 不要用
title属性替代 —— 它不被所有读屏器支持，且仅悬停触发，对键盘/语音用户无效 - 搜索框应放在
<header></header>内独立区域，或用<section role="search"></section> - 登录/注册按钮属于操作入口，更适合放在
<header></header>右侧或用户菜单中，不放进<nav></nav> - 唯一例外：按钮触发页面内锚点跳转（如“回到顶部”），且明确作为导航手段时，可以保留在
<nav></nav>中 - 解决方法：给
<li>加flex: 1或min-width: max-content，避免宽度坍缩 - 兼容性提醒：IE11 对
flex下<li>的处理异常，建议用display: inline-block+text-align保底 - 性能提示：避免在
<nav></nav>上滥用will-change或复杂阴影，首屏导航应保持轻量
aria-label 或 aria-labelledby 是必选项，尤其当 nav 没有可见标题时
没有文字标题的导航栏（比如纯图标菜单、汉堡按钮展开的移动端导航），光靠 <nav></nav> 标签本身无法传达用途。屏幕阅读器会读成“navigation”，但用户不知道这是“主菜单”还是“社交链接”。
错误写法：<nav><ul>...</ul></nav> —— 无障碍检测工具会报“nav missing label”。
立即学习“前端免费学习笔记（深入）”；
nav 里别直接放 form 或 button，除非它们本身就是导航行为
导航栏里塞搜索框、登录按钮很常见，但语义上它们不属于“导航”。混在一起会让 <nav></nav> 的含义模糊，影响 SEO 和辅助功能逻辑。
典型错误：<nav><form>...</form>
<button>登录</button><ul>...</ul></nav>
样式不影响语义，但 display: flex / grid 会导致列表项塌陷
<nav></nav> 本身无默认样式，你用 flex 或 grid 布局完全没问题 —— 但别忘了列表项（<li>）在 flex 容器里默认不占宽，容易导致点击热区消失或响应式错乱。
常见问题：<nav><ul style="display: flex"><li><a>首页</a></li></ul></nav> —— <li> 不设 flex: 1 或 width，所有链接挤在一起，移动端点不准。
语义化不是加个标签就完事，关键在“这组元素是否真的承担导航职责”。很多项目后期才发现 nav 被用在面包屑、分页、甚至广告位上 —— 那已经不是导航，只是长得像而已。
