shape属性仅接受rect、circle、poly、default四个严格小写字符串；coords须与shape精确匹配数量和语义；usemap与map name必须逐字符一致；响应式缩放下coords不自适应，需js重算或改用svg。
shape属性只认这四个小写字符串
浏览器对 shape 的取值完全不宽容，写错一个字母、大小写不对、多一个空格，整个 area 就静默失效——点击无反应，控制台也不报错，排查时极易卡住。
真正合法的只有以下四个严格小写的值：
-
rect：矩形区域，必须配 4 个整数坐标 -
circle：圆形区域，必须配 3 个整数坐标 -
poly：多边形区域，必须配至少 6 个整数坐标（即 ≥3 对顶点） -
default：覆盖图像其余未被其他area覆盖的部分，不能带coords
常见无效写法包括：Shape="Circle"、shape="oval"、shape="polygon"、shape="square"、shape="triangle"。这些都不会触发错误，但浏览器直接忽略该区域。
coords格式必须和shape一一对应
coords 不是“随便填几个数字”，它必须严格匹配 shape 的几何语义和数量要求，否则热区偏移、缩成点，甚至彻底消失。
-
shape="rect"→coords="x1,y1,x2,y2"，且必须满足x1 且 <code>y1 ；不是宽高，也不是中心点+半径 -
shape="circle"→coords="cx,cy,r"，r必须是正整数（0或负数、小数如12.5会被静默丢弃） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."，必须偶数个整数，至少 6 个；顶点按顺序连接，浏览器自动闭合，**不要重复首坐标** -
shape="default"→ 不能写coords，写了也无效
所有坐标单位都是原始图片的像素值，原点在左上角 (0,0)；任何空格、百分比、单位符号（如 px）、小数点，都会导致解析失败。
usemap 和 map name 必须逐字符一致
<img usemap="#hotmap"> 中的 #hotmap 必须和 <map name="hotmap"></map> 中的 name 值**完全相同**：大小写、有无空格、是否带 # 全部算在内。
-
usemap="#HotMap"≠name="hotmap" -
usemap="#hotmap "（末尾空格）≠name="hotmap" -
usemap="hotmap"（缺#）→ 完全不匹配，map被忽略
调试时直接打开 DevTools，检查 DOM 中是否存在 <map name="xxx"></map>，再确认其 name 是否与 usemap 的 # 后部分**逐字符相等**。
响应式图片下 coords 不会缩放，这是设计限制
原生 area 的坐标是固定像素值，一旦图片用 width: 100%、max-width 或 object-fit 缩放，热区就必然偏移失效——这不是 bug，是规范如此。
这意味着：
- 用 CSS 缩放
<img>时，coords仍按原始尺寸计算，无法自适应 - 想实现响应式热点，要么用 JS 动态重算坐标（需监听 resize + 获取原始尺寸 + 比例换算），要么直接改用
<svg></svg>替代 - 工具取坐标时，务必基于原始图尺寸（如 Photoshop 信息面板、DevTools 截图测量），别依赖浏览器渲染后的尺寸
最容易被忽略的是：问题常出现在开发时图片未缩放（一切正常），上线后加了响应式样式，热区突然失灵——此时第一反应不该是“代码写错了”，而是检查坐标是否还适配当前渲染尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
