面包屑导航必须用包裹而非，因语义表达有序层级路径，屏幕阅读器可读出“第1项、第2项”，而仅表无序集合，丢失位置感知；是辅助技术识别导航区域的必要结构。
面包屑导航为什么必须用 <nav></nav> 包裹 <ol></ol> 而不是 <ul></ul>
因为语义化要求：面包屑是有序的层级路径，<ol></ol> 表达“顺序”和“位置”，<ul></ul> 仅表示无序集合。屏幕阅读器会读出“第1项、第2项…”，而 <ul></ul> 会丢失层级感知。W3C 推荐用 <ol></ol>，且必须嵌套在 <nav aria-label="Breadcrumb"></nav> 中才能被辅助技术正确识别。
<li> 里要不要加 @#@#@#@#@#@#@#@#@#@0<li>@#@#@#@#@#@#@#@#@#@1</li>
<li aria-current="page">技术文章</li>
<li>技术文章</li>（没声明当前页）或 <span>技术文章</span>（不是列表项）aria-current="page" 是关键，它告诉辅助工具“这是当前位置”，比单纯去掉 <a></a> 更可靠分隔符放在哪？CSS 还是 HTML 里加
分隔符（如 / 或 >）必须用 CSS 的 ::after 生成，不能硬写在 HTML 里。否则：① 屏幕阅读器会读出“首页 / 博客 / 技术文章”，干扰导航；② 当前页项后不该出现分隔符，HTML 静态写死无法动态控制；③ 不利于多语言切换（比如中文习惯用“›”而非“/”）。
推荐写法：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
nav[aria-label="Breadcrumb"] ol li:not(:last-child)::after {
content: " › ";
margin: 0 0.5em;
}
响应式折叠时，<li> 的隐藏逻辑怎么写才不伤无障碍
直接 display: none 会彻底移除元素，屏幕阅读器也读不到 —— 折叠后用户可能完全不知道自己在哪一级。正确做法是视觉隐藏但保留语义：
- 用
visibility: hidden+position: absolute或clip-path隐藏中间项，但保持 DOM 结构完整 - 更稳妥的是用 JavaScript 动态生成省略号（如
<li aria-hidden="true">…</li>），同时确保aria-current="page"仍在最后一个可见<li>上 - 永远不要用
aria-hidden="true"包裹整个折叠后的列表 —— 那等于对视障用户说“导航不存在”
最易被忽略的点：分隔符的 CSS 在折叠后是否仍触发渲染、当前页的 aria-current 是否随折叠逻辑动态更新 —— 这些细节一错，整个导航就退化成装饰性元素。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
