usemap与map的name必须逐字节匹配（含#、大小写、符号），coords基于原始图片尺寸，shape与coords格式须严格对应，area必须嵌套于map内且href、alt不可省略。
usemap 和 map 的 name 必须逐字节匹配
浏览器只认 usemap="#product-map" 这种写法，漏掉 #、大小写不一致、多一个空格，整个热区就静默失效——控制台不报错，图片点不动，检查元素也看不到高亮关联。
常见错误现象：usemap="product-map"（缺 #）、usemap="#Product-Map" 与 <map name="product-map"></map> 混用（大小写错）、usemap="#product_map" 和 name="product-map"（下划线 vs 连字符）。
- 统一用小写字母 + 连字符命名，例如
name="floor-plan"，对应usemap="#floor-plan" -
<map></map>标签建议同时写id和name，兼顾 HTML5 兼容性与 JS 查找便利性 -
<map></map>必须出现在内可渲染位置，不能藏在或注释里
shape 和 coords 格式必须严格对应
coords 不是“随便填的像素”，而是由 shape 决定的固定格式；填错一位，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
常见错误现象：shape="rect" 却写了 6 个坐标；shape="circle" 的半径为 0 或负数；shape="poly" 坐标总数是奇数（比如 5 个数字）导致 Safari 直接忽略该区域。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 正整数半径（r > 0） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,xn,yn"：坐标成对出现，总数必须是偶数；首尾点无需手动重复闭合（现代浏览器自动连线） - 别用
shape="default"做兜底——它会捕获所有未被其他area覆盖的点击，干扰调试
href 和 alt 是强制属性，不能省略
<area> 是空元素，不闭合（ 是错的），但它必须嵌套在 <map></map> 内部，且 href 和 alt 缺一不可。没 href，点击无跳转；没 alt，屏幕阅读器跳过该区域，Chrome 控制台还会报 warning。
常见错误现象：写 href="#" 或 href="" 导致跳转失败或触发 404 请求；纯锚点如 href="#section1" 在部分浏览器中不兼容，尤其当目标不在当前页时。
-
href必须是有效 URL，例如href="./detail.html#speaker"或href="javascript:void(0)"（配合 JS 处理） -
alt不是可选描述，而是可访问性必需项，应准确说明功能，例如alt="点击进入耳机参数页" - 不要把
<area>放在<div> 或其他容器里——它必须是 <code><map></map>的直接子节点响应式下 coords 会错位，必须用 JS 重算
coords永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片被缩放（比如max-width: 100%或width: 50%），热区立刻偏移——这不是 bug，是原生机制限制。移动端尤其明显：一张 1200×800 的图缩到 375px 宽，
coords="0,0,100,100"实际只占屏幕约 31×21px，远低于触控推荐最小尺寸 44×44px。- 监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords) - 在
updateCoords()中计算缩放比：scaleX = img.offsetWidth / img.naturalWidth，同理得scaleY - 遍历所有
area，解析其原始coords字符串，将每个数值乘以对应方向缩放比后重新赋值给area.coords - 如果项目重度响应式，优先考虑改用 SVG 矢量热区——天然支持缩放，无需手动重算
coords值永远绑定原始图片尺寸这个硬约束。很多人花几小时调坐标，却没意识到问题出在 CSS 缩放上。 - 监听
