首页链接必须写为<a href="/">首页</a>，即绝对路径/，确保跨目录准确跳转根目录，避免index.html、./或空值导致404；需包裹在<nav aria-label="Breadcrumb">内，用<ol>结构，当前页用<li aria-current="page">标记。
面包屑导航里“首页”链接该写成什么路径
直接写 /，不是 index.html，也不是空字符串或 ./。根路径 / 能确保无论当前页面在几级子目录（比如 /blog/post/2024/），点击“首页”都准确回到站点根目录，且不依赖服务器默认文档配置。
常见错误是写成 index.html —— 一旦服务器启用 URL 重写（如去除 .html 后缀）或使用 SPA 路由，这个链接就会 404；写成 ./ 则会相对当前 URL 解析，可能跳转到 /blog/post/2024/ 目录下找首页，而非站点根目录。
- 静态站点、Nginx/Apache 默认配置下，
/指向index.html或index.php，无需额外指定文件名 - 若站点部署在子路径（如
https://example.com/myapp/），则首页链接应为/myapp/，不能硬写/ - Vue/React 等前端路由项目中，如果用了
history模式，仍建议用/，但需确保服务端对所有非 API 路径返回index.html
HTML 面包屑中怎么写“首页”这一项
最简可靠写法：
<nav aria-label="Breadcrumb">
<ol>
<li><a href="/">首页</a></li>
<li><a href="/blog/">博客</a></li>
<li>技术文章</li>
</ol>
</nav>注意三点：
-
<nav>和aria-label是语义化必需，屏幕阅读器靠它识别导航意图 - “首页”必须是
<a>标签，且href值为绝对路径/；当前页项（如“技术文章”）不加链接，也不要用<span>替代<li> - 不要用 JavaScript 动态拼接首页链接——服务端渲染或纯静态 HTML 中，硬编码
/更稳定、更利于 SEO
为什么用 location.origin + '/' 动态生成首页链接很危险
有人想“兼容不同域名”，在 JS 里写 location.origin + '/' 给首页赋值。这看似灵活，实则埋雷：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 页面未完全加载时执行 JS，
location.origin可能取到错误协议（比如 HTTP 页面里误读为 HTTPS） - SEO 爬虫通常不执行 JS，动态生成的链接不会被收录，“首页”失去锚点价值
- 离线缓存或 Service Worker 场景下，JS 可能延迟执行，导致首屏面包屑“首页”暂时不可点
- 开发环境（
http://localhost:3000）和生产环境（https://example.com）混用时，硬编码/更可控；动态拼接反而容易漏改环境变量
Next.js / Nuxt 等框架里面包屑首页怎么处理
框架项目别手动拼 href。用内置路由方法：
立即学习“前端免费学习笔记（深入）”；
- Next.js：写
<Link href="/">首页</Link>，不是<a href="/">—— 这能触发客户端导航，避免整页刷新 - Nuxt 3：用
<NuxtLink to="/">首页</NuxtLink>，同样保持 SPA 体验 - 若页面是静态生成（SSG），框架会在构建时把
/解析为正确路径；不用关心部署子路径问题，框架配置base或app.baseURL即可统一处理 - 切记：即使用了框架路由组件，
href或to的值仍是/，不是空字符串、''或'.'
部署到子路径时，框架配置比代码里硬编码更关键——比如 Next.js 的 basePath 设为 /docs/，所有 <Link href="/"/> 自动变成指向 /docs/，你不需要改每一处“首页”。
