html面包屑应使用包裹，用定义顺序，图标优先选unicode、font awesome或内联svg，当前页节点必须加aria-current="page"，禁用img和伪元素插入图标。
HTML 面包屑怎么加图标（不依赖 CSS 背景图）
直接用 <span></span> 或 <i></i> 插入图标字符最稳妥，比如用 Unicode 箭头或 Font Awesome 的 <i class="fa-solid fa-chevron-right"></i>。别试图用 CSS ::before 伪元素硬塞图标——它在屏幕阅读器里不可读，且焦点顺序容易错乱。
常见错误是把图标写成图片：<img src="arrow.svg">，这会导致语义丢失、缩放失真、暗色模式下反色异常。优先选字体图标或 SVG 内联。
- 纯 Unicode 示例：
<span>首页</span><span>›</span><span>分类</span><span>›</span><span>文章</span> - Font Awesome（需引入 CDN）：
<i class="fa-solid fa-house"></i> <i class="fa-solid fa-chevron-right"></i> <i class="fa-solid fa-folder"></i> - 内联 SVG（语义最强）：
<svg aria-hidden="true" width="12" height="12"><path d="M8.5 4.5l-3 3-3-3"></path></svg>
aria-current="page" 必须加在当前页节点上
这是让屏幕阅读器和辅助技术识别“你现在在哪”的唯一可靠方式。漏掉它，面包屑就只是装饰，不是导航组件。
错误写法：<li>首页</li>
<li>分类</li>
<li>文章</li>（全无语义）
正确写法：<li>@#@#@#@#@#@#@#@#@#@0</li>
<li>@#@#@#@#@#@#@#@#@#@1</li>
<li aria-current="page">文章</li>
-
aria-current="page"只能用于当前页的文本节点（不能加在<a></a>上，因为当前页通常不跳转） - 不要用
aria-current="true"—— 这是无效值，必须是page、step等明确语义 - 配合 CSS 可隐藏当前项的链接样式：
[aria-current="page"] { font-weight: bold; pointer-events: none; }
用 <nav></nav> 包裹，aria-label="Breadcrumb" 不可少
没有这个包裹和标签，AT（辅助技术）根本不会把它当导航处理，哪怕结构再标准也没用。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
典型结构应为：
<nav aria-label="Breadcrumb"><ol>
<li><a href="/"><i class="fa-solid fa-house"></i> 首页</a></li>
<li><a href="/category">分类</a></li>
<li aria-current="page">文章</li>
</ol></nav>
-
<ol></ol>比<ul></ul>更合适——面包屑有明确顺序，<ol></ol>原生支持序号语义（即使你 CSS 清除了） - 不要用
<div> + Flex 模拟布局，会丢失列表语义和 AT 遍历逻辑 <li>如果项目用的是 React/Vue，确保 SSR 渲染时 <code>aria-label和aria-current同步存在，CSR 补充容易延迟 - 只对中间层级做柔性收缩（用
flex: 1+min-width: 0+text-overflow），首尾固定； - 服务端或 JS 控制层级深度（如最多显示 3 级），多余路径折叠为
<span title="完整路径">…</span>，并确保title属性可读。 - 绝对不要用
clip-path或mask-image截断——它们对高对比度模式、Windows 放大镜等不友好。
响应式截断：用 text-overflow: ellipsis 要小心
直接对整个面包屑容器设 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 会把图标和文字一起砍掉，尤其是箭头符号被截断后只剩孤零零的“首页…分类”，完全不可读。
真正可用的方案只有两个：
图标和文字耦合紧密，一旦视觉断裂，信息完整性就崩了。宁可换行，也别盲目截断。
