广告图必须用<a>包裹，因<img>不支持href且onclick跳转会丢失右键菜单、中键打开、可访问性及SEO；正确写法需含完整URL的href、target="_blank"（外部广告）、rel="noopener noreferrer"、描述性alt及带UTM等追踪参数的链接。
广告图必须用 <a> 包裹，不能只加 onclick
直接给 <img> 加 onclick="window.location='...'" 看似能跳转，但实际会丢失关键能力：无法右键复制链接、不支持中键新标签页打开、屏幕阅读器无法识别为可跳转元素、SEO 也不收录。真正合规的广告跳转，必须用 <a> 标签把图片整个包住。
正确写法示例：
<a href="https://ad.example.com/track?ref=homepage" target="_blank" rel="noopener noreferrer"> <img src="banner.jpg" alt="限时特惠：全场五折起" width="800" height="200"> </a>
-
href必须是完整 URL（含https://），写成www.example.com或/ad.html在某些上下文里会失败 -
target="_blank"是广告标配，但漏掉rel="noopener noreferrer"会引发安全警告，且可能被现代浏览器拦截 -
alt文本要描述广告内容，不是“广告图”，而是“XX品牌秋季新品首发，点击了解详情”
广告跳转地址要带追踪参数，别裸奔
纯跳转到 https://shop.example.com 没法知道流量来自哪个广告位。所有广告链接都该带 UTM 或自定义追踪参数，比如：
https://shop.example.com/sale?utm_source=homepage&utm_medium=banner&utm_campaign=fall2026
注意：& 是 HTML 实体，不是 & 字符，写错会导致参数截断；参数名尽量统一，避免混用 source/src、medium/pos 这类别名。
立即学习“前端免费学习笔记（深入）”；
- 落地页 URL 中的查询参数会被浏览器完整发送，服务端或前端 JS 可据此做归因
- 如果用第三方广告平台（如腾讯广点通、穿山甲），它们通常要求你填入带
click_id或af_ad的跳转链接，别手动覆盖 - 避免在
href里拼接 JS 变量，如href="https://...?id="+adId—— 静态 HTML 不执行 JS，结果是字面量字符串
响应式广告图跳转失效？检查父容器是否截断了 <a>
常见现象：PC 正常，手机点不动；或者只有图片左上角 20px 范围能点开。大概率是 CSS 导致的——<a> 默认是行内元素，若父容器设了 overflow: hidden 或 height 限制，而图片又用了 width: 100% + height: auto，就可能撑出父容器，使 <a> 的可点击区域实际变小甚至消失。
- 解决方法：给
<a>加display: block或inline-block，并确保它包裹图片后没有溢出 - 用浏览器开发者工具选中
<a>，看蓝色高亮区域是否完整覆盖图片 —— 不覆盖就是布局问题 - 别依赖
z-index把<a>提前，容易被其他绝对定位元素遮挡；优先调父容器position和overflow
广告跳转后用户回不来？慎用 target="_blank" 的副作用
看似“新开页”对用户友好，但真实场景中，很多用户看完广告页就关掉标签页，根本不会切回来。如果你的广告是站内活动（比如首页 banner 跳转到「会员中心」），反而该用默认当前页跳转，避免用户流失。
- 外部广告（竞品、联盟、CPS）才强制
target="_blank" - 站内广告优先不加
target，或加target="_self"显式声明，避免继承父框架的target值 - 如果必须新开页，记得在广告文案里暗示：“新窗口打开，不影响当前页面”——降低用户认知负担
?q=新款手机 应为 ?q=%E6%96%B0%E6%AC%BE%E6%89%8B%E6%9C%BA）。这类问题线上很难复现，但一发生就是整批广告不可追踪。 
