使用有序列表（ol）实现面包屑导航，语义清晰且符合层级顺序，结合nav元素与aria-label提升可访问性，通过aria-current标识当前页，CSS去除编号并添加分隔符，JavaScript可动态解析URL生成路径，兼顾SEO与无障碍体验。
面包屑导航（Breadcrumb Navigation）是一种帮助用户了解当前页面在网站层级结构中位置的辅助导航系统。通过语义化的HTML实现，不仅能提升可访问性，还能优化SEO。使用有序列表（）来构建面包屑是符合语义化原则的一种方式，因为它表示的是一个有层级顺序的路径。
面包屑的基本结构与语义化意义
虽然面包屑通常以“分隔符”形式展示（如 首页 > 产品 > 手机），但从语义角度看，它其实是一个有序的层级路径。因此，使用 比无序列表或纯 div 更合适。
HTML5 推荐使用 nav 元素包裹导航类内容，并结合 aria-label 标注用途。
示例代码：
在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。
关键语义化细节说明
- nav 元素：明确这是一个导航区域，屏幕阅读器可识别。
- aria-label="Breadcrumb"：为辅助技术提供上下文。
- aria-current="page"：标识当前页面，替代传统的不可点击文本，提升无障碍体验。
- 使用 ol 而非 ul：路径具有顺序性，属于有序层级，符合 ol 的语义。
基础样式建议（CSS）
默认的有序列表会显示数字编号，可通过CSS去除并添加分隔符。
示例CSS：
动态生成面包屑的思路（JavaScript函数示例）
如果需要根据URL自动生成面包屑，可以用JavaScript解析路径并填充列表。
简单JS函数示例：<script><br> function createBreadcrumb() {<br> const path = window.location.pathname.split('/').filter(p => p);<br> const root = { name: '首页', url: '/' };<br> const breadcrumb = document.querySelector('[aria-label="Breadcrumb"] ol');<br> breadcrumb.innerHTML = `<li><a href="${root.url}">${root.name}`;<br><br> let basePath = '';<br> path.forEach((segment, index) => {<br> basePath += '/' + segment;<br> const name = decodeURIComponent(segment); // 简单处理中文路径<br> const isLast = index === path.length - 1;<br> const item = isLast ?<br> `<li><span aria-current="page">${name}` :<br> `<li><a href="${basePath}">${name}`;<br> breadcrumb.insertAdjacentHTML('beforeend', item);<br> });<br> }<br><br> // 页面加载后生成<br> document.addEventListener('DOMContentLoaded', createBreadcrumb);<br> </script>
基本上就这些。用有序列表实现面包屑，重点在于语义清晰、结构合理、兼顾可访问性。配合CSS美化和JS动态生成，可以灵活适用于各类网站结构。不复杂但容易忽略细节，比如 aria-current 和 nav 的使用，对无障碍支持很关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
