nav 是语义化容器，不强制 ul+li 结构，但推荐用 ul 包裹 li+a 以保障可访问性；需用 aria-label 或 aria-labelledby 明确标识导航意图；避免将操作类控件（如登录按钮、搜索框）混入 nav。

nav 标签不是必须用 ul + li 才能工作

nav 是语义化容器，本身不带样式、不强制结构。你可以直接放 a 标签，也可以嵌套 ul/li，甚至混用 div 和按钮——只要逻辑上是“主导航”，就符合语义。

常见错误是以为 nav 必须配 ul，结果生硬套用导致 DOM 层级过深；或者反过来，全用 div 导致屏幕阅读器无法识别导航区域。

• 推荐结构：用 ul 包裹导航项，每个 li 放一个 a —— 这是可访问性最佳实践，AT（辅助技术）能自动识别为“列表式导航”
• 避免结构：在 nav 里只放一堆平铺的 a（无列表语义），或用 div 模拟 li（丧失语义和键盘导航支持）
• 注意：一个页面可以有多个 nav，比如顶部主菜单、页脚快捷链接、侧边工具栏，但不要为了“语义正确”而滥用——只有真正承担导航功能的区块才该用

aria-label 或 aria-labelledby 是 screen reader 的关键补丁

仅靠 nav 标签，屏幕阅读器只会读作“navigation”，无法说明这是“主菜单”还是“用户操作区”。必须显式标注意图。

常见错误是留空或写模糊描述，比如 aria-label="menu"，对用户毫无帮助；或误用 title 属性替代 ARIA 标签（title 不被大多数 AT 解析）。

• 优先用 aria-label="主站点导航" —— 简洁、明确、中文场景更自然
• 如果导航上方已有可见标题（如 h2），改用 aria-labelledby="nav-title" 并确保 ID 匹配，复用视觉文本，避免重复维护
• 别用 role="navigation" 冗余声明 —— nav 已隐含该 role，加了反而可能干扰旧版 AT

CSS 布局时别依赖 nav 的默认 display

nav 默认是 display: block，和 div 一样，没有内置 flex/grid 行为。很多人以为它会自动横向排布菜单项，结果发现 a 垂直堆叠，就去查“nav 怎么不横排”。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

根本问题不在 nav，而在内部元素的布局方式。浏览器不会因为用了 nav 就改变子元素的盒模型。

• 横向菜单：对 nav ul 设 display: flex，再控制 li 的 margin 或 gap，而不是指望 nav 自己撑开
• 响应式折叠：用媒体查询控制 nav ul 的 flex-direction 或切换为 grid，而非给 nav 加 class 模拟“mobile-nav”
• 兼容性注意：IE11 不支持 gap，若需支持，用 margin 替代，并为第一个/最后一个项取消外边距

不要把登录按钮、搜索框塞进 nav 当“导航项”

导航的本质是“跳转到其他页面或锚点”，不是“执行操作”。把 button 或表单控件放进 nav，会误导辅助技术，也违背 W3C 对 nav 的定义。

典型错误是把“登录”“搜索”“购物车”图标按钮全丢进同一个 nav，还配上 aria-label="用户操作导航" —— 这不是导航，是功能入口混合体。

• 登录/注册：属于用户账户流程，应放在 header 内独立区域，或用 section + aria-labelledby 明确作用域
• 搜索框：单独用 form 包裹，加 role="search"，比塞进 nav 更准确
• 购物车图标：若只是跳转到购物车页面，可作为导航项；若带 badge 或下拉菜单，则应移出 nav，用 aside 或 section 更合适

语义错位的问题，后期加 ARIA 或 JS 交互时会越来越难调试——比如键盘焦点流混乱、屏幕阅读器播报顺序错乱，根源往往就在这里。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！