当前页节点不用标签包裹，改用<span>或并添加aria-current="page"，配合CSS禁用指针与高亮样式；错误做法是保留空链接再用CSS隐藏，会破坏语义、可访问性及SEO。
怎么让面包屑里当前页不带链接且高亮显示
直接结论：当前页节点不用 <a> 标签包裹，改用 <span> 或语义化标签（如 <strong>），再配合 CSS 控制样式和禁用鼠标事件。
常见错误是给当前页也写成 <a href="#">首页</a>，然后靠 pointer-events: none 或 href="javascript:void(0)" 挡点击——这既不语义化，又可能被屏幕阅读器误读，还容易触发空链接跳转或焦点问题。
- 正确结构示例：
<nav aria-label="面包屑导航"> <ol> <li><a href="/">首页</a></li> <li><a href="/blog/">博客</a></li> <li><strong aria-current="page">HTML 面包屑</strong></li> </ol> </nav> -
aria-current="page"是关键，它告诉辅助技术“这是当前页”，比纯视觉高亮更可靠 - CSS 中用
ol li:last-child strong或[aria-current="page"]单独控制字体加粗、颜色、禁用指针：[aria-current="page"] { color: #333; font-weight: 600; pointer-events: none; cursor: default; }
为什么不能只靠 CSS 隐藏当前页链接
有人试图保留 <a href="."> 但用 display: none 或 visibility: hidden 隐藏，这是危险的：
- 隐藏后仍会出现在 tab 键焦点流中（除非加
tabindex="-1"），键盘用户可能卡住 -
display: none会让屏幕阅读器完全忽略该节点，失去当前页语义 - SEO 可能误判为无效内链，影响页面关系权重传递
- 移动端长按可能仍触发“打开链接”菜单（尤其在 iOS Safari）
不同框架里怎么动态生成当前页节点
核心逻辑一致：遍历路径数组，最后一项不渲染 <a>，其余都带 href。重点看几个典型场景：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 纯 JS 渲染（如基于
window.location.pathname）：const path = window.location.pathname.split("/").filter(p => p); const crumbs = path.map((p, i) => { const href = "/" + path.slice(0, i + 1).join("/"); return i === path.length - 1 ? `<strong aria-current="page">${decodeURIComponent(p)}</strong>` : `<a href="https://www.php.cn/link/f011764aa39e28db078bf2d44bd5c81e">${decodeURIComponent(p)}</a>`; }); - Vue 模板中用
v-if区分：<li v-for="(crumb, i) in crumbs" :key="i"> <template v-if="i === crumbs.length - 1"> <strong aria-current="page">{{ crumb.text }}</strong> </template> <template v-else> <a :href="crumb.href">{{ crumb.text }}</a> </template> </li> - Next.js / Nuxt 等服务端路由，推荐用
useRouter()获取asPath后解析，避免客户端路径与服务端不一致
容易被忽略的细节：分隔符和可访问性
分隔符（如 /、>、›）别硬编码进 HTML 文本，否则会被屏幕阅读器逐字读出。应该用 aria-hidden="true" 包裹，并设为伪元素：
- 错误写法：
<li><a href="/">首页</a> / <a href="/blog/">博客</a></li> - 正确写法：
ol li:not(:last-child):after { content: "/"; aria-hidden: true; margin: 0 0.5em; } - 整个
<nav>必须有aria-label="面包屑导航"，否则 VoiceOver/NVDA 不会识别其用途 - 如果面包屑过长导致折行，用
white-space: nowrap配合overflow-x: auto更稳妥，而不是强行缩字体
当前页节点的语义和交互状态，远不止“看起来高亮”这么简单。真正难的是在各种路由模式、多语言路径、SSR/CSR 混合场景下，保持 aria-current 始终准确，且不引入多余 DOM 节点或 tabIndex 干扰。
