<map>标签必须配合<img>的usemap属性且与<map>的name严格匹配才能生效；coords值依shape类型而定，原点为图片左上角，不响应CSS缩放；<area>支持href、target等链接属性，alt不可省略；响应式下需改用SVG或绝对定位方案。
map 标签必须配合 usemap 属性才能生效
单独写 <map> 标签不会触发任何链接行为，它只是定义区域集合的容器。真正让图片“可点击”的关键是图片元素（<img>）上要带 usemap 属性，且值必须与 <map> 的 name 属性严格匹配（注意：不是 id）。大小写、空格、下划线都要一致，否则整个映射失效。
常见错误现象：
– 图片显示正常，但所有热点区域都不响应点击
– 浏览器控制台无报错，但 <area> 完全被忽略
– 用开发者工具检查时发现 <area> 元素存在，但鼠标悬停无手型光标
正确写法示例：
<img src="plan.png" alt="楼层图" usemap="#floor-map"> <map name="floor-map"> <area shape="rect" coords="10,10,100,80" href="/room/a101" alt="A101"> <area shape="circle" coords="200,60,30" href="/room/a102" alt="A102"> </map>
coords 值依赖 shape 类型，顺序和单位不能错
coords 不是通用坐标数组，它的含义由 shape 决定，且坐标原点始终是图片左上角（0,0）。浏览器不会自动缩放或适配响应式图片——如果图片用 CSS 缩放了，coords 仍按原始像素计算，导致热点偏移。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"：需 4 个值，格式为x1,y1,x2,y2（左上角 + 右下角） -
shape="circle"：需 3 个值，格式为center_x,center_y,radius -
shape="poly"：需偶数个值，每两个为一个顶点，如x1,y1,x2,y2,x3,y3,...
容易踩的坑：
– 把 rect 的 coords 写成 x,y,width,height（这是 Canvas 的习惯，HTML map 不支持）
– 在高清屏（dpr > 1）下直接用截图工具量出的像素值，没换算回 CSS 像素
– 忘记图片设置了 max-width: 100%，实际渲染尺寸变小，但 coords 还按原图尺寸写
area 的 href 和 target 行为与普通链接一致
<area> 本质就是一个可点击区域，它的导航行为完全复用 <a> 的逻辑。这意味着你可以正常使用 href、target、download，甚至加 rel="noopener" 防安全风险。
实操建议：
- 内部页面跳转直接写相对路径，如
href="product/detail.html" - 新窗口打开务必加
target="_blank" rel="noopener"，否则有 opener 泄露风险 - 如果想用 JavaScript 控制点击（比如弹窗、埋点），把
href设为#，再绑定onclick或用事件委托监听<map>的 click 事件 -
alt属性不可省略，它是无障碍访问的关键，屏幕阅读器靠它描述每个区域功能
响应式场景下 map 热点会失效，没有自动适配机制
HTML 原生 <map> 是静态坐标系统，不感知视口变化、图片缩放或媒体查询。只要图片尺寸变了（哪怕只是 CSS width: 50%），原来写的 coords 就立刻错位。
目前没有纯 HTML/CSS 方案能解决这个问题。可行路径只有两个：
- 放弃
<map>，改用绝对定位的透明<a>或<div>覆盖在图片上，用 JS 动态计算位置（适合区域数量少、结构稳定） - 用 SVG 替代：把图片作为
<image>嵌入 SVG，再用<a>包裹<rect>/<circle>等图形，SVG 坐标天然响应式
如果必须用 <map>，唯一缓解方式是限制图片不缩放（固定宽高 + object-fit: contain），并确保设计稿与上线图尺寸完全一致——这点在真实项目中极难保证。
