rect形状coords必须为“left,top,right,bottom”四个像素值，usemap与map的name须完全匹配（含#、大小写、连字符），响应式下需按naturalWidth/offsetWidth等动态重算全部4个坐标值。
rect形状的coords必须是4个像素值，顺序不能错
写 shape="rect" 时，coords 必须严格为 "left,top,right,bottom" 四个数字，且 left
- 错误示例：
<area shape="rect" coords="100,50,20,80">（left=100 > right=20）→ 区域消失 - 正确写法：
<area shape="rect" coords="20,50,100,80">→ 左上(20,50)，右下(100,80) - 坐标系原点在图片左上角，单位是原始图像的像素，不是 CSS 渲染后的尺寸
usemap="#name" 和
这是最隐蔽也最常导致“点击没反应”的原因：大小写、空格、连字符、#号缺一不可。浏览器静默失败，不报错也不警告。
-
<img usemap="#product-map">对应的 - 漏掉
#（如写成usemap="product-map"）→ 整个 - name 值里含空格或中文？绝对不行，只允许字母、数字、连字符、下划线
响应式图片下矩形热区会偏移，必须手动重算 coords
CSS 缩放（比如 width: 100%; height: auto）不会自动缩放 <area> 的 coords。原始图 1200×800，页面显示为 600×400，那 coords="0,0,100,100" 实际仍按 1200×800 解析，点击位置会偏移到四分之一处。
- 必须监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords) - 用
img.naturalWidth/img.naturalHeight获取原始尺寸，再除以img.offsetWidth/img.offsetHeight得到缩放比 - 对每个
<area>的coords字符串做解析：矩形需缩放全部 4 个值，不能只缩放 x 或只缩放 y - 临时调试时加
border: 1px solid red到，再用开发者工具截图比对热区是否对齐
area 标签必须带 href 和 alt，否则语义与行为双失效
缺 href，点击无跳转；缺 alt，不仅屏幕阅读器无法播报，旧版 Safari 甚至直接跳过该 <area> 元素。
立即学习“前端免费学习笔记（深入）”；
-
alt不是可选的“辅助描述”，而是强制要求的语义属性，例如：alt="点击进入左侧产品详情" - 如果只是想触发 JS 事件（而非跳转），也要保留
href="#"或href="javascript:void(0)"，再用event.preventDefault()阻止默认行为 - 禁用跳转但又不写
href，某些安卓 WebView 会完全忽略点击事件
max-width: 100%; height: 200px），热区就彻底漂移。 
