HTML系列导航面包屑应使用语义化标签：用<nav>包裹<ol>（推荐）或<ul>，每级用<li>，链接用<a>，当前页用<span aria-current="page">；禁用<div>堆砌或纯CSS实现，确保屏幕阅读器与SEO可识别层级关系。
HTML里怎么写系列导航面包屑
用 <nav> 包裹 <ol> 或 <ul>，每个层级用 <li>，当前页加 aria-current="page"。别用 <div> 堆，屏幕阅读器和搜索引擎都靠这个结构理解层级关系。
- 必须用语义化标签：
<nav>表明这是导航区域，<ol>更合适（因为有明确顺序），但<ul>也行，只要逻辑清晰 - 链接用
<a>，当前页不用<a>，改用<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"> 是补充，不是替代。Google 虽然能读 JSON-LD，但屏幕阅读器基本不认，而且一旦 JS 失败或被禁用，面包屑就彻底消失。
- JSON-LD 可以加，但前提是 HTML 面包屑已存在且正确
- microdata（如
itemprop="breadcrumb"）容易写错属性嵌套，调试成本高，不如直接用标准语义标签 - 别在
<head>里塞面包屑逻辑——它属于页面主体内容，应该出现在<main>附近
兼容性与性能注意点
<nav>、<ol>、aria-current 全部是原生支持的，IE11 都没问题。唯一要注意的是：别让面包屑生成逻辑拖慢首屏渲染，尤其是服务端没预热、前端又动态拼接的时候。
立即学习“前端免费学习笔记（深入）”；
- 静态站点直接写死 HTML；SSR/SSG 就在模板里展开，别等 JS 加载完再
document.createElement - 如果系列层级深（比如超过 5 级），考虑是否真有必要全展示——用户通常只关心“上一级”和“当前”，其余可折叠
- 别给每个
<li>加独立的data-属性做埋点，用事件委托监听<nav>更轻量
最常被忽略的是：面包屑里的“系列”名必须和实际 URL 路径、页面 <h1> 或 <meta name="description"> 中的表述一致。不一致的话，既影响 SEO 权重传递，也会让用户怀疑自己点错了地方。
