首页链接必须用绝对路径，即 href="/" 或 href="/index.html"；spa 中需调用 router.push() 或 navigate() 等路由方法；语义上推荐用 button 实现首页操作，并确保可访问性。
首页链接必须用绝对路径，别信“./index.html”
绝大多数人点不到首页，是因为写了相对路径。比如在 /blog/post.html 里写 href="index.html"，浏览器会去找 /blog/index.html；写 href="../index.html" 看似聪明，但一旦页面嵌套再深一层（比如 /blog/2024/07/post.html），就变成 ../../index.html，漏一个 .. 就 404。
真正稳的写法只有一种：href="/" 或 href="/index.html"。前者依赖服务器默认路由（Nginx/Apache 通常配了 try_files $uri $uri/ /index.html），后者明确指定文件，两者都从域名根开始解析，不受当前 URL 路径影响。
- 如果首页是
https://example.com/，href="/"最简洁 - 如果首页是
https://example.com/home.html，就必须写href="/home.html"，不能省略文件名 - 别用
href="http://example.com/"这种完整 URL——协议和域名硬编码，换 HTTPS 或子域名就失效
SPA 项目里不能只靠 href，得调用路由方法
Vue Router 或 React Router v6+ 管理的单页应用，点击 href="/" 会触发整页刷新，绕过路由守卫、状态保持和懒加载逻辑。这不是 bug，是设计冲突。
正确做法是绑定点击事件，调用框架提供的导航函数：
- Vue 3 + Vue Router 4：
router.push({ path: '/' }) - React + React Router v6：
navigate('/')（需用useNavigate()hook） - 纯 JS SPA（如手动用
history.pushState()）：window.history.pushState({}, '', '/'); window.dispatchEvent(new Event('popstate'))
注意：直接写 onclick="window.location.href='/'" 在 SPA 里等于放弃所有路由能力，慎用。
按钮还是链接？语义和可访问性不能妥协
返回首页是「操作」不是「跳转到某资源」，<a></a> 标签语义是「导航到 URI」，<button></button> 才表示「触发行为」。搜索引擎、屏幕阅读器、键盘 Tab 导航都依赖这个区分。
如果坚持用 <a></a>，必须加 role="button" 和 aria-label="返回首页"；如果用 <button></button>，就得用 JS 绑定跳转逻辑，且确保键盘回车/空格键能触发。
- 推荐写法：
<button onclick="window.location.href='/'">首页</button> - 禁用状态要显式控制：
<button disabled>首页</button>，而不是仅靠 CSS 灰掉 - 别写
<a href="javascript:void(0)" onclick="..."></a>—— 违反可访问性原则，且右键「在新标签打开」失效
为什么 <link rel="home"> 没用
<link rel="home" href="/"> 是 HTML5 的语义标记，只告诉浏览器「这是首页」，**不生成任何可点击元素，也不响应用户交互**。它对 SEO 和某些阅读器有微弱帮助，但和「按钮」完全无关。
常见误解是把它当按钮用，甚至套上 CSS 做成可见样式——没用。浏览器不会给 <link> 渲染内容，也不会转发点击事件。真要按钮，就得用 <a></a> 或 <button></button> 显式写出。
复杂点在于路径和框架的耦合：静态站用 href="/" 一劳永逸；SPA 必须走路由 API；而服务端渲染（SSR）项目可能还要考虑首屏直出时 JS 未加载的降级逻辑——这时候 <a href="/"></a> 反而是最安全的兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
