合规写法是用包裹，每级用，当前页用标识。示例中Home、Products为可点击链接，Wireless Headphones为当前页文本，所有href须为绝对路径，aria-label和aria-current="page"缺一不可。
直接加 HTML 面包屑就行，不需要框架或 JS 渲染——但必须手动维护层级关系，否则会错位或断链。
面包屑的 HTML 结构怎么写才合规
用 <nav></nav> 包裹 <ol></ol>，每级用 <li>，当前页用 <li aria-current="page"> 标识。搜索引擎和读屏器靠这个识别导航语义。
示例：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/>Home</a></li>
<li><a href="/products/">Products</a></li>
<li aria-current="page">Wireless Headphones</li>
</ol>
</nav>
注意：aria-current="page" 必须加在当前页的 <li> 上，不是 <a></a>；aria-label 不可省略，否则辅助技术无法识别用途。
立即学习“前端免费学习笔记（深入）”；
路径层级怎么从 URL 自动推导（静态站点）
index.html 通常在根目录，但面包屑反映的是「用户理解的页面位置」，不是物理路径。比如 /products/headphones/index.html 应显示为 Home > Products > Headphones，而非 Home > products > headphones。
手动写时按业务逻辑组织，不是机械切分 URL。常见错误：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 把
/blog/2024/04/my-post/拆成 Home > blog > 2024 > 04 > my-post（年月是归档维度，不该暴露为导航层级） - 在
index.html里写 Home > Index（冗余，“首页”本身即顶级，不应再出现“Index”） - 链接指向
./products.html而非/products/，导致子目录下页面路径错乱
建议：所有面包屑链接用绝对路径（以 / 开头），避免相对路径引发的 base href 依赖问题。
CSS 样式要兼容屏幕阅读器和小屏
视觉上常用 / 或 > 分隔，但不能只用纯文本——必须保留语义结构，再用 CSS 隐藏或替换。
推荐做法：
- 用
::before伪元素加分隔符，不破坏 DOM 语义 - 首项前、末项后不加符号（避免
/ Home / Products /这类两端冗余） - 移动端用
flex-wrap+overflow-x: auto防止折行错乱
关键 CSS 片段：
nav ol { list-style: none; padding: 0; margin: 0; display: flex; }
nav li:not(:first-child)::before { content: "/"; margin: 0 0.5em; color: #666; }
nav li:last-child { font-weight: bold; }
为什么不用 JavaScript 自动生成
对纯静态 index.html 来说，JS 生成面包屑反而增加风险：页面加载完成前空白、SEO 抓取不到、JS 报错导致整个导航消失。
除非你有统一构建流程（如用 Eleventy、Hugo 模板自动注入），否则手写更稳。真实痛点是跨页面同步——改了首页的面包屑，忘了改产品页的第二级，结果点进去发现 “Home > Blog > Headphones”。
容易被忽略的一点：<nav></nav> 必须放在 <main></main> 外部或顶部，不能塞进页脚或 aside 里；否则语义层级错乱，部分读屏器会跳过。
