应使用<a>实现页面跳转，因其语义正确、可访问性好；表单内操作则用<button>，需显式声明type属性；避免href="#"等无效链接，JS行为优先选用<button type="button">。
跳转页面时，必须用 <a>，别用 <button> 加 JavaScript
页面间导航是 <a> 的唯一职责，浏览器和辅助技术（如屏幕阅读器）都依赖这个语义做正确处理。用 <button> + onclick="location.href='...'" 看似可行，但会破坏可访问性：键盘用户按 Enter 时可能触发两次（一次按钮默认行为，一次 JS 跳转），且无法右键“在新标签页打开”。
常见错误现象：
- 点击后页面刷新但没跳转（JS 执行失败或被阻止）
- SEO 工具无法抓取该链接目标
- 屏幕阅读器读作“按钮”，而非“链接到某某页面”
正确做法就是直接写：<a href="/profile">个人资料</a>，再用 CSS 把它变成按钮样式——这不是“妥协”，而是语义优先的必然选择。
表单内触发操作时，<button> 是默认首选
只要动作发生在当前页面内（提交、重置、展开折叠、弹窗、调 API），就该用 <button>。它天然支持 type 属性控制行为，且内容可嵌套 HTML（比如图标+文字），而 <input type="button"> 只能靠 value 显示纯文本，灵活性差。
立即学习“前端免费学习笔记（深入）”；
关键细节：
- 务必显式声明
type：不写type的<button>在表单里默认是submit，容易误触提交 - 避免把
<button>嵌套在<a>里——这是无效 HTML，部分浏览器会忽略href，只执行按钮逻辑 - 如果只是执行 JS，用
<button type="button">；如果是提交表单，用<button type="submit">
href 值为空或 # 时，几乎总是错的
写 <a href="#">菜单</a> 或 <a href="javascript:void(0)"> 是早期 hack 写法，现在有更干净的替代方案。
问题在于：
- 点击后 URL 地址栏出现
#，影响浏览器历史记录和前进/后退体验 SPA 应用中可能触发无意义路由跳转
- 空
href会让链接失去焦点能力，键盘用户无法用 Tab 键选中
真正需要 JS 控制的行为，请换用 <button type="button">。如果必须保留 <a> 结构（比如 CMS 输出限制），至少加 role="button" 和 tabindex="0"，并在 JS 中调用 event.preventDefault()。
移动端和键盘交互对两者的要求完全不同
触摸设备上，<a> 和 <button> 都能点，但背后机制不同：<a> 自带 300ms 延迟优化（现代浏览器已基本移除），<button> 则无此顾虑。更重要的是键盘行为：
-
<a>支持 Enter 触发跳转，但不响应 Space -
<button>同时响应 Enter 和 Space，这是 WCAG 强制要求 - 两者都需确保
:focus样式可见，否则键盘用户找不到当前焦点位置
最容易被忽略的一点：不要为了“统一外观”强行把所有交互元素都做成同一种标签。语义决定标签，样式决定外观——这两层必须分开思考，否则调试成本和可维护性会指数级上升。
