面包屑导航不必强制用 nav 包裹，但主内容上方承担导航功能时强烈建议使用；ul 中非末尾项必须为 a 链接，末尾项用 aria-current="page" 标识；分隔符应由 CSS 伪元素生成；移动端不应自动隐藏中间层级。
面包屑导航必须用 nav 包裹吗？
不是必须，但强烈建议。语义上 nav 表明这是页面主要导航区域，对屏幕阅读器和 SEO 更友好；但若把它放在页脚或次要位置，反而可能干扰语义结构。实际项目中，只要面包屑出现在主内容上方且承担导航功能，就该用 nav。
ul 里能不能只放 li，不加 a？
可以，但要分情况：当前页（末尾项）通常不用链接，用纯文本更合理；前面所有层级都应是可点击的 a。如果全用 li 不加链接，会丢失导航能力，也违反 ARIA 推荐的 aria-current="page" 使用前提。
常见错误是把整个 ul 当成装饰性列表，结果搜索引擎无法识别路径层级。正确写法示例：
<nav aria-label="Breadcrumb">
<ul>
<li><a href="/">Home</a></li>
<li><a href="/products">Products</a></li>
<li aria-current="page">Wireless Headphones</li>
</ul>
</nav>
分隔符用 CSS 生成还是 HTML 写死？
CSS 生成更灵活、语义干净。用 ::after 伪元素加斜杠或箭头，避免在 HTML 中混入装饰性字符（比如 >），也方便后期统一换风格。
立即学习“前端免费学习笔记（深入）”；
关键点：
- 必须给末尾
li设置aria-current="page"，否则屏幕阅读器读不出“当前位置” - 用
display: flex+gap比浮动或 inline-block 更稳，尤其响应式时 - 别用
<span>或<div>替代li—— 会破坏列表语义和辅助技术遍历逻辑
移动端小屏下要不要隐藏中间层级？
不要自动隐藏，除非业务明确要求“只显示首尾两级”。用户可能需要回溯中间某一层，盲目折叠反而增加操作成本。更稳妥的做法是用 text-overflow: ellipsis 配合固定宽度，或让整个 ul 横向滚动（overflow-x: auto + white-space: nowrap）。
容易被忽略的是：横向滚动容器必须加 scrollbar-width: none（Firefox）和 -webkit-scrollbar 隐藏样式，否则丑且占空间；同时确保触控可拖拽，别忘了 touch-action: pan-x。
