经典HTML面包屑导航栏排版代码分享-html教程-PHP中文网

语义正确的面包屑导航html结构必须用包裹，各级用包含（上级页）或（当前页），禁用或；分隔符须用css伪元素生成，路径解析需清洗空段并显式添加首页。

经典html面包屑导航栏排版代码分享

面包屑导航 HTML 结构怎么写才语义正确

用 <nav></nav> 包裹、<ol></ol> 列出层级、每个 <li> 里放 <a></a> 或 <span></span>（当前页不用链接），这是最被搜索引擎和屏幕阅读器认可的写法。别用 <div> 堆砌，也别用 <code><ul></ul> —— 层级顺序有明确先后，<ol></ol> 才符合语义。

常见错误：把首页链接写成 /index.html 却没加 aria-current="page" 标记当前页；或把整个面包屑塞进 <header></header> 里，其实它属于导航上下文，<nav></nav> 更准确。

<nav aria-label="Breadcrumb"></nav> 必须加 aria-label，否则屏幕阅读器读不出用途
当前页项用 <span aria-current="page">产品列表</span>，不能是 <a></a>
分隔符（如 > 或 /）建议用 CSS 伪元素生成，避免干扰辅助技术

CSS 怎么让面包屑横向排列且不换行

关键不是靠 white-space: nowrap 硬撑，而是用 display: flex + flex-wrap: wrap 组合应对窄屏。直接设 nowrap 在小屏上会触发横向滚动，体验很差。

示例核心样式：

nav[aria-label="Breadcrumb"] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
nav[aria-label="Breadcrumb"] ol {
  padding: 0;
  margin: 0;
  list-style: none;
}
nav[aria-label="Breadcrumb"] li {
  display: flex;
  align-items: center;
}
nav[aria-label="Breadcrumb"] li::after {
  content: "/";
  margin: 0 0.5em;
  color: #999;
}
nav[aria-label="Breadcrumb"] li:last-child::after { content: ""; }

注意：::after 分隔符必须排除最后一个 <li>，否则末尾多一个斜杠；gap 比 margin 更可控，避免首尾外边距问题。