原生 map+area 实现图像热区精度要求极高：usemap 与 map name 必须逐字节一致；shape 与 coords 格式须严格匹配；coords 基于原始尺寸，缩放后需 JS 动态重算；area 必嵌套于 map 内且 href、alt 不可省略；响应式场景推荐 SVG 替代。
原生 map + area 能实现图像热区，但“能用”不等于“好用”——它是一套对书写精度零容忍的机制：错一个#、少一位坐标、漏一个alt，热区就静默失效，浏览器既不报错也不提示。
usemap="#name" 和 map 的 name 必须逐字节一致
这是 90% 热区点击无响应的根源。浏览器只做严格字符串匹配，大小写、连字符、空格、符号全算在内。
-
usemap="#product-map"✅ 必须配<map name="product-map"> -
usemap="product-map"❌ 漏掉#，整个map被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map id="product-map">❌usemap不认id，只认name
调试时别靠眼睛扫，直接右键图片 → “检查”，复制usemap值，再选中map元素，复制其name属性，用编辑器做纯文本比对。
shape 与 coords 格式必须严格对应
coords 不是“像素列表”，而是由shape决定的结构化数据；填错格式，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，部分浏览器（如 Safari）会静默跳过格式错误的 poly
设计稿里标出的“居中坐标”不能直接填；必须按原始图片尺寸换算。导出坐标时注意清理空格和换行——coords 中只允许数字和逗号。
coords 基于原始尺寸，响应式下必然错位
area 的坐标永远绑定图片文件的 naturalWidth / naturalHeight，不是 CSS 渲染后的宽高。只要图片被缩放（max-width: 100%、width: 50%、object-fit），热区立刻失准。
- 原始图 1200×800，
coords="0,0,100,100"是左上角 100×100 区域 - 缩放到 375px 宽后，该区域在屏幕上仅约 31×21px，远低于触控最小推荐尺寸 44×44px
- 没有纯 HTML/CSS 方案能自动适配；唯一可靠解法是 JS 动态重算
需监听 window.addEventListener('resize', updateCoords) 和 img.addEventListener('load', updateCoords)，在 updateCoords() 中读取 img.naturalWidth 与 img.offsetWidth 得到缩放比，再遍历所有 area，把每个 coords 数值乘以比例后重新赋值。移动端尤其要实机测试，别只在桌面调好就上线。
area 必须嵌套在 map 内，且 href 和 alt 不可省略
area 是空元素，不能自闭合（<area/> 是错的），且必须是 map 的直接子节点；放在 div 里、或写在 map 外，所有浏览器都会忽略它。
- 没
href，点击无跳转行为；href不能是空字符串、#或纯锚点（如href="#section1"），建议用href="javascript:void(0)"或真实路径 - 没
alt，屏幕阅读器跳过该区域，Chrome 控制台还会报 warning；alt应准确说明功能，例如alt="进入卫生间详情页"，而非alt="点击此处" -
map标签不能嵌套，也不能被<picture>或 Shadow DOM 隔离；若img在 Shadow DOM 内，外部map默认不可见
真正需要响应式热区的项目，优先考虑 SVG 替代方案——天然支持缩放、事件绑定更可控、坐标可设为百分比，比硬扛 map/area 的像素刚性靠谱得多。
