纯静态HTML页面的面包屑必须手写或构建时注入，不可依赖URL自动推导；须用<nav aria-label="Breadcrumb">包裹<ol>，各级用<li>，当前页用<li aria-current="page">，链接用绝对路径，分隔符用CSS伪元素生成。
纯静态 HTML 页面（比如 index.html）里加面包屑，不能靠 URL 自动推导出语义层级，必须手写结构或借助构建工具注入数据——否则显示的“首页 > 产品 > 小部件”可能和真实信息架构完全对不上。
面包屑必须用 <nav> + <ol> 写，不能用 <div> 或 <ul>
搜索引擎和读屏器只认 <nav aria-label="Breadcrumb"> 包裹的 <ol> 结构。用 <div class="breadcrumb"> 看起来一样，但语义丢失，键盘用户 Tab 到这儿时听不到“第1项：首页 → 第2项：产品”，也搜不到结构化路径。
-
<ol>表达严格顺序，比<ul>更准确；序号不显示，但辅助技术会读出层级深度 - 每个路径项必须是
<li>，上级页用<a href="/products/">，当前页用<li aria-current="page">HTML 面包屑</li> - 禁用
class="active"或aria-disabled="true"——只有aria-current="page"能被 JAWS/NVDA/VoiceOver 正确识别为“当前页面” - 所有
href必须是绝对路径（以/开头），避免子目录下相对路径错乱，比如./products.html在/blog/下会指向/blog/products.html
aria-current="page" 加在哪？常见错位操作
它只能加在当前页对应的 <li> 标签上，不是加在 <a> 里，更不能加在 <nav> 或 <ol> 根节点。值必须是 "page"，写成 "true"、"current" 或 "location" 都无效。
- 错误：
<a href="#" aria-current="page">HTML 面包屑</a>（当前页不该是链接） - 错误：
<nav aria-current="page"><ol>...</ol></nav>（语义错位） - 正确：
<li aria-current="page">HTML 面包屑</li>（无<a>，不可聚焦） - 如果当前页是分类列表页（比如
/products/），而用户实际在某篇文章里（/products/widget.html），那么/products/仍是可点击的上级，只有文章标题项加aria-current="page"
分隔符别写死在 HTML 里，用 CSS 伪元素生成
把 > 或 / 直接写进 HTML，读屏器会连读成“首页斜杠产品斜杠当前页”，破坏语义。正确做法是用 ::after 伪元素，并设 aria-hidden="true" 隐藏其可访问性。
立即学习“前端免费学习笔记（深入）”；
- 推荐样式：
ol li:not(:last-child)::after { content: "›"; margin: 0 0.5em; }（›是 U+203A，比>更轻量） - 若需支持 RTL（从右向左语言），在
<nav>上加dir="ltr"，防止分隔符被镜像 - 禁用旧式写法：
.breadcrumb-item::before { content: ">" !important; }，它和 Bootstrap 5 的--bs-breadcrumb-divider变量冲突 - 不要用背景图或 SVG 作为分隔符——高对比度模式下可能消失，且增加渲染负担
静态站点要不要 JS 动态生成？
除非你用 Vue Router 或 React Router 这类前端路由库，否则在纯 HTML 文件里跑 JS 解析 window.location.pathname 是反模式：它把 /products/widget/index.html 错切成 “Home > products > widget > index”，既不语义也不可靠。
- 5 个以内固定页面，直接手写最稳，改一个链接全站同步
- 用 Hugo/Jekyll：用
{{ .CurrentSection }}或{{ page.url }}注入预置路径数据 - 用 Vite/Webpack：通过
html-webpack-plugin的templateParameters注入结构对象，比如{ breadcrumb: [{ text: "首页", href: "/" }, { text: "文档", href: "/docs/" }] } - 千万别在
index.html里写document.title.split(" | ")[0]当最后一级文本——标题含 SEO 堆砌词，会污染路径语义
最容易被忽略的是：面包屑反映的是用户心智模型里的层级，不是文件系统路径。把 /blog/2024/05/post.html 拆成 “首页 > 博客 > 2024 > 05 > 文章标题”，等于把归档逻辑当成了导航逻辑——这种错位，JS 再怎么解析也救不回来。
