必须用包裹，因不支持href属性，直接添加会被浏览器忽略；onclick模拟缺乏可访问性与语义；正确结构需含href、含非空alt；新窗口需rel="noopener"防安全风险。
必须用 <a></a> 包裹 <img>，其他写法要么无效，要么破坏语义、可访问性或安全性。
为什么不能给 <img> 直接加 href 属性
<img> 标签本身不支持 href；浏览器会直接忽略这个属性，点击毫无反应。常见错误写法如：
@@##@@
这种写法在 HTML 中非法，验证器报错，且所有现代浏览器都不执行跳转。试图用 onclick 模拟（比如 onclick="location.href='/home'"）也绕不开问题：
- 键盘用户无法按 Enter 触发（缺少焦点和原生链接行为）
- 右键菜单里没有“在新标签页打开”“复制链接地址”等选项
- 屏幕阅读器不会将其识别为链接，损害可访问性
<a></a> 嵌套 <img src="logo.png" href="/home" alt="首页"> 的最小合法结构
核心就三件事：包裹、href、alt。缺一不可。
-
<img>必须完整位于<a></a>开始与结束标签之间 -
<a></a>的href属性值必须是有效 URL（可以是相对路径、绝对路径或锚点，如"#section2"） -
<img>的alt属性不能为空字符串或缺失；即使图片纯装饰，也应写alt=""（此时需确认该图确实无需传达信息）
正确示例：
<a href="/about">@@##@@</a>
新窗口打开时必须加 rel="noopener"
只写 target="_blank" 是危险的。它会让新页面通过 window.opener 访问原页面的 window 对象，可能被恶意页面篡改或窃取数据。
- 必须同时添加
rel="noopener"（推荐）或rel="noreferrer" -
rel="noopener"阻断window.opener，但保留Referer头 -
rel="noreferrer"同时阻断window.opener和Referer，适合隐私敏感场景 - 不要只依赖 JavaScript 补丁；这个防护必须写在 HTML 层面
安全写法：
<a href="https://example.com" target="_blank" rel="noopener">@@##@@</a>
常见视觉与交互陷阱
嵌套本身简单，但样式和交互容易出问题：
- 如果
<a></a>设置了display: block但没设宽高，而<img>是响应式（如max-width: 100%），点击热区可能塌缩成一条线——检查父级<a></a>是否有足够尺寸或overflow: hidden干扰 - 给
<a></a>加text-decoration: none是常规操作，但别忘了移除默认下划线的同时，也要确保 hover 状态有明确视觉反馈（比如加边框、阴影或背景色） - 避免在
<img src="assets/logo.svg" alt="关于我们">上额外加cursor: pointer：链接语义已自带手型光标，重复声明无意义，还可能覆盖掉禁用状态下的默认箭头 - 如果图片加载失败，
alt文本会显示出来，此时整个alt区域仍是可点击热区——这是预期行为，不是 bug
真正容易被忽略的是：当多个图片链接并排时，若用 float 或旧式 inline 布局，<a></a> 的点击区域可能因 margin/padding 计算偏差而错位；现代开发建议统一用 display: inline-block 或 Flex/Grid 控制布局，而不是依赖 <a></a> 自身的显示行为去对齐。
