<map>和<area>是HTML原生图像热点标签组合，需通过<img>的usemap="#name"关联<map name="name">，<area>嵌套其中并用shape与coords定义矩形、圆形或多边形热区，坐标基于图片左上角原始像素，不随CSS缩放自适应。
什么是 <map> 和 <area> 热区标签
HTML 中没有独立的“热区标签”，真正实现图像可点击区域的是 <map> 配合 <area>。它们必须配合 <img> 的 usemap 属性才能生效，单独写 <area> 不会显示或响应点击。
常见错误是把 <area> 当成普通按钮写在任意位置，或者漏掉 usemap 的 # 前缀——比如写成 usemap="mymap"（错），正确应为 usemap="#mymap"。
<area> 的 shape 和 coords 怎么配对写
shape 决定区域形状，coords 是对应坐标的像素值列表，两者必须严格匹配，否则区域不生效或错位。
-
shape="rect"：需 4 个值，coords="x1,y1,x2,y2"（左上、右下） -
shape="circle"：需 3 个值，coords="cx,cy,r"（圆心 x、y，半径 r） -
shape="poly"：需偶数个值，coords="x1,y1,x2,y2,x3,y3,..."（多边形顶点序列）
注意：coords 坐标原点是图片左上角（0,0），且所有值必须是整数；浏览器不会自动缩放 coords 值来适配响应式图片——如果图片用 CSS 缩放，热区会失效。
立即学习“前端免费学习笔记（深入）”；
为什么点击没反应？几个关键检查点
热区失效通常不是代码语法错，而是上下文条件不满足：
-
<img>必须有src属性且能正常加载；404 图片下<area>完全不工作 -
<map>的name和<img>的usemap值（含#）必须完全一致，区分大小写 -
<area>必须嵌套在<map>内，不能放在<body>或其他容器里 - 没有
href或onclick的<area>默认不可交互；空链接如href="#"会跳页首，建议用href="javascript:void(0)"或绑定 JS 事件
现代项目里还该用热区吗
纯静态图+固定尺寸时，<map> 仍可靠；但遇到响应式布局、SVG 替代、或需要 hover 效果/动画时，它基本不可维护。
替代方案更常用：<svg> 内嵌 <path> + viewBox 可等比缩放热区；或用绝对定位的透明 <div> 覆盖图片区域（需 JS 同步坐标）。原生热区不支持触摸设备的精确判定，移动端慎用。
坐标硬编码、无无障碍支持（如缺少 alt）、无法用 CSS 选中——这些不是 bug，是设计限制，得提前接受。
