面包屑导航通过语义化HTML和CSS展示页面层级，使用nav、ol及aria标签提升可访问性，结合flex布局与伪元素添加分隔符，并可通过JSON-LD增强SEO。
面包屑导航能帮助用户了解当前页面在网站结构中的位置，并快速返回上级页面。在HTML中实现面包屑导航并不复杂，只需合理使用语义化标签和简单的CSS样式即可。
1. 使用语义化HTML结构
推荐使用nav元素包裹面包屑，提升可访问性。内部用无序列表或链接序列表示层级关系。
基本结构如下：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/products">产品</a></li>
<li><a href="/products/electronics">电子产品</a></li>
<li aria-current="page">手机</li>
</ol>
</nav>
说明：
立即学习“前端免费学习笔记（深入）”；
-
aria-label="Breadcrumb"帮助屏幕阅读器识别导航用途 -
ol表示有序的层级路径 -
aria-current="page"标记当前页面，不可点击
2. 添加基础CSS样式
通过CSS美化面包屑的外观，常用方式是添加分隔符（如斜杠、箭头）。
nav[aria-label="Breadcrumb"] ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 8px;
}
nav[aria-label="Breadcrumb"] li::before {
content: "/";
color: #ccc;
}
nav[aria-label="Breadcrumb"] li:first-child::before {
content: "";
}
说明：
立即学习“前端免费学习笔记（深入）”；
3. 可选：使用内联符号或图标
也可以不用CSS生成分隔符，而是在HTML中直接写入符号或图标。
<nav aria-label="Breadcrumb">
<p>
<a href="/">首页</a> >
<a href="/products">产品</a> >
<strong>手机</strong>
</p>
</nav>
这种方式更简单，适合静态内容。注意当前页建议用strong或span标记，避免可点击状态。
4. 考虑SEO与结构化数据
为了搜索引擎更好地理解面包屑，可以添加JSON-LD结构化数据。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "首页",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "产品",
"item": "https://example.com/products"
},
{
"@type": "ListItem",
"position": 3,
"name": "手机",
"item": "https://example.com/products/phones"
}
]
}
</script>
这有助于在搜索结果中显示清晰的路径，提升点击率。
基本上就这些。一个完整的面包屑导航应兼顾语义、样式和可访问性，既服务用户也利于SEO。实现时根据项目需求选择合适的方式即可。
