应使用 nav 包裹 ul，nav 提供语义标识，ul+li 构建可访问结构；避免裸 nav 或 div 拼接，须设 aria-label、aria-current="page"，推荐 flex 布局并确保点击区域≥44×44px。
导航条用 ul 还是 nav？
直接用 nav 包裹 ul 最稳妥，语义清晰且兼容性好。nav 是语义容器，ul 负责结构，两者不冲突。别只用一堆 span 或 div 拼，那样既难维护又不利于屏幕阅读器识别。
常见错误：把 a 直接塞进 nav 里不套列表，结果样式对齐困难、键盘导航跳过、SEO 权重分散。
-
nav是语义标签，必须保留；ul是默认最合理的结构选择 - 每个菜单项用
li包裹a，确保可聚焦、可 tab 导航 - 避免给
a设display: block后又手动调宽高——横向布局靠flex或inline-block更可靠
横向排列用 display: flex 还是 inline-block？
优先选 display: flex，代码少、对齐准、响应式友好。老项目要兼容 IE10 及以下才考虑 inline-block，但得额外处理换行和空白符问题。
典型坑：flex 下忘了设 flex-direction: row（虽是默认值，但显式写出更防误改）；或给 li 设了 width 导致缩放时溢出容器。
-
nav ul设display: flex，list-style: none，margin: 0，padding: 0 -
nav li设margin-right: 1rem（最后一项用:last-child清掉） -
nav a设text-decoration: none、padding: 0.5rem 1rem，别设固定宽——让文字撑开更灵活
点击区域太小？a 的 padding 和 line-height 怎么配？
移动端点不准、桌面端 hover 不灵敏，基本都是 a 内部尺寸没撑起来。别只调 font-size，关键在 padding + line-height 组合。
错误做法：用 height 强制定高，导致文字垂直居中失效或换行错位；或只加 padding-top/bottom 忘了左右，手指滑动时容易误触相邻项。
-
nav a至少设padding: 0.75rem 1.25rem，保证最小点击区域 ≥ 44×44px -
line-height设为1.5或与padding垂直总和一致，避免文字上下“漂” - 如果要用图标，
vertical-align: middle比flex更轻量，除非整个导航要复杂对齐
怎么让当前页高亮？aria-current="page" 有用吗？
有用，而且比纯 CSS 类更可靠。它不只是给视觉提示，更是告诉辅助技术“这是当前页面”，比 class="active" 语义强得多。
常被忽略的是：很多人只加了 class，却没同步加 aria-current，或者加在 li 上而非 a 上——标准要求必须加在激活的链接元素本身。
- 当前页对应
a标签上加aria-current="page"，同时保留class="current"供 CSS 使用 - CSS 写
nav a[aria-current="page"]或nav a.current都行，前者优先级更高、更语义化 - 别用
:focus模拟高亮——那是焦点状态，不是当前页状态，两者逻辑不同
aria-current 的位置和 flex 下 li 的 white-space: nowrap——长文字菜单在窄屏会折行破坏横向布局，加这一句就能稳住。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
