纯静态html面包屑必须手动编写或构建脚本注入，结构需为，分隔符用::after伪元素，当前页用aria-current="page"标注在上。
纯静态 HTML 页面里加面包屑，不能靠编辑器自动识别路径层级——所有文字、链接、aria-current 都得你手动写或用构建脚本注入，否则显示的“首页 > 产品 > 编辑器”很可能和真实信息架构对不上。
面包屑必须用 <nav></nav> 包裹 <ol></ol>，不是 <div> 或 <code><ul></ul>
搜索引擎和读屏器只认 <nav aria-label="Breadcrumb"></nav> 套 <ol></ol> 的结构。<ol></ol> 表达严格顺序，辅助技术会读出“第1项：首页 → 第2项：产品”，而 <ul></ul> 会被当成无序集合，<div> 则完全丢失语义。常见错误是直接用 <code><div class="breadcrumb"> 堆文字，看起来一样，但键盘用户 Tab 过去时听不到层级，SEO 也弱。
<ul>
<li>正确结构：<code><nav aria-label="Breadcrumb"><ol>
<li>@#@#@#@#@#@#@#@#@#@0</li>
<li>@#@#@#@#@#@#@#@#@#@1</li>
<li aria-current="page">编辑器</li>
</ol></nav>
aria-label 必须写，不能省略或写成 "Navigation"；中文可用 "面包屑导航"，但需确认 VoiceOver 等兼容性href 推荐用绝对路径（以 / 开头），避免子目录下相对路径错乱CSS 分隔符必须用 ::after 伪元素，不能硬写 / 或 > 在 HTML 里
把 / 直接写进 HTML，读屏器会连读成“首页 斜杠 产品 斜杠 编辑器”，干扰导航；而且当前页后不该出现分隔符，HTML 静态写死无法动态控制。伪元素还能支持多语言切换（比如中文用 "›"）、主题色适配（用 currentColor）。
- 推荐写法：
nav ol li:not(:last-child)::after { content: "›"; margin: 0 0.5em; } - 末项要清掉分隔符：
nav ol li:last-child::after { content: ""; } - 别用
a::before加符号——这会让读屏器把斜杠也当可读内容播报 - 若需 RTL 支持，在
<nav></nav>上加dir="ltr"，防止分隔符被镜像
当前页必须用 aria-current="page" 标在 <li> 上，不是加 class="active" 或 aria-disabled="true"
aria-disabled="true" 暗示“本可交互但暂时禁用”，而当前页是语义上无需跳转的状态；只有 aria-current="page" 能被 JAWS/NVDA/VoiceOver 正确识别为“当前页面”，并配合音调变化提示终点。这个属性只能加在当前页对应的 <li> 上，不能加在 <nav></nav> 或 <ol></ol> 根节点，值也必须是 "page"，写成 "true" 或 "current" 都无效。
- 正确：
<li aria-current="page">编辑器</li> - 错误：
<li class="active">编辑器</li>（无辅助技术意义） - 错误：
<li aria-disabled="true">@#@#@#@#@#@#@#@#@#@2</li>（误导用户可操作） - 错误：
<nav aria-current="page">...</nav>（语义错位）
纯静态页别信“自动解析 URL”——手写或构建时注入才可靠
在 index.html 这类纯静态页中，window.location.pathname 只能拿到路径字符串，无法自动知道「博客 → 前端 → HTML 面包屑」这样的语义层级。按 / 切割再拼链接，容易踩坑：多级子目录带参数、i18n 前缀（如 /zh/blog/）被误判、重写后路径不真实。
- 最稳做法：手写每页的面包屑结构，尤其页面少时
- 稍大项目：用构建脚本（如 Node.js 或 Python）在生成 HTML 时注入结构化数据，例如
<script type="application/json" id="breadcrumb-data">[{"text":"首页","href":"/"},{"text":"文档","href":"/docs"},{"text":"面包屑","href":null}]</script> - JS 动态生成时，必须用
document.createElement逐个建<li>和<a></a>，避免innerHTML引发 XSS（比如路径含<script></script>）
真正容易被忽略的是：分隔符的可访问性处理、aria-current 的位置与取值、以及静态页中对“自动推导”的盲目信任——这些地方一错，面包屑就从导航工具退化成纯装饰文本。
