应使用 <a> 标签包裹 <img> 实现跳转，而非 <label>；因 <label> 语义属表单控件交互，强行用于导航会损害可访问性与原生链接功能。
label 标签里放 <img> 为什么点不跳转？
因为 <label> 默认只对表单控件（如 <input>、<textarea>）起作用，它本身不带 href 或跳转逻辑；嵌套 <img> 后，点击图片不会自动触发跳转——除非你显式绑定行为。
用 for 属性关联隐藏的 <input type="checkbox"> 实现点击切换
这是最常见且语义正确的做法：利用 <label> 的天然点击透传能力，把图片作为“开关”的视觉载体。
-
<input>必须有id，且<label>的for值要严格匹配 -
<input>设为display: none，避免干扰布局 - 通过 CSS 监听
input:checked + label img或类似选择器控制图片状态（比如灰度、边框） - 若需跳转，应在 JS 中监听
change事件，再执行window.location.href = '...'
<input type="checkbox" id="jump-trigger" style="display:none">
<label for="jump-trigger"><img src="icon.png" alt="跳转"></label>
<script>
document.getElementById('jump-trigger').addEventListener('change', function() {
if (this.checked) window.location.href = '/target';
});
</script>
想直接跳转？别硬套 <label>，改用 <a> 包裹 <img>
如果目标只是「点图跳页」，<label> 是错位语义——它属于表单交互，不是导航容器。强行用它实现跳转，反而增加无障碍障碍和维护成本。
-
<a href="/target"><img src="logo.png" alt="首页"></a>是标准、轻量、可访问的做法 - 需要点击区域更大？给
<a>加display: inline-block和内边距，而不是塞进<label> - 若必须保留
<label>结构（如 SSR 框架限制），可用onclick="location.href='...'"，但会丢失右键新标签打开、中间键等原生链接能力
兼容性和无障碍要注意什么？
用 <label> 嵌套图片时，屏幕阅读器可能读作「未命名图形」或忽略上下文，尤其当没配 alt 或 aria-label。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img>必须带描述性alt，哪怕只是alt=""（如果是纯装饰） - 如果
<label>承载跳转语义，建议加role="link"和tabindex="0"，并手动处理Enter/Space键响应 - 不要依赖
cursor: pointer当作可点击提示——视觉样式不能替代语义和键盘支持
真正难的不是让图片“能点”，而是让不同设备、不同操作方式的人都能一致地理解并触发这个动作。语义不对齐的地方，补再多 JS 也容易漏掉某个环节。
