语义正确优先选 ，因其准确表达面包屑从根到当前页的不可互换层级序列；外层用 包裹，内部 中当前页须用 标注。
面包屑导航用
语义正确优先选 适合主导航、侧边栏等跳转集合，放面包屑反而弱化了结构含义。W3C 示例和主流 CMS（如 WordPress 的 Yoast SEO）默认都用
实操建议：
- 外层用
包裹，提供辅助技术可读性 - 内部用
放一个链接或当前页（当前页不用） - 避免套用
aria-current="page"必须加在当前页节点上不加这个属性，视障用户无法区分“这是终点”还是“又一个可点击的中间节点”。很多开发者只写 HTML 结构，漏掉这个 ARIA 标记，导致导航逻辑断裂。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
正确写法示例：
CSS 布局：用
display: flex而非浮动或 inline-block旧式写法用
float: left或display: inline-block加负 margin 拼分隔符，容易塌陷、换行错乱，且响应式下难以控制间距一致性。现代推荐方案：
- 给
display: flex; flex-wrap: wrap; - 每个
设margin-right: 0.75rem;，再用::after伪元素在非末项后加/ - 当前页节点（
aria-current="page"）加font-weight: bold;或color: #333;视觉强化 - 移动端可设
flex-direction: column配合媒体查询，避免过长折行
动态生成时注意 URL 和文本的同步更新
服务端渲染（如 PHP/Node.js）或前端 JS（React/Vue）生成面包屑时，最容易出问题的是路径与文案不一致。例如 URL 是
/blog/react-props，但显示为“技术文章 > React 入门”，中间缺了一级“Props 概念”。关键检查点：
- 每级
的路径必须真实可访问，不能是占位符（如#或javascript:void(0)） - 当前页节点的文本必须与页面
或 - 若使用 JavaScript 动态注入，确保 DOM 更新后触发
aria-live区域通知（尤其单页应用）
层级深、路径含参数或国际化站点要格外小心——比如
/en/products?id=123和/zh/产品?id=123必须各自维护对应语言的面包屑文案，不能靠 URL 截取硬翻译。 - 给
