返回首页按钮应使用语义化 <a href="/"> 标签，设 aria-label="返回首页"，避免 # 或 index.html，框架中用 <Link> 或 <RouterLink> 并配置 basename。

用 <a> 标签最直接，别绕路

返回首页按钮本质就是个跳转链接，<a> 是唯一必要且足够的方式。不用 JS、不加 class 也能工作，但加一点语义和样式会让它更可靠。

• href 值写成 /（根路径），而不是 index.html 或 ./index.html——前者兼容所有路由结构，后者在子目录或 SPA 下容易 404
• 避免空 href="#"，它只滚动到页首，不是真正返回首页，还可能干扰浏览器历史栈
• 加上 aria-label="返回首页"，对屏幕阅读器友好，也避免纯图标按钮无文字导致的可访问性问题

按钮样式用 button 还是 <a>？选后者

很多人习惯用 <button onclick="location.href='/'">，但这会带来两个隐性问题：一是脱离标准导航语义，二是禁用 JavaScript 时完全失效。

• <a> 天然支持右键“在新标签打开”，<button> 需额外处理才能模拟
• 如果必须用 <button>（比如集成进某个组件库限制），至少补上 role="link" 和 tabindex="0"，并监听 Enter 和 Space 键触发跳转
• CSS 上，<a> 默认有下划线，用 text-decoration: none 去掉即可，无需重置 button 的所有默认样式

React/Vue 项目里怎么写才不踩坑

框架环境下，硬写 <a href="/"> 通常能用，但 SSR 或客户端路由（如 React Router）下会刷新整页，体验断层。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• React 中优先用 <Link to="/">（React Router v6），它内部调用 useNavigate()，不刷新页面
• Vue 3 + Vue Router 4 用 <RouterLink to="/">，不要混用原生 <a>，否则可能跳转失败或丢失路由状态
• 如果首页路径不是 /（比如部署在 /app/ 子路径），确保 basename 配置正确，否则 / 会跳到域名根，而非应用根

图标按钮要不要加文字？要看场景

纯图标（比如?）按钮在移动端或窄屏上容易误点，也缺乏明确意图表达，尤其对新用户或低视力用户。

立即学习“前端免费学习笔记（深入）”；

• 内联文字（如 <a href="/">? 首页</a>）最稳妥，兼顾可读性与简洁性
• 真要隐藏文字只留图标，用 visually-hidden 类（CSS clip-path: inset(50%) 或 position: absolute; width: 1px; height: 1px;），别用 display: none 或 visibility: hidden——它们会彻底移除可访问性支持
• 图标字体（如 Font Awesome）需注意加载失败时的降级，建议搭配 SVG 内联图标，或至少设 aria-hidden="true" 并确保文字内容独立存在

实际中最容易被忽略的是部署路径和路由模式的匹配——本地开发 / 没问题，上线后挂载在子路径下，却没改 basename 或没统一用相对路径前缀，结果点一下就跳到服务器根目录去了。