面包屑导航需用语义化HTML结构，标准为<ol>包裹<li>，当前页用aria-current="page"标识；CSS需清除列表默认样式，设<li>为inline或inline-flex，分隔符用::after添加"/"；动态生成时应避免innerHTML拼接，改用createElement确保语义和安全；移动端需支持横向滚动与响应式字号，且须满足WCAG对比度及屏幕阅读器可访问性要求。
面包屑导航需要什么HTML结构
面包屑本质是层级路径的文本链，不是菜单也不是导航栏，所以不用 <nav> 或 <menu>。标准做法是用带语义的 <ol>（有序列表），每级用 <li>，当前页用 <li aria-current="page"> 标明——这是可访问性的硬性要求，不能只靠样式区分。
常见错误是直接用 <div> 套 <span>，这样屏幕阅读器无法识别层级关系，SEO 也弱。正确结构示例：
<ol class="breadcrumb"> <li><a href="/home">首页</a></li> <li><a href="/products">商品</a></li> <li aria-current="page">面包机</li> </ol>
怎么用CSS让面包屑显示成横向链接链
默认 <ol> 是竖排编号列表，必须重置样式。关键点不是“怎么加箭头”，而是先清除默认行为，再统一行内布局。
- 用
list-style: none干掉序号 - 把
<li>设为display: inline或display: inline-flex（后者更利于对齐） - 分隔符不要用图片或伪元素硬塞
">"，推荐用::after加content: "/"，并给最后一个<li>设置margin-right: 0或::after { display: none } - 当前页项（
aria-current="page"）建议去掉<a>标签，避免无效跳转；如果保留，至少加tabindex="-1"和aria-disabled="true"
怎么动态生成面包屑又不搞乱语义
服务端渲染（如 PHP、Node.js 模板）最稳妥：路径解析后直接输出 <ol> 结构。前端 JS 动态生成时容易漏掉 aria-current 或嵌套错误。
立即学习“前端免费学习笔记（深入）”；
常见坑：
- 用
innerHTML拼字符串，忘了转义路径名，导致 XSS（比如路径含<script>） - 把整个面包屑当一个字符串塞进
<div>，丢失列表语义 - 路由切换后没重置
aria-current，旧页面仍被读作“当前”
安全做法：用 document.createElement 逐个建 <li> 和 <a>，最后 append 到 <ol>；当前页项用 textContent 设置，不走 HTML 插入。
移动端和高对比度模式下要注意什么
小屏上长面包屑会折行或溢出，别只靠 white-space: nowrap 强撑。实际要：
- 用
overflow-x: auto+scrollbar-width: none（Firefox）和-webkit-scrollbar隐藏滚动条，让用户左右滑 - 字体大小别设死
px，用rem或em，确保系统字号放大时文字可读 - 分隔符颜色不能太淡，WCAG 要求与背景对比度 ≥ 4.5:1；当前页文字别只靠颜色区分，加粗或下划线更稳妥
真正在意可用性的人，会测试用键盘 Tab 键能否顺序聚焦到每个链接，以及 VoiceOver/NVDA 是否能正确朗读“面包机 当前页面”。这些细节比视觉效果难调得多。
