语义正确的面包屑导航HTML结构必须用<nav aria-label="Breadcrumb">包裹<ol>，各级用<li>包含（上级页）或<span aria-current="page">（当前页），禁用<div>或<ul>；分隔符须用CSS伪元素生成，路径解析需清洗空段并显式添加首页。
面包屑导航 HTML 结构怎么写才语义正确
用 <nav> 包裹、<ol> 列出层级、每个 <li> 里放 <a> 或 <span>（当前页不用链接），这是最被搜索引擎和屏幕阅读器认可的写法。别用 <div> 堆砌，也别用 <ul> —— 层级顺序有明确先后，<ol> 才符合语义。
常见错误：把首页链接写成 /index.html 却没加 aria-current="page" 标记当前页；或把整个面包屑塞进 <header> 里，其实它属于导航上下文，<nav> 更准确。
-
<nav aria-label="Breadcrumb">必须加aria-label，否则屏幕阅读器读不出用途 - 当前页项用
<span aria-current="page">产品列表</span>，不能是<a> - 分隔符（如
>或/）建议用 CSS 伪元素生成，避免干扰辅助技术
CSS 怎么让面包屑横向排列且不换行
关键不是靠 white-space: nowrap 硬撑，而是用 display: flex + flex-wrap: wrap 组合应对窄屏。直接设 nowrap 在小屏上会触发横向滚动，体验很差。
示例核心样式：
立即学习“前端免费学习笔记（深入）”；
nav[aria-label="Breadcrumb"] {
display: flex;
flex-wrap: wrap;
gap: 0.5em;
}
nav[aria-label="Breadcrumb"] ol {
padding: 0;
margin: 0;
list-style: none;
}
nav[aria-label="Breadcrumb"] li {
display: flex;
align-items: center;
}
nav[aria-label="Breadcrumb"] li::after {
content: "/";
margin: 0 0.5em;
color: #999;
}
nav[aria-label="Breadcrumb"] li:last-child::after { content: ""; }
注意：::after 分隔符必须排除最后一个 <li>，否则末尾多一个斜杠；gap 比 margin 更可控，避免首尾外边距问题。
JavaScript 动态生成面包屑时容易漏掉什么
路径解析错位是最常见问题 —— 比如 URL 是 /category/electronics/smartphones/，但代码把 smartphones 当作当前页、electronics 当作上级，却漏掉根目录 category，导致层级跳级。
- 用
location.pathname.split('/').filter(Boolean)提取路径段，比正则更稳 - 首页必须显式加入数组开头：
['Home', ...segments]，不能依赖后端返回 - 中文路径需
decodeURIComponent()，否则出现%E7%94%B5%E8%84%91这类乱码 - 动态渲染后要手动触发
aria-live区域更新，否则屏幕阅读器不会播报变化
响应式断点下怎么处理长面包屑
超过 3 级就折叠中间项，不是简单隐藏，而是用“…”占位并支持展开。纯 CSS 做不了这个交互，必须 JS 配合。
逻辑要点：
- 先测量容器宽度和所有
<li>宽度总和，差值大于阈值才触发折叠 - 折叠时保留首项（首页）、末项（当前页），中间项替换成
<li><button aria-label="展开路径">…</button></li></li> <li>按钮点击后插入临时 DOM 并重新计算布局，避免闪动</li> <li>移动端优先考虑垂直堆叠而非折叠，用 <code>@media (max-width: 480px)
切换flex-direction: column
真正麻烦的是 SEO 和可访问性平衡：折叠后的内容默认不可聚焦、不可索引，得用 aria-expanded 和 aria-controls 补全状态。
