最轻量语义准确的方式是<input type="image">，它作为提交按钮渲染为图片并自动提交x/y坐标；需指定src和alt，漏写name或src 404会导致功能失效。
用 <input type="image"> 替代普通按钮
直接用 <input type="image"> 是最轻量、语义最准确的方式。它本质是提交按钮，但会渲染为图片，点击后自动以坐标形式提交 x 和 y 参数（如 submit.x=123&submit.y=45），后端可据此判断点击位置（比如做热区判断）。
注意：必须指定 src 属性，否则显示为默认占位符；alt 不可省略，否则无障碍访问失败，部分浏览器还会报警告。
示例：
<form action="/upload" method="post"> <input type="image" src="upload-btn.png" alt="上传文件" name="submit"> </form>
常见错误：src 路径 404 导致按钮变空白或显示破损图标；漏写 name 会让后端收不到 submit.x/submit.y 字段。
立即学习“前端免费学习笔记（深入）”；
用 <button> 包裹 <img> 的兼容写法
当需要更灵活的样式控制（比如 hover 动画、文字叠加、SVG 响应式缩放），或者要避免坐标提交行为时，用 <button type="submit"> 包裹 <img> 更合适。它不会自动带坐标参数，行为和普通提交按钮一致。
关键点：
-
<button>必须显式设type="submit"（否则在某些表单中不触发提交） -
<img>的alt仍需保留，且值应描述按钮功能（如alt="确认下单"），而非图片内容 - 为防止图片加载失败时按钮塌陷，建议给
<button>设固定宽高或min-width/min-height
示例：
<form action="/order" method="post">
<button type="submit">
<img src="checkout.svg" alt="确认下单" width="120" height="40">
</button>
</form>
避免用 <a> 模拟图片按钮
用 <a href="javascript:..."> 或 <a href="#" onclick="submitForm()"> 实现图片按钮，看似简单，实则问题集中：
- 语义错误：链接不是交互控件的正确语义，屏幕阅读器可能读作“跳转到”，而非“提交”
- 表单未绑定时容易忘记调用
event.preventDefault()，导致页面跳转或刷新 - 禁用状态（
disabled）无法直接作用于<a>，需额外 JS 控制 class 和点击逻辑 - 键盘用户按 Enter 键不会触发，不符合可访问性要求
除非明确要导航而非提交，否则不要走这条路。
响应式与高 DPI 图片适配要点
纯 <input type="image"> 不支持 srcset 或 picture，所以高清屏下容易模糊。此时必须切换到 <button>+<img> 方案，并利用现代属性：
- 用
<img srcset="btn@1x.png 1x, btn@2x.png 2x" sizes="120px"> - 或用 CSS 背景图 +
@media (-webkit-min-device-pixel-ratio: 2)切换背景 - 若用 SVG，确保内联或作为
src时无固定宽高，靠 CSS 控制尺寸，否则在缩放时可能锯齿
别忽略 width 和 height 的 HTML 属性——它们是防止布局偏移（layout shift）的关键，即使 CSS 已设尺寸也建议保留。
<input type="image"> 就够了；剩下 10% 需要动画、多态或高清适配时，才值得上 <button>+<img> 这套组合。坐标参数那点差异，很多人根本用不上，但 accessibility 和语义错误却会在上线后反复被审计工具揪出来。 
