正确做法是用包裹<img>，因<img>不支持href属性，onclick模拟跳转会损害可访问性、键盘导航和右键功能；必须设置alt描述链接目标而非图片本身，并确保target="_blank"时配rel="noopener noreferrer"。
直接用 <a> 包裹 <img>，别绕弯，其他方式基本是挖坑。
为什么不能给 <img> 加 href 或 onclick
浏览器根本不认 <img href="..."> —— 这个属性不存在，写了也无效。而 onclick="location.href=..." 看似能跳，但会丢失右键菜单（无法“在新标签页打开”“另存为图片”）、键盘 Tab 无法聚焦、屏幕阅读器读不出链接意图，还可能被广告拦截器或 CSP 策略干掉。
真正起作用的只有语义化嵌套：<a href="target.html"><img src="icon.png" alt="首页图标"></a>。浏览器自动把整个 <img> 区域变成可点击热区，并继承所有原生链接能力。
target="_blank" 必须配 rel="noopener noreferrer"
只加 target="_blank" 是危险操作：新开页可通过 window.opener 反向控制原页面，存在钓鱼和 XSS 风险。
立即学习“前端免费学习笔记（深入）”；
务必写全：
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> <img src="banner.jpg" alt="推广活动"> </a>
-
rel="noopener"切断window.opener引用 -
rel="noreferrer"防止 Referer 泄露来源地址（可选但推荐） - 如果只是同域内跳转（如
./product.html），不用target，更安全省事
alt 不是可选项，而是链接语义的核心部分
当图片是功能性链接（比如导航图标、商品图、按钮），alt 决定它“是什么链接”，不是“长得像什么”。写成 alt="" 或 alt="图片" 等于告诉屏幕阅读器：“这链接没内容”，用户根本不知道点它去哪。
正确做法：
- 商品图：
alt="iPhone 15 Pro 详情页" - 首页图标：
alt="返回网站首页" - 装饰性图片（如分隔线）：不该放
<a>里，改用 CSS 背景图
另外，如果图片加载失败，alt 文本会直接显示出来 —— 这时候你写的描述是否准确，就是用户唯一能依赖的信息。
动态换图+换链接时，别重写整个 HTML
轮播图或卡片列表中要切换图片和对应链接，常见错误是反复 innerHTML = '...<a><img>...'，这会导致：
- 已绑定的事件监听器丢失
- 焦点状态重置（键盘用户突然失焦）
- 滚动位置跳动、动画中断
推荐直接改属性：
const linkEl = document.querySelector('.hero-link');
const imgEl = linkEl.querySelector('img');
linkEl.href = '/product/2';
imgEl.src = '/images/item2.jpg';
imgEl.alt = 'AirPods Max 详情页';
这样 DOM 结构稳定，状态可控，且兼容 SSR 和 SEO 抓取。
最常被忽略的其实是 alt 的动态同步 —— 换了图却不更新 alt，对辅助技术用户就是纯盲操作。
