必须用包裹<img>实现图片跳转，因<img>不支持href属性；需确保含有效href、<img>含src和非空alt（装饰图用alt=""），新窗口须配rel="noopener"防安全风险。
直接用 <a> 包住 <img> 就行，但要注意几个关键点
这是最基础的图片链接写法，但实际用的时候常因忽略细节导致链接失效、样式错乱或可访问性问题。
-
<a>必须有href属性，哪怕只是#或javascript:void(0)，否则点击无响应 -
<img>必须有src和alt—— 缺alt会影响屏幕阅读器和 SEO，部分浏览器也会显示破损图标 - 不要给
<a>加target="_blank"却不加rel="noopener"，否则存在安全风险（window.opener可被子页面篡改）
常见错误：图片链接点不动或跳转异常
多数不是语法错，而是语义或属性缺失引发的隐性问题。
-
href值为空字符串（href=""）→ 点击后刷新当前页，不是预期行为 -
img的src是相对路径但路径错位（比如 HTML 在子目录而图片在根目录），控制台报404，但图片“看起来”还在——其实是浏览器缓存了占位图 - CSS 给
a设了display: block却没给img设display: block，导致底部多出几像素空白（<img>默认是 inline 元素，基线对齐留空隙）
简单可靠的写法示例
以下是最小可用、兼顾可访问性和安全性的模板：
<a href="https://example.com" target="_blank" rel="noopener"> <img src="/images/photo.jpg" alt="示例图片描述" width="300" height="200"> </a>
-
width和height建议显式声明，避免布局偏移（CLS） - 如果图片是装饰性的，
alt应为空字符串（alt=""），而非省略——省略会被读屏软件误读为文件名 - 本地跳转用
href="#section1"时，确保页面中有对应id="section1"的元素
移动端点击区域太小怎么办
原生 <img> 尺寸小，手指点不准。别靠 JS 扩大点击区，用 CSS 更稳妥：
立即学习“前端免费学习笔记（深入）”；
- 给外层
<a>加padding，但注意会撑开容器；更推荐用min-width/min-height - 用
display: inline-flex+align-items: center; justify-content: center让图片居中且点击区完整覆盖 - 避免给
<a>设font-size: 0来消除间隙——这会影响alt文本渲染，且在某些安卓浏览器下失效
alt 的内容质量，以及 rel="noopener" 的强制搭配。写完记得右键检查图片是否真能打开、alt 是否被读出、移动端点击是否精准。 
