pathname.split("/") 生成面包屑会翻车，因url路径不等于逻辑结构，存在空段、后缀、参数干扰等问题；aria-current="page"必须置于内且值为"page"；需用包裹，分隔符用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> 上，不是 @#@#@#@#@#@#@#@#@#@0（当前页不该可点击）
<li><span aria-current="page">JavaScript 入门</span></li>（<span></span> 无语义，读屏软件不识别为导航项）"page"，不能是 "true"、"current" 或 "location"
用 <nav aria-label="Breadcrumb"></nav> 包裹 <ol></ol>，别用 <div> 或 <code><ul></ul>
<nav></nav> 告诉辅助技术“这是导航区块”，aria-label="Breadcrumb" 进一步声明类型，<ol></ol> 表达线性顺序——三者缺一不可。只靠 CSS 样式堆出的“看起来像面包屑”的结构，对 SEO 和无障碍访问基本无效。
- ❌ 错误：
<div class="breadcrumb">首页 > 博客 > 文章</div>（无语义、不可访问、SEO 不识别） - ✅ 正确：
<nav aria-label="Breadcrumb"><ol> <li>@#@#@#@#@#@#@#@#@#@1</li> <li>@#@#@#@#@#@#@#@#@#@2</li> <li aria-current="page">文章标题</li> </ol></nav> - 不要用
<ul></ul>：路径有严格先后，<ol></ol>的语义更准确，且部分读屏软件会播报序号（即使 CSS 隐藏） - 分隔符必须用 CSS
::after伪元素实现，别塞>或/在 HTML 里（干扰读屏、RTL 布局错乱、高对比度模式下可能消失）
绝对路径 href="/blog" 比相对路径 href="blog" 稳得多
相对路径依赖当前页面所在目录层级，稍有不慎就跳到 https://site.com/current-page/blog 这种不存在的地址。尤其当页面路径嵌套深（如 /docs/v2/api/http/）时，手写相对路径极易出错。
- ✅ 推荐：
@#@#@#@#@#@#@#@#@#@2（从根开始，稳） - ❌ 危险：
@#@#@#@#@#@#@#@#@#@4（当前页在/docs/下，就会跳去/docs/blog） - ❌ 更危险：
@#@#@#@#@#@#@#@#@#@5（多一层嵌套就失效） - 如果站点部署在子路径（如
https://site.com/my-site/），那确实得动态算路径，但这种情况极少；先用绝对路径，出问题再升级逻辑
最常被忽略的其实是维护成本：纯静态页的面包屑全靠手动写死，栏目改名、路径调整、新增分类，所有相关页面都得同步改。没人检查时，aria-current="page" 和 <nav></nav> 很容易漏掉一个，整条链就对残障用户失效了。
