区域映射需严格匹配usemap与map的name字符串，coords格式依shape而定且基于原始图片尺寸，响应式下必须JS动态重算缩放比，alt属性强制要求以保障可访问性与SEO。
区域映射（map+area）不是“给图片加按钮”，而是“在图片上铺一层透明坐标网格”——点击哪块，就触发对应 href，浏览器原生支持，但容错率极低，写错一个字符热区就彻底失效。
usemap 和 map 的 name 必须逐字节一致
这是 90% 热区不响应的根源。浏览器做的是严格字符串匹配，大小写、空格、#号、连字符全算在内。
-
<img usemap="#nav-map">→ 对应的<map name="nav-map">才有效；写成name="Nav-Map"或name="nav_map"都会静默失败 - 调试时别靠肉眼比对，右键图片 → “检查”，复制
usemap值，再选中map元素复制其name，用编辑器做纯文本比对 - 稳妥做法：同时写
id="nav-map"和name="nav-map"，避免老浏览器兼容问题
coords 格式由 shape 决定，填错就偏移或消失
coords 不是“随便写几个数字”，它是结构化坐标，每种 shape 要求不同格式，错一位就失准。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2；写反顺序（如"100,50,10,80"）会导致热区不可见 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 半径；r必须是正整数（0或小数如12.5会被忽略） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须为偶数；首尾不自动闭合，Safari 会直接跳过格式错误的poly - 所有坐标基于原始图片尺寸（
img.naturalWidth），不是 CSS 渲染宽高；缩放后热区必然错位
响应式场景下 coords 必须 JS 动态重算
没有纯 HTML/CSS 方案能适配缩放。只要图片用了 width: 100%、max-width 或 object-fit，热区就失效。
立即学习“前端免费学习笔记（深入）”；
- 需监听两个事件：
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords) - 在
updateCoords()中计算缩放比：scale = img.offsetWidth / img.naturalWidth，再遍历所有area，把每个coords字符串里的数字乘以scale后重新赋值 - 不要手动写死像素值；导出坐标时清理空格和换行——
coords中只允许数字和逗号
alt 属性不是可选，而是强制要求
每个 area 的 alt 属性既影响可访问性（屏幕阅读器依赖它），也影响 SEO，部分浏览器还会因缺失 alt 而跳过该热区解析。
-
<area shape="rect" coords="0,0,100,100" href="/home" alt="首页入口">是合规写法 -
alt=""不等于“没写”，但语义为空，仍建议写明用途 - 多个
area重叠时，DOM 顺序决定点击优先级——后面定义的会覆盖前面的，这点容易被忽略
真正难的不是写出来，而是让热区在各种缩放、加载时机、浏览器差异下都稳定命中；坐标一旦绑定原始尺寸，就再也无法脱离 JS 干预独立存活。
