用<a>包裹<img>是最直接可靠的方式，HTML无独立图片跳转标签，必须借助超链接语义；需确保alt属性有效、新窗口加rel="noopener"、禁用usemap误用、慎用JS绑定并补全键盘交互。
用 <a> 包裹 <img> 是最直接可靠的方式
HTML 本身没有“图片点击跳转”的独立标签，必须借助超链接语义。把 <img> 当作 <a> 的内容即可，浏览器会自动继承链接行为。
常见错误是给 <img> 加 onclick 或监听事件——这绕过语义、损害可访问性、且不支持右键另存/新标签打开等原生能力。
<a href="https://example.com"><img src="logo.png" alt="示例网站"></a>- 确保
alt属性存在且有意义，屏幕阅读器和 SEO 都依赖它 - 若目标是新窗口，加
target="_blank"，同时务必加rel="noopener"防安全风险
img 的 usemap 属性只适用于图像映射，不是通用跳转方案
很多人搜到 usemap 就以为能做跳转，其实它只能定义图片上的可点击区域（热点），每个区域需配合 <map> 和 <area> 使用，且仅支持简单几何形状（矩形、圆形、多边形）。
适用场景极窄：比如一张世界地图，点击“中国”跳转到中国页，“美国”跳转到美国页。普通头图、按钮图、卡片图完全不需要它。
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 写法示例：
<img src="world.png" usemap="#worldmap"><map name="worldmap"><area shape="rect" coords="10,10,100,100" href="/china"></map> -
coords坐标易出错，响应式布局下会失效，维护成本高 - 现代开发中，更推荐用 CSS 定位 +
<div>+<a>模拟热点，可控性更强
JavaScript 绑定点击事件要谨慎处理 fallback 和可访问性
只有在需要动态逻辑（如权限判断、埋点、防重复点击）时才用 JS。纯跳转请坚持用原生 <a>。
如果真要用 JS，别只写 onclick 内联属性——它难测试、难复用、无法 keyboard 触发（如回车键）。
- 正确做法：
document.querySelector('img.trigger').addEventListener('click', () => window.location.href = '/next') - 必须同步为该
<img>添加role="link"和tabindex="0"，否则键盘用户无法聚焦 - 记得监听
Enter和Space键，补全键盘交互：e.key === 'Enter' || e.key === ' ' - 禁用右键菜单或拖拽（
oncontextmenu="return false"）会破坏用户体验，尽量避免
响应式图片跳转时，srcset 和 sizes 不影响跳转逻辑
用 <img srcset="..." sizes="..."> 实现适配不同屏幕的图片资源，和跳转行为完全正交。只要外层 <a> 正确包裹，无论加载哪张源图，点击都走同一链接。
容易被忽略的是：如果图片加载失败（404），默认显示断链图标，但点击仍有效——这点常被误认为“跳转失效”，其实是图片没出来，链接还在。
- 验证方法：右键图片 → “检查元素”，确认
<a>标签结构完整、href值正确 - 不要用
background-image替代<img>来实现跳转，CSS 背景图无法设置alt，也不被搜索引擎索引 - 若跳转地址含中文或特殊字符，确保 URL 已用
encodeURIComponent()编码（服务端渲染时尤其注意）
