如何在HTML中实现面包屑导航的详细步骤_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

如何在HTML中实现面包屑导航的详细步骤

2025-11-13

浏览次数：次

返回列表

面包屑导航通过语义化HTML和CSS展示页面层级，使用n*、ol及aria标签提升可访问性，结合flex布局与伪元素添加分隔符，并可通过JSON-LD增强SEO。

如何在html中实现面包屑导航的详细步骤

面包屑导航能帮助用户了解当前页面在网站结构中的位置，并快速返回上级页面。在HTML中实现面包屑导航并不复杂，只需合理使用语义化标签和简单的CSS样式即可。

1. 使用语义化HTML结构

推荐使用n*元素包裹面包屑，提升可访问性。内部用无序列表或链接序列表示层级关系。

基本结构如下：

<n* 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>
</n*>

说明：

Kreado AI

Kreado AI是一个多语言AI视频创作平台，只需输入文本或关键词，即可创作真实/虚拟人物的多语言口播视频。为创作者提供AI赋能

182 查看详情 Kreado AI

aria-label="Breadcrumb" 帮助屏幕阅读器识别导航用途
ol 表示有序的层级路径
aria-current="page" 标记当前页面，不可点击

2. 添加基础CSS样式

通过CSS美化面包屑的外观，常用方式是添加分隔符（如斜杠、箭头）。

n*[aria-label="Breadcrumb"] ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 8px;
}

n*[aria-label="Breadcrumb"] li::before {
  content: "/";
  color: #ccc;
}

n*[aria-label="Breadcrumb"] li:first-child::before {
  content: "";
}

说明：

使用flex布局让项目水平排列
::before伪元素添加分隔符
第一个项目前不显示分隔符

3. 可选：使用内联符号或图标

也可以不用CSS生成分隔符，而是在HTML中直接写入符号或图标。

<n* aria-label="Breadcrumb">
  <p>
    <a href="/">首页</a> > 
    <a href="/products">产品</a> > 
    <strong>手机</strong>
  </p>
</n*>

这种方式更简单，适合静态内容。注意当前页建议用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>