html系列导航面包屑应使用语义化标签：用包裹（推荐）或，每级用，链接用，当前页用；禁用堆砌或纯css实现，确保屏幕阅读器与seo可识别层级关系。
HTML里怎么写系列导航面包屑
用 <nav></nav> 包裹 <ol></ol> 或 <ul></ul>，每个层级用 <li>，当前页加 aria-current="page"。别用 <div> 堆，屏幕阅读器和搜索引擎都靠这个结构理解层级关系。
<ul>
<li>必须用语义化标签：<code><nav></nav> 表明这是导航区域，<ol></ol> 更合适（因为有明确顺序），但 <ul></ul> 也行，只要逻辑清晰
<a></a>，当前页不用 <a></a>，改用 <span></span> 并加上 aria-current="page" 属性<nav><p>首页 > 系列 > 当前文章</p></nav>——这等于没标注，对辅助技术和 SEO 零帮助为什么不能只靠 CSS 实现面包屑样式
CSS 只管长什么样，不管“是什么”。即使你用伪元素画出 > 符号，如果 HTML 结构没层次，aria-current 没设，盲人用户根本不知道自己在哪一级，爬虫也抓不到系列归属关系。
- 视觉上的“>”符号建议用 CSS
::after添加，而不是硬写进 HTML，避免干扰语义 - 如果系列名带参数（比如
/series/react-hooks/），路径要真实可访问，别为了面包屑伪造 URL - 移动端要考虑缩略：可以用
text-overflow: ellipsis，但别把关键层级（如系列名）截掉
常见错误：用 microdata 或 JSON-LD 替代 HTML 结构
microdata 和 <script type="application/ld+json"></script> 是补充，不是替代。Google 虽然能读 JSON-LD，但屏幕阅读器基本不认，而且一旦 JS 失败或被禁用，面包屑就彻底消失。
- JSON-LD 可以加，但前提是 HTML 面包屑已存在且正确
- microdata（如
itemprop="breadcrumb"）容易写错属性嵌套，调试成本高，不如直接用标准语义标签 - 别在
里塞面包屑逻辑——它属于页面主体内容，应该出现在<main></main>附近
兼容性与性能注意点
<nav></nav>、<ol></ol>、aria-current 全部是原生支持的，IE11 都没问题。唯一要注意的是：别让面包屑生成逻辑拖慢首屏渲染，尤其是服务端没预热、前端又动态拼接的时候。
- 静态站点直接写死 HTML；SSR/SSG 就在模板里展开，别等 JS 加载完再
document.createElement - 如果系列层级深（比如超过 5 级），考虑是否真有必要全展示——用户通常只关心“上一级”和“当前”，其余可折叠
- 别给每个
<li>加独立的data-属性做埋点，用事件委托监听<nav></nav>更轻量
最常被忽略的是：面包屑里的“系列”名必须和实际 URL 路径、页面 <h1></h1> 或 <meta name="description"> 中的表述一致。不一致的话，既影响 SEO 权重传递，也会让用户怀疑自己点错了地方。
