HTML面包屑末级不能加标签，因其语义表示当前页面而非可跳转目标；应使用<span>并添加aria-current="page"确保无障碍与SEO正确性。
HTML面包屑末级为什么不能加<a>标签
因为语义上它代表当前页面位置，不是导航目标；加链接不仅违反ARIA规范，还会让屏幕阅读器误报“可跳转”，实际点击却无反应——用户会困惑“为什么点不动”。搜索引擎也倾向降权重复链接结构。
用<span>替代<a>是最稳妥的写法
末级必须是纯文本容器，不带href，也不应有tabindex或role="link"。常见错误是留着<a href="#">或<a href="javascript:void(0)">，这会让键盘用户卡在无效焦点里。
- ✅ 正确：
<span class="breadcrumb-item active">用户管理</span> - ❌ 错误：
<a href="#" class="breadcrumb-item active">用户管理</a> - ❌ 错误：
<a href="javascript:void(0)" aria-current="page">用户管理</a>
aria-current="page"必须加在末级元素上
这是给辅助技术明确“你现在就在这个页面”的唯一可靠方式。只加class（比如active）没用，CSS样式不传递语义。如果用<span>，就必须手动补上这个属性。
<nav aria-label="面包屑">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/admin">后台首页</a></li>
<li class="breadcrumb-item"><a href="/admin/users">用户列表</a></li>
<li class="breadcrumb-item active" aria-current="page">用户管理</li>
</ol>
</nav>
CSS样式要兼顾<a>和<span>的不同状态
末级用<span>后，不能再依赖a:hover或a:visited来控制样式。所有视觉区分（比如加粗、变色、去掉下划线）得靠class或[aria-current]选择器。
立即学习“前端免费学习笔记（深入）”；
- 用
.breadcrumb-item.active统一控制末级样式 - 避免写
.breadcrumb-item a:hover影响末级——它根本不是<a> - 如果用CSS自定义下划线，记得对
[aria-current="page"]显式取消：[aria-current="page"] { text-decoration: none; }
href，结果鼠标悬停有手型、按空格又没反应——这种割裂感，比没样式更伤体验。 
