首页链接应使用/而非index.html，因/是根路径，由服务器自动解析为默认文档，兼容性更好，符合语义与SEO规范；手动写index.html易导致默认页变更失效、路径冗余及SPA请求异常。
面包屑里首页链接该用 / 还是 index.html？
绝大多数情况下，首页链接应该用 /，不是 index.html。因为 / 是根路径，由服务器自动解析为默认文档（如 index.html 或 index.php），兼容性更好，也符合语义和 SEO 规范。
手动写 index.html 会带来几个实际问题：
- 如果服务器配置了其他默认首页（比如
home.html），链接就失效 - URL 多出一层冗余路径，影响可读性和分享体验
- 在单页应用（SPA）或使用前端路由时，
index.html可能触发不必要的文件请求
Home 图标用 <i> 还是 <svg>？
优先用 <svg>，不用 <i> 或字体图标（如 Font Awesome 的 <i class="fa-home">）。前者无依赖、可缩放不失真、支持无障碍属性，后者容易因字体加载失败变成方块或乱码。
一个轻量可靠的 Home SVG 示例：
立即学习“前端免费学习笔记（深入）”；
<svg aria-hidden="true" focusable="false" width="16" height="16" viewBox="0 0 16 16"> <:path d="M8 0L0 8h2v7a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V8h2L8 0z"/> </svg>
关键点：
-
aria-hidden="true"避免屏幕阅读器重复读“home”文字（如果旁边已有“Home”文本） - 不要用
<i>套 SVG —— 语义混乱，且部分 CSS 重置会干扰<i>样式 - 避免内联
style；用 class 控制尺寸/颜色，方便主题切换
面包屑结构用 <nav> + <ol> 还是纯 <div>？
必须用 <nav aria-label="Breadcrumb"> 包裹，内部用 <ol>，不能只用 <div> 或 <span>。这是 WCAG 和搜索引擎明确要求的语义化写法。
正确结构示例：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/" aria-current="page"><svg>...</svg> Home</a></li>
<li><a href="/products/">Products</a></li>
<li><span aria-current="page">Wireless Headphones</span></li>
</ol>
</nav>
注意：
-
aria-current="page"必须加在当前页节点上（可以是<a>或<span>），让辅助技术知道“这是当前位置” - 分隔符（如
/或>）不要用<li>单独包裹，而是用 CSS::before或::after生成，否则破坏列表语义 - 不要把整个面包屑塞进
<nav>以外的容器（比如<header>里再套一层<div>），会削弱导航意图
动态生成面包屑时，怎么避免路径拼错？
后端或 JS 拼接路径时，最常见错误是手动拼字符串导致多斜杠（如 //products/）或漏掉前导 /（如 products/），造成 404 或相对路径跳转异常。
安全做法：
- 后端：用框架内置 URL 构造函数（如 Django 的
reverse()、Express 的res.locals.urlFor()） - 前端 JS：用
new URL(path, window.location.origin)解析并标准化路径，再取.pathname - 永远对用户输入的路径段做
.replace(/^\/+|\/+$/g, '')清理首尾斜杠 - 测试边界场景：空路径、带查询参数的路径（
/search?q=abc）、含中文或编码字符的路径
一个易忽略的细节：服务端渲染（SSR）和客户端路由（如 React Router）的路径来源可能不一致，需统一归一化逻辑，否则首屏和跳转后面包屑不一致。
