应使用包裹，因其语义明确、兼容读屏器与seo；禁用或，因前者无导航语义、后者无法表达路径先后顺序。
面包屑导航该用什么 HTML 结构
语义化优先，<nav></nav> 包裹 <ol></ol> 是目前最稳妥的选择。搜索引擎和读屏器能明确识别这是导航路径，且有序列表天然表达层级顺序。
别用 <div> 堆砌或 <code><ul></ul> 替代——<ul></ul> 暗示项目无先后，而路径是严格线性的；<div> 则完全丢失语义。<p>示例结构：</p>
<pre class="brush:php;toolbar:false;"><nav aria-label="面包屑导航"><ol>
<li><a href="/>%E9%A6%96%E9%A1%B5</a></li>%0A%20%20%20%20<li><a%20href=">博客</a></li>
<li aria-current="page">HTML路径导引实现</li>
</ol></nav></pre>
<ul>
<li>
<code>aria-label 让屏幕阅读器知道这是“面包屑导航”，避免只读“列表”
aria-current="page" 标记，而非仅靠 CSS 隐藏链接——这对辅助技术是关键信号<a></a>，既是语义准确（当前页无需跳转），也避免误点击刷新如何从 URL 自动推导面包屑层级
纯静态 index.html 没有服务端逻辑，所以不能靠后端解析路径。可行方案只有两种：手写（适合页面少）或前端 JS 解析 window.location.pathname。
JS 方案要注意路径标准化：开头斜杠、结尾是否带 .html、大小写敏感、多级子目录拼写一致性。
- 先用
pathname.replace(/\/+$/, '').split('/').filter(Boolean)清理空段 - 映射数组每一项到可读名称，例如
['blog', '2024', 'breadcrumb']→['博客', '2024年', 'HTML路径导引实现']，需维护一个映射表或约定命名规则 - 避免直接把文件名当标题（如
index.html显示为 “index”），至少 fallback 到预设值
为什么 CSS 里用 display: flex 比 float 更可靠
float 在现代布局中已过时，且在面包屑这种紧凑行内结构里容易导致父容器高度塌陷、换行错位、与相邻元素冲突。
flex 能自然处理分隔符对齐、文字截断、响应式收缩，关键是它不脱离文档流，也不需要额外清除浮动。
- 分隔符用
::before伪元素 +content: "›"，比插入冗余<span></span>更干净 - 设置
flex-wrap: wrap并限制max-width，防止长路径撑破容器 - 移动端可改用
flex-direction: column垂直堆叠，但注意aria-current的视觉反馈仍需保留
静态站点生成时怎么避免每页重复写面包屑
如果你用的是 Jekyll、Hugo 或 VuePress 这类工具，就别在每个 index.html 里硬编码面包屑——维护成本高，且路径变动时极易遗漏。
核心思路是利用模板引擎的层级变量（如 Jekyll 的 page.url 或 Hugo 的 .CurrentSection）动态生成，而不是手动拼接。
- Jekyll 中可用
{% assign crumbs = page.url | split: '/' %}再遍历，配合_data/breadcrumb_labels.yml查表 - Hugo 可直接用
{{ .Breadcrumbs }}（需启用breadcrumbs配置）或自定义partial - 纯 HTML 站点若不用构建工具，建议抽离为
breadcrumbs.js单独加载，通过data-*属性声明路径别名，比如<nav data-crumb-map='{"blog": "博客", "guide": "开发指南"}'></nav>
最易被忽略的一点：路径层级和实际内容层级可能不一致。比如 /blog/2024/04/ 对应的面包屑应该是 “博客 › 2024年 › 四月”，而不是机械拆成四层。人工校验映射表或设计路径规范，比写个通用正则更靠谱。
