合法shape值仅有rect、circle、poly、default四个；coords必须严格匹配shape格式：rect需4个整数（x1,y1,x2,y2），circle需3个整数（cx,cy,r），poly至少6个整数，且所有坐标基于原图尺寸，不随缩放自适应。
shape 属性只能是 rect/circle/poly/default 四个值
浏览器根本不认 shape="square"、shape="oval" 或 shape="rounded" 这类写法——它们不会报错，但会直接降级为 rect 或被忽略，导致热点区域完全不对。你看到的“圆形按钮”或“不规则图标”点击失效，八成是 shape 写错了。
真正合法的只有四个字符串：rect（矩形）、circle（圆形）、poly（多边形）、default（默认区，覆盖所有未被其他 area 覆盖的图像区域）。其中 default 是唯一不需要 coords 的。
-
shape="rect"必须配 4 个数字，顺序是x1,y1,x2,y2，不是宽高，也不是中心点 + 半宽半高 -
shape="circle"必须配 3 个数字：cx,cy,r，r必须是正整数，10.5或-3会被浏览器静默丢弃 -
shape="poly"至少要 6 个数字（即 3 对坐标），顶点按绘制顺序列，首尾无需重复——浏览器自动闭合
coords 坐标必须严格匹配 shape 的格式和数量
浏览器对 coords 字符串只做简单拆分（按英文逗号）和类型转换，不校验逻辑合法性。少一位、多一位、顺序错一位，热点就偏移、缩成点，甚至彻底消失。
常见错误现象包括：shape="rect" 却写了 coords="10,20,100,80,150,120"（6 个数）；shape="poly" 写了奇数个数字（比如 5 个）；坐标里混入空格："100, 200" 中的空格会让第二值截断为 "200" 后面全丢。
- 矩形：
coords="x1,y1,x2,y2"，且必须满足x1 < x2且y1 < y2，否则区域不可点 - 圆形：
coords="cx,cy,r"，r为像素值，不能为 0 或负数 - 多边形：
coords="x1,y1,x2,y2,x3,y3,..."，每对x,y是一个顶点，至少三对；浏览器自动连接最后一点回第一点，不需重复首坐标 - 所有坐标基于图像原始尺寸的左上角
(0,0)，图片缩放后 coords 不会自适应——得手动换算
coords 坐标系和图像缩放带来的坑
你用的是 <img width="300"> 显示一张 1200×800 的原图？那 coords 还得按 1200×800 算，不能直接套 300px 宽度下的像素位置。很多热区点不中，就是因为忘了这层换算。
例如原图宽 1200px，你在 Photoshop 里量出某按钮左上角是 (300, 150)，右下角是 (500, 250)，那 coords="300,150,500,250" 才对。如果 img 标签加了 width="600"（等比缩放到一半），坐标依然用原图尺寸，浏览器会自动映射过去——你不能改成 "150,75,250,125"，那会错位。
- 绝对不要在
coords里写百分比、em、rem 或其他单位，只接受纯整数像素值 - 坐标超出图像边界（比如
y值大于图片高度）会被浏览器忽略，该区域不可点 - 多个
area区域重叠时，DOM 顺序靠前的优先响应点击，后定义的会被遮挡
area 必须嵌在 map 里，且 img 必须正确 usemap 关联
area 标签本身不生效，它只是 map 的子元素。漏掉 map 或 usemap 指向错误，整个热区就等于没写。
关联靠的是 <img usemap="#myMap"> 和 <map name="myMap"> 的 name 匹配（注意 # 只出现在 usemap 值里，name 属性里没有）。大小写敏感，name="mymap" 和 usemap="#MyMap" 就不匹配。
-
<map>可以有id，但usemap只认name，id不起作用 -
area的href和alt不是可选的“锦上添花”，而是必要属性：没有href就没链接行为，没有alt会影响可访问性审查 - 调试时打开浏览器开发者工具，检查
map是否被正确解析（Elements 面板里能看到嵌套结构），再看area的coords是否被解析为有效数值（hover 时 DevTools 会高亮热区）
shape 和 coords 数量/格式的硬性对应关系——它们不是“差不多就行”的配置项，而是浏览器按固定规则硬解析的字符串。 
