用包裹是最直接可靠的方式，html无独立图片跳转标签，必须借助超链接语义；需确保alt属性有效、新窗口加rel="noopener"、禁用usemap误用、慎用js绑定并补全键盘交互。
用 @#@#@#@#@#@#@#@#@#@0
alt 属性存在且有意义，屏幕阅读器和 SEO 都依赖它target="_blank"，同时务必加 rel="noopener" 防安全风险
img 的 usemap 属性只适用于图像映射，不是通用跳转方案
很多人搜到 usemap 就以为能做跳转，其实它只能定义图片上的可点击区域（热点），每个区域需配合 <map></map> 和 <area> 使用，且仅支持简单几何形状（矩形、圆形、多边形）。
适用场景极窄：比如一张世界地图，点击“中国”跳转到中国页，“美国”跳转到美国页。普通头图、按钮图、卡片图完全不需要它。
- 写法示例：
<img><map name="worldmap"><area shape="rect" coords="10,10,100,100" href="/china"></map> -
coords坐标易出错，响应式布局下会失效，维护成本高 - 现代开发中，更推荐用 CSS 定位 +
<div> + <code><a></a>模拟热点，可控性更强JavaScript 绑定点击事件要谨慎处理 fallback 和可访问性
只有在需要动态逻辑（如权限判断、埋点、防重复点击）时才用 JS。纯跳转请坚持用原生
<a></a>。如果真要用 JS，别只写
onclick内联属性——它难测试、难复用、无法 keyboard 触发（如回车键）。- 正确做法：
document.querySelector('img.trigger').addEventListener('click', () => window.location.href = '/next') - 必须同步为该
<img>添加role="link"和tabindex="0"，否则键盘用户无法聚焦 - 记得监听
Enter和Space键，补全键盘交互：e.key === 'Enter' || e.key === ' ' - 禁用右键菜单或拖拽（
oncontextmenu="return false"）会破坏用户体验，尽量避免
响应式图片跳转时，
srcset和sizes不影响跳转逻辑用
<img>实现适配不同屏幕的图片资源，和跳转行为完全正交。只要外层<a></a>正确包裹，无论加载哪张源图，点击都走同一链接。容易被忽略的是：如果图片加载失败（404），默认显示断链图标，但点击仍有效——这点常被误认为“跳转失效”，其实是图片没出来，链接还在。
- 验证方法：右键图片 → “检查元素”，确认
<a></a>标签结构完整、href值正确 - 不要用
background-image替代<img src="logo.png" alt="示例网站">来实现跳转，CSS 背景图无法设置alt，也不被搜索引擎索引 - 若跳转地址含中文或特殊字符，确保 URL 已用
encodeURIComponent()编码（服务端渲染时尤其注意）
- 正确做法：
