用 <img alt="html怎样标记文档的图片按钮_HTML标记文档图片按钮用法【用法】" > 做按钮时，为什么点不了？
直接把 <img alt="HTML怎样标记文档的图片按钮_HTML标记文档图片按钮用法【用法】" > 当按钮用，浏览器默认不响应点击——它只是个静态内容元素，没交互行为。想让它可点，必须加交互层或语义包装。
- 最简单有效：用
<button></button>包住<img alt="HTML怎样标记文档的图片按钮_HTML标记文档图片按钮用法【用法】" >，按钮自带焦点、空格/回车触发、屏幕阅读器识别 - 别用
<div> + <code>onclick模拟，会丢键盘操作、无障碍支持和默认按钮样式 - 如果必须用
<a></a>（比如跳转），记得加role="button"和tabindex="0"，否则键盘用户无法聚焦 - 只在需要「带坐标提交」时用，比如图像地图式表单确认
- 现代项目中基本被
<button><img alt="HTML怎样标记文档的图片按钮_HTML标记文档图片按钮用法【用法】" ></button>替代，更可控、无副作用 - 注意兼容性：IE 会把
alt文本当按钮文字，chrome/firefox 不显示，别依赖它做可访问性兜底 - 如果按钮功能明确（如“搜索”“删除”），
alt就写动词短语：alt="删除此行" - 不要写“图标”“按钮”这类冗余词，屏幕阅读器已知这是按钮
- 若
<img alt="HTML怎样标记文档的图片按钮_HTML标记文档图片按钮用法【用法】" >在<button></button>内，且按钮内还有文字，alt=""即可，避免重复播报 - 需要额外说明时，优先用
aria-label覆盖，比alt更精准控制播报内容 - 用
width/height控制图片显示大小，用padding扩展按钮热区，别只靠width/height拉伸 - 给
<button></button>设border: none; background: transparent;，避免默认边框干扰视觉 - 移动端必须保证热区 ≥ 44×44px，否则手指点不准，
padding是最稳妥的方案 - 慎用
Object-fit: cover;，可能裁切关键图标部分，contain更安全
<input type="image"> 还能用吗？
能用，但有硬伤：它本质是提交表单的按钮，点击会触发表单提交，并附带鼠标坐标（x/y 参数），不适合纯交互场景。
图片按钮的 alt 和 aria-label 怎么写？
alt 是 <img alt="HTML怎样标记文档的图片按钮_HTML标记文档图片按钮用法【用法】" > 的必需属性，但它的作用不是描述图片，而是说明“这个按钮干什么”。写错就等于废掉无障碍支持。
CSS 控制图片按钮大小和点击热区要注意什么？
图片本身尺寸小，但按钮热区太小会导致误操作；盲目放大图片又可能模糊。关键在分离「渲染尺寸」和「交互区域」。
立即学习“前端免费学习笔记（深入）”；
实际项目里最容易被忽略的，是键盘焦点样式和 :focus-visible 的适配——很多团队只测鼠标点击，结果 Tab 切换时按钮完全看不见，用户卡在半路。