必须用 <a> 包裹 <img>，因为 <img> 不支持 href 属性，浏览器会忽略；错误写法破坏可访问性、语义和安全性；正确方式需包含 alt 描述链接目的，并添加 rel="noopener" 防范安全风险。
只能用 <a> 包裹 <img>，其他写法要么无效，要么破坏可访问性或安全机制。
为什么不能直接给 <img> 加 href 属性
<img> 标签在 HTML 规范中不支持 href 属性。浏览器会完全忽略你写的 href="https://example.com"，点击毫无反应。
常见错误写法：
-
<img src="a.jpg" href="https://example.com">——href被静默丢弃 -
<img src="a.jpg"><a href="https://example.com"></a>——<a>没内容，无法点击 -
<img src="a.jpg"></a>—— 语法错乱，<a>开始标签缺失
正确嵌套：用 <a> 包住 <img>
这是唯一语义正确、全浏览器兼容、无障碍友好的方式。
立即学习“前端免费学习笔记（深入）”；
基础写法示例：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<a href="https://example.com"> <img src="logo.png" alt="公司官网"> </a>
关键点：
-
alt必须写，且要描述链接目的（如alt="iPhone 15 Pro 详情页"），不是描述图片外观 - 不要在
<a>和<img>之间加换行或空格，部分旧版浏览器会渲染出多余空白 - 避免给
<img>设display: block以外的布局样式去“撑点击区”——现代浏览器默认整个图片框就是可点击区域
新窗口打开必须加 rel="noopener"
只加 target="_blank" 是不安全的：目标页面可通过 window.opener 访问原页面上下文，可能被用于钓鱼或性能攻击。
正确写法：
<a href="https://example.com" target="_blank" rel="noopener"> <img src="btn.jpg" alt="下载白皮书"> </a>
补充建议：
- 如果还要隐藏来源地址（如防止 Referer 泄露），可加
rel="noopener noreferrer" - 同域内跳转（如
./about.html）无需target，省事又更安全
别用 onclick 或 <button> 模拟链接
这些做法看似灵活，实则绕过浏览器原生链接机制，带来一堆隐性问题：
-
<img src="x.jpg" onclick="window.location='...'">：键盘用户无法 Tab 聚焦、按回车触发；右键菜单无“在新标签页打开”选项；不支持预加载 -
<button onclick="..."><img></button>：语义错误（这不是按钮行为）；若没设type="button"，可能意外触发表单提交
真正难的不是“怎么让图片跳转”，而是“让所有人——包括屏幕阅读器用户、键盘操作者、低带宽环境下的访客——都能可靠地知道它是什么、点它去哪、怎么点”。alt 写得不准、rel="noopener" 漏掉、用 JS 模拟链接，这三处最容易被跳过，但恰恰最影响实际可用性。
