HTML面包屑不支持自动路径导航，需手动编写href链接并用<ol>结构静态实现；必须包裹在<nav aria-label="Breadcrumb">中，当前页加aria-current="page"，分隔符用CSS伪元素生成。
HTML 面包屑本身不支持自动路径导航，它只负责呈现静态层级结构；所谓“路径导航”是靠你手动写对 href 链接实现的，不是浏览器或 HTML 自带功能。
面包屑的 <nav><ol> 结构必须写死
静态页里没有路由系统，<ol> 的每一项都得你手写或用构建脚本注入，不能靠 JS 解析 URL 自动生成（除非你额外写逻辑）。W3C 明确要求用 <ol> 而非 <ul>，因为路径有严格先后顺序。
-
<nav aria-label="Breadcrumb">是语义前提，缺了屏幕阅读器和搜索引擎就认不出这是面包屑 - 每个路径节点必须是
<li>，当前页必须加aria-current="page"，不能只靠 CSS 样式高亮 - 所有链接的
href必须真实可访问——比如/products/不能写成products/（少斜杠易 404） - 最后一项（当前页）不能带
href，或设为href="#"，否则会触发跳转或页面重载
分隔符必须用 CSS 伪元素，不能写进 HTML
常见错误是直接在 HTML 里写 首页 > 分类 > 文章，这破坏语义、影响 SEO 和无障碍。分隔符必须由 ::before 或 ::after 动态插入。
- 给
<li>设置position: relative，再用::after { content: "›"; margin: 0 0.5em; } - 必须加
li:last-child::after { content: ""; }去掉末尾多余符号 - 避免用背景图、SVG 或 Unicode 字符硬编码——它们无法被屏幕阅读器朗读，也不响应字体缩放
纯静态页无法“感知”当前路径，只能靠人工映射
比如你打开 /blog/2026/april/html-breadcrumb.html，HTML 本身不会知道它属于“博客 → 2026 → 四月”这个链路。你得自己维护一份路径映射表，或在构建时根据文件路径生成对应 <ol> 结构。
立即学习“前端免费学习笔记（深入）”；
- 常见做法：用 Markdown front matter 或 JSON 配置声明
breadcrumb: ["首页", "博客", "2026", "四月"]，再由构建工具（如 Hugo、Jekyll、Vite 插件）注入 HTML - 如果强行用 JS 解析
window.location.pathname拼接，容易出错——比如忽略大小写、URL 编码、多语言路径、或 /blog/index.html 和 /blog/ 的归一化问题 - SEO 友好性取决于
<nav>内部是否每个<a>都指向真实存在的页面，且<ol>层级与实际目录结构一致
最容易被忽略的是 aria-current="page" 和 <nav> 的强制包裹——没这两样，再漂亮的 CSS 也只是视觉装饰，对可访问性和 SEO 几乎无效。
