唯一语义正确的方式是用 包裹 ，即 ； 语义为表单提交而非跳转，会丢失链接原生能力；必须写非空 alt，禁止 自带 href，嵌套时避免换行空白，新窗口需配 rel="noopener" 防安全风险，路径须匹配协议与文件结构，css 不可破坏点击热区。
用 @#@#@#@#@#@#@#@#@#@0。浏览器自动把整个 <img> 区域变成可点击热区，且保留所有链接语义。
-
alt 必须写，不能为空或仅空格——屏幕阅读器靠它朗读，SEO 也依赖它理解图像意图
- 别在
<img src="icon.png" alt="首页"> 上加 href 属性，比如 <img>，这完全无效，浏览器直接忽略
- 嵌套时避免在
@#@#@#@#@#@#@#@#@#@1。现代浏览器控制台会警告缺失 rel，上线前必须修复。
-
rel="noreferrer" 可选，它还会阻止 Referer 头发送，但 noopener 已解决核心安全问题
- 不要写成
rel="noopener noreferrer" 以外的组合（比如漏掉引号、大小写混用），部分解析器会失效
- 如果只是站内跳转（如
./about.html），不需要 target 和 rel，保持简洁即可
图片路径和协议不匹配会导致静默失败
链接点不动、图片不显示，八成卡在路径或协议上。HTTP 页面加载 HTTPS 图片会被现代浏览器拦截（混合内容），而 HTTPS 页面加载 HTTP 链接则可能被静默降级或拒绝跳转。
本地开发时双击 HTML 文件（file:// 协议）更麻烦：多数浏览器禁止跨目录加载资源，src="./images/logo.png" 若 HTML 不在根目录，就会 404。
- 开发阶段务必用本地服务器预览，比如
python3 -m http.server 8000
- 相对路径要严格对照文件系统结构，
../assets/icon.png 和 ./assets/icon.png 差一级就失效
- 服务端区分大小写，
IMG.JPG 和 img.jpg 是两个文件，路径写错一个字母就是 404
- 中文或带空格的文件名必须 URL 编码，
产品图.png 要写成 %E4%BA%A7%E5%93%81%E5%9B%BE.png
CSS 干扰点击区域的几个典型表现
图片能显示、链接 href 也没错，但就是点不中？大概率是 CSS 把热区切掉了或压扁了。
默认情况下，<a></a> 是 inline 元素，<img> 也是 inline，但一旦给父容器设了 overflow: hidden、transform 或 clip-path，热区可能被裁剪；设了 display: block 却没指定宽高，图片高度塌陷，实际可点区域只剩几像素高。
- 移除默认边框：
a img { border: none; }，老浏览器（如 IE）会给图片加蓝色边框
- 确保
<img href="..."> 没被设成 visibility: hidden 或 opacity: 0——前者不可点击，后者虽然透明但可点
- 响应式图片用了
max-width: 100%，但父容器 width 为 0 或 display: none，热区就消失了
- 如果用
position: absolute 把图片移出文档流，记得给 <a></a> 补上 display: block 和显式宽高，否则热区面积为 0
真正容易被忽略的是：图片链接不是“写完就能用”，它依赖路径、协议、语义、样式四层协同。任何一个环节断掉，用户看到的都只是张静态图——连报错都不会有。
![]()
![]()
![]()
alt 必须写，不能为空或仅空格——屏幕阅读器靠它朗读，SEO 也依赖它理解图像意图<img src="icon.png" alt="首页"> 上加 href 属性，比如 <img>，这完全无效，浏览器直接忽略@#@#@#@#@#@#@#@#@#@1。现代浏览器控制台会警告缺失 rel，上线前必须修复。
-
rel="noreferrer"可选，它还会阻止Referer头发送，但noopener已解决核心安全问题 - 不要写成
rel="noopener noreferrer"以外的组合（比如漏掉引号、大小写混用），部分解析器会失效 - 如果只是站内跳转（如
./about.html），不需要target和rel，保持简洁即可
图片路径和协议不匹配会导致静默失败
链接点不动、图片不显示，八成卡在路径或协议上。HTTP 页面加载 HTTPS 图片会被现代浏览器拦截（混合内容），而 HTTPS 页面加载 HTTP 链接则可能被静默降级或拒绝跳转。
本地开发时双击 HTML 文件（file:// 协议）更麻烦：多数浏览器禁止跨目录加载资源，src="./images/logo.png" 若 HTML 不在根目录，就会 404。
- 开发阶段务必用本地服务器预览，比如
python3 -m http.server 8000 - 相对路径要严格对照文件系统结构，
../assets/icon.png和./assets/icon.png差一级就失效 - 服务端区分大小写，
IMG.JPG和img.jpg是两个文件，路径写错一个字母就是 404 - 中文或带空格的文件名必须 URL 编码，
产品图.png要写成%E4%BA%A7%E5%93%81%E5%9B%BE.png
CSS 干扰点击区域的几个典型表现
图片能显示、链接 href 也没错，但就是点不中？大概率是 CSS 把热区切掉了或压扁了。
默认情况下，<a></a> 是 inline 元素，<img> 也是 inline，但一旦给父容器设了 overflow: hidden、transform 或 clip-path，热区可能被裁剪；设了 display: block 却没指定宽高，图片高度塌陷，实际可点区域只剩几像素高。
- 移除默认边框：
a img { border: none; }，老浏览器（如 IE）会给图片加蓝色边框 - 确保
<img href="...">没被设成visibility: hidden或opacity: 0——前者不可点击，后者虽然透明但可点 - 响应式图片用了
max-width: 100%，但父容器width为 0 或display: none，热区就消失了 - 如果用
position: absolute把图片移出文档流，记得给<a></a>补上display: block和显式宽高，否则热区面积为 0
真正容易被忽略的是：图片链接不是“写完就能用”，它依赖路径、协议、语义、样式四层协同。任何一个环节断掉，用户看到的都只是张静态图——连报错都不会有。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
