usemap与map name必须逐字节一致（含#、大小写、符号），coords格式须匹配shape类型，响应式需JS动态缩放坐标，area必须同时含href和alt。
usemap 和 map name 不匹配，热区完全不响应
这是最常卡住的地方：浏览器不会报错，只会静默忽略整个 <map>。必须确保 usemap 属性值以 # 开头，且后面字符串与 <map name="xxx"> 的 name 属性**逐字节一致**——大小写、连字符、空格、有无下划线，差一个就失效。
常见错误示例：
-
usemap="product-map"❌ 漏掉#，<map>被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map name="product_map">❌ 下划线 vs 连字符，不匹配
调试时别靠肉眼扫，直接复制 usemap 值，粘贴到开发者工具中搜索对应 <map name="...">，确认是否真的一模一样。
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,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，手动重复第一个点更稳
设计稿给的是“居中坐标”？别直接填。所有坐标必须以整张图左上角为 (0, 0)，向右为 x 正方向，向下为 y 正方向。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
响应式下图片缩放，坐标全部错位
原生 <map> 没有响应式能力。CSS 缩放、max-width: 100%、vw 单位都会让固定像素坐标失效——移动端几乎必错位。
必须在 JS 中动态重算：
- 记录原始尺寸：
const naturalW = img.naturalWidth; const naturalH = img.naturalHeight; - 计算缩放比：
const scaleX = img.offsetWidth / naturalW; const scaleY = img.offsetHeight / naturalH; - 遍历每个
<area>，按shape类型分别处理：
矩形缩放全部 4 个值，圆形缩放圆心 + 半径，多边形逐对缩放x/y - 监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords)
临时验证可用：img { border: 1px solid red; }，再用开发者工具「截图选区」比对坐标是否对齐。
area 缺 href 或 alt，语义与兼容性双崩
<area> 标签必须同时含 href 和 alt，否则功能和可访问性都会出问题。
缺 href：点击无跳转行为，链接无效；
缺 alt：屏幕阅读器无法读出功能，旧版 Safari 会直接忽略该区域。
即使只是做交互占位，也建议写 href="#" + alt="描述性文字"，而不是留空或删掉属性。
真正麻烦的不是写错，而是写漏——尤其多人协作时，alt 最容易被当成“可选”跳过，结果上线后无障碍审查直接失败。
