area标签需严格匹配usemap与map的name属性，coords须按shape规范填写并动态适配缩放，href和alt不可省略，且area必须为map直接子元素。
area 标签本身不支持纯 #id 锚点跳转，写 href="#detail" 会静默失效——浏览器把它当相对路径请求，最终报 Failed to load resource；必须用完整 URL（如 href="./product.html#detail"）或 javascript:void(0) 配合 JS 处理。
usemap 和 map name 必须逐字节匹配
这是热区失效最常见原因。浏览器对大小写、符号、空格全敏感，漏一个 # 就断连。
-
usemap="#product-map"✅ 必须配<map name="product-map"> -
usemap="product-map"❌ 没#，整个映射被忽略 -
<map id="product-map">❌usemap不认id，只读name - 建议统一用小写字母 + 连字符命名，调试时复制粘贴比对，别靠肉眼扫
shape 和 coords 格式错一位，热区就偏到画布外
coords 不是“随便填的像素”，它和 shape 强绑定，填错会导致区域缩成一点、覆盖整张图，甚至被 Safari 直接忽略。
-
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,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，手动重复第一个点更稳（如三角形写 6 个值，不是 4 个） - 别用
shape="default"做兜底：它会捕获所有未被其他area覆盖的点击，干扰调试
响应式页面里 coords 会错位，JS 重算是唯一可靠解法
coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片被缩放（比如 max-width: 100%），热区立刻偏移。
- 原始图是 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 矢量热区，天然支持缩放
area 必须嵌套在 map 内，且 href、alt 不可省略
area 是空元素，不能自闭合（<area /> 是错的），且必须是 map 的直接子节点；放在 div 里、或写在 map 外，所有浏览器都会忽略它。
立即学习“前端免费学习笔记（深入）”；
-
href是必需属性：没href，点击无跳转，部分旧浏览器也不会触发绑定的 JS click 事件 -
alt是必需属性：没alt，无障碍支持直接失效，Chrome 控制台会报 warning；即使只是空字符串alt=""，也得写上 -
map标签不能嵌套，且必须与img在同一 DOM 上下文；如果img在 Shadow DOM 里，外部map默认不可见——这是最容易被忽略的兼容性断点
coords 看似填对了，却因图片缩放、usemap 少了个 #、或者 poly 坐标数是奇数，导致热区完全不响应——浏览器不报错，只让你反复点不动。 
