<area>热区必须配对<map>，且usemap="#name"与<map name="name">须逐字节一致（含#、大小写、连字符），否则静默失效；coords基于原图尺寸，响应式需JS重算，area须嵌套于map内并含href和alt。
直接说结论：用 <area> 做热区必须配对 <map>，且 usemap 和 name 必须逐字节一致（含 #、大小写、连字符），否则点击完全没反应——浏览器不报错，只静默失效。
usemap="#name" 和
这是 90% 热区不工作的根本原因。不是“差不多就行”，而是字节级校验：
-
usemap="#floorplan"✅ 必须对应<map name="floorplan"> -
usemap="floorplan"❌ 漏掉#，整个映射被忽略 -
usemap="#FloorPlan"❌ 大小写不一致，断连 -
<map id="floorplan">❌usemap不认id，只读name
建议命名统一用小写字母+连字符，比如 product-detail-map；调试时复制粘贴比对，别靠眼睛扫。
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,...,x1,y1"：顶点成对出现，总数必须是偶数；首尾点建议手动重复闭合，别依赖浏览器补线
Photoshop 或 Figma 导出的坐标常带空格或换行，coords 中只允许数字和逗号，多一个空格就可能导致 Safari 忽略该区域。
响应式页面中 coords 会偏移，必须用 JS 重算
coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的宽高。只要用了 max-width: 100% 或 width: 50%，热区立刻错位。
- 原始图 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数值乘以比例后重新赋值
如果项目已重度响应式，直接改用 SVG 替代更省心——矢量热区天然适配缩放，还支持完整 ARIA。
area 必须嵌套在 map 内，且 href 和 alt 不可省略
<area> 是空元素，不能自闭合（<area /> 是错的），且必须是 <map> 的直接子节点：
- 写在
<div>里、或<map>外，所有浏览器都会忽略 -
href必须是有效 URL：href="./page.html#detail"或href="javascript:void(0)"；href="#"或href="#section"在多数浏览器中不会触发跳转 -
alt是强制属性，W3C 规范要求：哪怕只是alt=""，也不能缺失；若带href，alt应说明目标（如alt="进入厨房详情页"），而非“点击此处”
最容易被忽略的兼容性断点：如果 <img> 在 Shadow DOM 里，外部 <map> 默认不可见——热区必然失效，且无任何提示。
