nav里不必强制套ul，但强烈建议用ul+li结构，因其提供“导航项并列集合”的原生语义，使屏幕阅读器能播报项数、键盘用户可顺序遍历；直接放a标签虽可渲染，但丢失列表语义与可访问性关键信息。
nav 里必须套 ul 吗？
不是必须，但强烈建议。浏览器和辅助技术（比如屏幕阅读器）不强制 nav 内部用 ul，你可以直接写 <nav>@#@#@#@#@#@#@#@#@#@0@#@#@#@#@#@#@#@#@#@1</nav>，它能渲染、能跳转，但会丢失两个关键信息：一是“这是一组导航项”，二是“它们是并列关系”。ul+li 提供了天然的列表语义，AT 能读作“导航菜单，共 4 项”，键盘用户 Tab 时也能按逻辑顺序遍历。
常见错误是硬套结构——比如为了用 ul 把单个按钮或搜索框也塞进 li，结果破坏语义；或者反过来，全用 div 包 a，导致 AT 完全无法识别导航区域。
标准结构怎么写才不出错？
推荐写法就一条：每个导航项用一个 li 包裹一个 a，整个用 ul 套住，nav 包最外层。不需要额外 class 或 id，基础语义已足够。
-
<nav aria-label="主导航"></nav>—— 加aria-label是必须项，否则屏幕阅读器只读“导航”，不知道这是顶部主菜单还是页脚链接 -
<ul></ul>不要设class="nav-list"这类冗余名，除非 CSS 选择器需要；语义优先，命名次要 - 当前页面链接加
aria-current="page"，比如@#@#@#@#@#@#@#@#@#@2，AT 会读作“联系我们，当前页面” - 避免在
nav里混入<button></button>、<input type="search">等操作控件——它们不属于导航，应放在nav外或用role="none"显式排除
多级下拉菜单的 ul 嵌套要点
二级菜单不是靠 JS 动态生成才叫“多级”，HTML 结构本身就得体现层级。父级 li 里直接嵌 ul，子项继续用 li+a，不要用 div 模拟列表。
关键点：
- 子
ul必须是父li的直接子元素，不能跨级或放错位置，否则:hover一移开菜单就消失 - 给父
li加class="dropdown"是可选的，但加了更方便 CSS 控制显隐，比如.dropdown:hover > .dropdown-content - 子菜单
ul应有明确 class（如dropdown-content），避免用ul ul这种泛选择器，容易误伤其他嵌套列表 - 如果第三级存在，结构照旧：在二级
li里再嵌ul，但注意移动端展开逻辑会变复杂，纯 CSS 方案在 iOS Safari 上可能失效
为什么 flex 布局要配 list-style: none？
因为 ul 默认带圆点和缩进，flex 排列时这些样式会干扰对齐。不重置就会出现文字左偏、间距不均、垂直居中失败等问题。
最小必要 CSS 只需三行：
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li { display: inline-flex; } /* 或 display: flex，取决于是否需要内部对齐 */
nav a { text-decoration: none; }
注意：display: inline-block 在 IE10/11 下有空白符问题，flex 更可靠；但若需兼容老 IE，得回退到 float + 清除浮动方案，且必须设 flex-shrink: 0 防止菜单项被压缩。
真正容易被忽略的不是怎么写结构，而是每次加新链接时是否同步更新 aria-current 和 aria-label——这两个属性一旦漏掉，对依赖 AT 的用户就是功能缺失，而不是样式不好看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
