面包屑导航必须用 包裹、 表示有序路径、 包含各层级，当前页用 标记；禁用 或 堆砌，分隔符用伪元素插入，aria-current="page" 不可省略且值必须准确，路径解析需清洗空段与参数。
面包屑导航该用什么HTML标签写
必须用 <nav></nav> 包裹，内部用 <ol></ol>（有序列表），每个层级用 <li>，当前页用 <li aria-current="page"> 标记。不用 <div> 堆砌，也不该用 <code><ul></ul>——路径有明确先后顺序，<ol></ol> 是语义唯一正确选择。
常见错误是直接写一串 <span></span> 加斜杠，比如 <span>首页</span> / <span>分类</span> / <span>详情</span>。这既无法被屏幕阅读器识别为导航，也丢失层级结构，SEO 和无障碍都掉档。
怎么让面包屑在不同页面自动适配路径
纯静态 HTML 无法自动适配，必须靠构建时生成或运行时拼接。前端框架里（如 React/Vue），通常从路由对象（如 location.pathname 或 useRoute()）拆解路径段，再映射成中文文案；服务端渲染（如 Next.js、Nuxt）则在页面生成阶段注入 breadcrumbs 数据。
关键点在于：路径解析不能只靠 split('/')，要处理空段、重复斜杠、查询参数干扰。例如 /product//detail?id=123 应解析为 ["product", "detail"]，而不是 ["", "product", "", "detail"]。
立即学习“前端免费学习笔记（深入）”；
- 用
pathname.replace(/^\/+|\/+$/g, '').split('/').filter(Boolean)清洗路径 - 首项前手动补“首页”，末项加
aria-current="page" - 跳转链接必须指向真实可访问路径，不能是
#或空href
aria-current="page" 为什么不能省
省了就等于告诉屏幕阅读器“当前页和其他项没区别”，用户无法快速定位自己在哪一层。这不是锦上添花，而是 WCAG 2.1 AA 级强制要求。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
注意：aria-current 的值必须是 "page"（不是 "true" 或 "current"），且只加在当前页的 <li> 上，不要加在 <a></a> 里。如果当前页不可点击（如详情页），<li> 内部就不放 <a></a>，只放文本。
错误示例：<li><a href="#" aria-current="true">详情</a></li> —— 语义错、属性值错、链接无效。
CSS怎么不破坏语义又保持视觉简洁
用 display: flex + gap 控制间距最稳妥，避免浮动或绝对定位。分隔符（如 / 或 >）统一用伪元素 ::before 插入，不写进 HTML，确保结构干净。
别给 <ol></ol> 设 list-style: none 就完事——那会同时抹掉所有辅助技术感知的列表语义。正确做法是保留默认列表样式，再用 counter-reset 和 counter-increment 隐藏数字，或用 list-style-type: none（它只影响标记，不破坏语义）。
- 分隔符用
li:not(:first-child)::before { content: "/"; margin: 0 0.5em; } - 禁用默认序号：用
ol { list-style-type: none; padding-left: 0; } - 当前页文字加粗或变色即可，无需额外 class，靠
[aria-current="page"]选择器控制
真正难的不是写出来，是每次新增页面时，记得同步更新面包屑数据源和路径映射逻辑——漏一处，整个链路就断在那儿了。
