最简且语义正确的方式是使用 ，它必须置于 内，依赖 src、必需的 name 和 alt 属性，提交时自动携带坐标信息。
直接用 <input type="image"> 是最简、最语义正确的方式，不需要额外包裹或 JS 绑定，表单提交时还能带坐标信息。
用 <input type="image"> 实现图像按钮
这是 HTML 原生支持的图像按钮，本质是可点击的提交控件，不是装饰性图片。
- 必须放在
<form></form>内，否则不会触发提交行为 -
src属性指向图片路径，和<img>一样，支持相对路径、绝对 URL、data URL -
name属性不能省略——服务器端靠它识别坐标参数，例如name="submit"会生成submit.x和submit.y -
alt是必需属性，既用于无障碍访问，也作为按钮的 fallback 文本（图片加载失败时显示） - 默认有边框和 focus outline，可用 CSS 重置：
input[type="image"] { border: none; outline: none; }
用 <button></button> 包裹 <img> 的适用场景
当你需要在非表单环境触发 JS 逻辑，或要嵌入复杂内容（比如带图标+文字的按钮），<button></button> 更灵活。
- 务必设
type="button"，否则在表单内可能意外触发表单提交（默认是submit） - 移除默认样式：
button { background: none; border: none; padding: 0; cursor: pointer; } -
<img>要加alt，否则屏幕阅读器无法识别功能 - 避免给
<button></button>设固定宽高，而是让<img>控制尺寸，或用object-fit控制缩放 - 如果图片是 SVG，注意 inline SVG 可能被
<button></button>的vertical-align影响对齐，建议加vertical-align: middle
@#@#@#@#@#@#@#@#@#@0 是合法的，但 alt 必须准确描述链接目标，而非“点击此处”这类空泛文本
a img { border: none; text-decoration: none; }
javascript:void(0) 或 # 做伪链接再绑 click —— 这会让键盘用户无法通过 Enter 键触发，且破坏可访问性<a href="#section-id"></a>，别用 JS 模拟常见踩坑：图片按钮不响应点击
多数问题出在层级、尺寸或事件拦截上，不是代码写错。
-
<input type="image">放在<form></form>外 → 完全无反应，连鼠标指针都不会变 - 父容器设了
pointer-events: none，或图片被其他元素遮挡（检查 z-index 和 position） - 图片路径 404，浏览器渲染成 0×0 区域 → 看似有图，实则不可点；用开发者工具检查 Network 面板确认资源是否加载成功
- CSS 中对
img或input设置了width: 0; height: 0;或visibility: hidden→ 元素存在但不可交互 - 移动端 Safari 对
<input type="image">的 touch 响应有轻微延迟，若需即时反馈，加cursor: pointer和touch-action: manipulation
真正麻烦的不是怎么写，而是怎么让图片按钮在各种屏幕、各种加载状态下都保持可点击、可聚焦、可读取——alt 写准、name 不漏、CSS 不遮挡，这三点漏掉任意一个，用户就可能卡住。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
