正确做法是用包裹，因不支持href属性，onclick模拟跳转会损害可访问性、键盘导航和右键功能；必须设置alt描述链接目标而非图片本身，并确保target="_blank"时配rel="noopener noreferrer"。
直接用 @#@#@#@#@#@#@#@#@#@0。浏览器自动把整个 <img> 区域变成可点击热区，并继承所有原生链接能力。
target="_blank" 必须配 rel="noopener noreferrer"
只加 target="_blank" 是危险操作：新开页可通过 window.opener 反向控制原页面，存在钓鱼和 XSS 风险。
务必写全：
<a href="https://example.com" target="_blank" rel="noopener noreferrer"> @@##@@ </a>
-
rel="noopener"切断window.opener引用 -
rel="noreferrer"防止 Referer 泄露来源地址（可选但推荐） - 如果只是同域内跳转（如
./product.html），不用target，更安全省事
alt 不是可选项，而是链接语义的核心部分
当图片是功能性链接（比如导航图标、商品图、按钮），alt 决定它“是什么链接”，不是“长得像什么”。写成 alt="" 或 alt="图片" 等于告诉屏幕阅读器：“这链接没内容”，用户根本不知道点它去哪。
正确做法：
- 商品图：
alt="iPhone 15 Pro 详情页" - 首页图标：
alt="返回网站首页" - 装饰性图片（如分隔线）：不该放
<a></a>里，改用 CSS 背景图
另外，如果图片加载失败，alt 文本会直接显示出来 —— 这时候你写的描述是否准确，就是用户唯一能依赖的信息。
动态换图+换链接时，别重写整个 HTML
轮播图或卡片列表中要切换图片和对应链接，常见错误是反复 innerHTML = '...<a><img>...'</a>，这会导致：
- 已绑定的事件监听器丢失
- 焦点状态重置（键盘用户突然失焦）
- 滚动位置跳动、动画中断
推荐直接改属性：
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，对辅助技术用户就是纯盲操作。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
