导航菜单应使用 ul 而非 ol，因导航项为并列关系无顺序依赖；ol 仅适用于有明确先后顺序的场景如步骤、章节、法律条款；面包屑是唯一推荐用 ol 的导航类型。
ol 不适合做常规网页导航层级
语义上就错了。ol 表示“有明确先后顺序”的内容，比如安装步骤、考试排名、时间线。而导航菜单里的「首页」「产品」「关于我们」之间没有天然序号依赖——你不会说“第一步必须点首页，第二步才能点产品”。用 ol 会让屏幕阅读器读成“1. 首页、2. 产品、3. 关于我们”，既误导用户，也干扰 SEO。
真正该用的是 ul
- 导航项本质是并列关系，无顺序要求
- 所有主流 CMS、框架（如 WordPress、Next.js 文档站）生成的导航默认都用
ul -
nav+ul+li是 W3C 推荐的语义组合，无障碍支持最成熟
如果硬要用 ol，只在极少数场景成立：
- 多步骤表单的进度条（
ol+aria-current） - 教程类网站的章节导航（“第1章→第2章→第3章”）
- 法律条文或标准文档的条款索引
ol 嵌套子菜单会出问题
ol 允许嵌套，但浏览器和读屏软件对多层 ol 的编号逻辑处理不一致。例如：
<ol>
<li>首页</li>
<li>产品
<ol>
<li>手机</li>
<li>电脑</li>
</ol>
</li>
</ol>
这段代码可能被解析为：
- 首页
- 产品
1. 手机
2. 电脑
但编号重置行为不可控，start 和 reversed 在嵌套中基本失效，CSS 伪元素干预又容易破坏可访问性。
正确做法是：一级用 ul，二级及以下也用 ul，靠 CSS 控制缩进与展开逻辑。结构干净，JS 绑定 hover/click 也更稳定。
面包屑是唯一推荐用 ol 的导航类型
因为它表达的是「路径层级顺序」：/ → /blog/ → /blog/css-vars/，这个顺序不可逆。所以：
- 必须包在
nav里，并加aria-label="Breadcrumb" - 每个
li里用a，当前页用a[aria-current="page"] - CSS 清掉默认数字：
list-style: none，再用::after加分隔符
最容易被忽略的一点：
别为了“看起来像导航”而强行用 ol。HTML 标签不是样式工具，它的作用是告诉浏览器“这是什么”，而不是“让它长什么样”。结构语义错了，再多 CSS 修饰也补不回可访问性和长期维护成本。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
