pathname.split("/") 生成面包屑会翻车，因URL路径不等于逻辑结构，存在空段、后缀、参数干扰等问题；aria-current="page"必须置于<li>内且值为"page"；需用<nav aria-label="Breadcrumb"><ol>包裹，分隔符用CSS伪元素，链接用绝对路径。
纯静态 HTML 页面里，document.location.pathname 解析出的路径段 ≠ 面包屑该显示的层级。直接拿 URL 拆分硬套，大概率导致链接 404、文案错位、语义失效——这不是“导航出问题”，而是把路径当成了结构。
为什么用 pathname.split("/") 生成面包屑会翻车
URL 路径只是地址字符串，不是网站的逻辑结构。比如 /blog/post-123.html 实际对应「首页 → 博客 → 文章详情」，但 split("/") 只能得到 ["", "blog", "post-123.html"]，中间缺了“博客列表”这一层，末尾还带 .html 后缀。
- 空段（开头/结尾的
/）和重复斜杠（如/product//detail/）不清洗，会产出["", "product", "", "detail"] - 查询参数（
?id=123&ref=home）若未提前剥离，可能混进路径段 -
.html、.php等后缀直接当文案显示，用户看到“post-123.html”而不是“如何写好 CSS 变量” - 伪目录（如
/category.html?id=tools）根本无法从路径反推真实分类名
aria-current="page" 必须加在 <li> 上，不是 <a> 或 <span>
这是 WCAG 2.1 AA 级强制要求，不是“锦上添花”。屏幕阅读器靠它判断当前页位置；搜索引擎靠它理解页面深度。加错地方等于没加。
- ✅ 正确：
<li aria-current="page">JavaScript 入门</li> - ❌ 错误：
<li><a href="#" aria-current="page">JavaScript 入门</a></li>（当前页不该可点击） - ❌ 错误：
<li><span aria-current="page">JavaScript 入门</span></li>（<span>无语义，读屏软件不识别为导航项） - 值必须是
"page"，不能是"true"、"current"或"location"
用 <nav aria-label="Breadcrumb"> 包裹 <ol>，别用 <div> 或 <ul>
<nav> 告诉辅助技术“这是导航区块”，aria-label="Breadcrumb" 进一步声明类型，<ol> 表达线性顺序——三者缺一不可。只靠 CSS 样式堆出的“看起来像面包屑”的结构，对 SEO 和无障碍访问基本无效。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误：
<div class="breadcrumb">首页 > 博客 > 文章</div>（无语义、不可访问、SEO 不识别） - ✅ 正确：
<nav aria-label="Breadcrumb"><ol><li><a href="/">首页</a></li><li><a href="/blog">博客</a></li><li aria-current="page">文章标题</li></ol></nav> - 不要用
<ul>：路径有严格先后，<ol>的语义更准确，且部分读屏软件会播报序号（即使 CSS 隐藏） - 分隔符必须用 CSS
::after伪元素实现，别塞>或/在 HTML 里（干扰读屏、RTL 布局错乱、高对比度模式下可能消失）
绝对路径 href="/blog" 比相对路径 href="blog" 稳得多
相对路径依赖当前页面所在目录层级，稍有不慎就跳到 https://site.com/current-page/blog 这种不存在的地址。尤其当页面路径嵌套深（如 /docs/v2/api/http/）时，手写相对路径极易出错。
- ✅ 推荐：
<a href="/blog">博客</a>（从根开始，稳） - ❌ 危险：
<a href="blog">博客</a>（当前页在/docs/下，就会跳去/docs/blog） - ❌ 更危险：
<a href="../blog">博客</a>（多一层嵌套就失效） - 如果站点部署在子路径（如
https://site.com/my-site/），那确实得动态算路径，但这种情况极少；先用绝对路径，出问题再升级逻辑
最常被忽略的其实是维护成本：纯静态页的面包屑全靠手动写死，栏目改名、路径调整、新增分类，所有相关页面都得同步改。没人检查时，aria-current="page" 和 <nav> 很容易漏掉一个，整条链就对残障用户失效了。
