应使用<a>标签加CSS样式实现跳转，因其语义正确、无需JS、SEO友好、无障碍支持完善；<button>+onclick跳转存在JS失效、右键功能缺失、SPA硬刷、SEO弱、屏幕阅读器误读等多重问题。
直接用 <a> 标签加 CSS 样式，比任何 <button> 绑定跳转更可靠、语义正确、无需 JS、SEO 友好。其他方案不是有兼容性风险，就是绕开浏览器原生导航机制，容易在 SPA、SSR 或权限校验场景下出问题。
为什么 <button> + onclick="window.location.href=..." 不推荐用于纯跳转
它看似简单，但实际埋了多个隐性坑：
- 禁用 JavaScript 时完全失效（比如部分企业内网、阅读模式、辅助技术）
- 右键无法“在新标签页打开”“复制链接地址”，破坏用户预期
- SPA 场景下硬刷页面，丢失路由守卫、状态、history stack
- 搜索引擎爬虫不识别这种跳转意图，影响 SEO
- 无障碍工具（如屏幕阅读器）可能将其读作“按钮”，而非“链接”，语义错位
<a> 标签模拟按钮的最小可行写法
这不是“妥协”，而是回归语义本质。跳转就是链接行为，就该用 <a>。
- HTML 只需：
<a href="/settings" class="btn">设置</a> - CSS 样式可复用：
.btn { display: inline-block; padding: 8px 16px; background: #007bff; color: white; text-decoration: none; border-radius: 4px; } - 如需禁用状态，加
aria-disabled="true"和 CSS 控制样式，比操作<button>的disabled属性更可控 - 带参数跳转？直接拼 URL：
<a href="/search?q=html&sort=date">搜索</a>，不用 form 或 JS 构造
必须用 <button> 的场景：如何安全跳转
仅当按钮行为不只是跳转——比如要先校验登录态、弹确认框、上报埋点、或和表单状态联动时，才该用 <button>。
立即学习“前端免费学习笔记（深入）”；
- 必须用
addEventListener，别写内联onclick：便于复用、测试、解耦 - 跳转前务必调用
e.preventDefault()，尤其在<form>内，否则会触发默认提交 - SPA 中禁止用
window.location.href，改用对应框架的路由方法：router.push()（Vue）、useNavigate()（React）、$navigate()（SvelteKit） - SSR 环境下，跳转前加客户端判断：
if (typeof window !== 'undefined') { router.push('/path'); }
动态生成按钮时最容易漏掉的一件事
批量渲染按钮列表时，开发者常只关注 URL 拼接，却忽略目标链接的可访问性与安全性：
- URL 必须经过
encodeURI()处理，尤其是含中文或特殊字符的路径 - 用户可控的跳转地址（如后台配置项）必须白名单校验，防止 open redirect 漏洞
- 不要用
eval()或字符串拼接函数名（如clickTag1）绑定事件，应统一用 data 属性存 URL：<button data-href="/user/123">查看</button>，再在 JS 中读取 - 每个按钮都应有明确的
role="link"或包裹在<a>中，否则屏幕阅读器无法识别其导航意图
真正“无缝”的跳转，不在于动画或加载速度，而在于是否尊重 HTML 语义、用户控制权和运行环境约束。多数所谓“技巧”，其实是把简单问题复杂化了。
