nav标签仅语义化标识导航区域，真正面包屑需用nav包裹ol+li+a结构，配合aria-label="Breadcrumb"和aria-current="page"确保可访问性与SEO，再通过Schema.org微数据增强结构化理解。
nav 标签本身并不直接定义面包屑导航，它只是语义化地标识“导航区域”；真正的面包屑（Breadcrumb）需结合 ol（有序列表）与 li + a 结构，并用 nav 包裹以明确其导航意图——这是 HTML5 语义化与逻辑连贯性的关键结合点。
用 nav 包裹面包屑，声明导航类型
将面包屑放入 nav 元素，并通过 aria-label="Breadcrumb" 明确用途，帮助屏幕阅读器识别其功能。这不是可有可无的装饰，而是向辅助技术传递“这是路径导航，不是主导航或页脚链接”的关键信号。
示例结构：
<nav aria-label="Breadcrumb"><ol>
<li><a href="/>首页</a></li>
<li><a href="/news/">新闻</a></li>
<li aria-current="page">最新动态</li>
</ol>
</nav>
用 ol + li 构建语义化层级路径
面包屑本质是线性、有先后顺序的路径，ol 比 ul 更准确表达“步骤顺序”，每个 li 代表一个层级节点。当前页用 aria-current="page" 标记，替代仅靠 CSS 隐藏链接的做法，确保语义与行为一致。
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 首项为根路径（如首页），末项为当前页，中间项按实际层级逐级展开
- 所有中间项必须是可点击的 a 标签，指向对应层级的真实 URL
- 当前页项不加链接，但保留 aria-current="page" 属性，维持列表完整性
配合 Schema.org 微数据增强结构化理解
搜索引擎和知识图谱依赖结构化数据理解页面关系。在 nav 外层或内部添加 itemscope itemtype="https://schema.org/BreadcrumbList"，并为每个 li 添加 itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"，能显著提升搜索结果中面包屑的展示概率。
简单补充方式（接上例）：
<nav aria-label="Breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList"><ol>
<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
<a itemprop="item" href="/><span itemprop="name">首页</span></a>
<meta itemprop="position" content="1" />
</li>
...
</ol>
</nav>
避免常见语义误用
- 不要把主导航、侧边栏导航或页脚链接也塞进同一个 nav 里——每个 nav 应有唯一目的，面包屑建议单独使用一个
- 不要用 nav 替代 section 或 div 做样式容器；若仅为视觉分隔而无导航意义，不该用 nav
- 面包屑不等于网站全局导航树，只反映当前页面在内容体系中的具体位置，层级不宜超过 5 级
