shape属性仅接受rect、circle、poly、default四个严格小写字符串；coords值必须为纯像素整数且锚定原图尺寸，缩放会导致热区偏移，响应式场景应改用SVG或JS计算。
shape 属性只接受四个严格小写的字符串：rect、circle、poly、default。写错大小写、拼写或加空格，浏览器会静默忽略该 area，点击无响应，控制台也不报错——这是最常卡住排查的点。
shape="circle" 必须小写且 coords 顺序不能错
浏览器只认 circle，不是 Circle、circ（部分旧文档提过但现代标准不保证）、oval 或 round。一旦写错，区域彻底失效。
-
coords必须是三个正整数，格式为"cx,cy,r"，例如coords="120,90,25" - 圆心
cx、cy是像素值，从图片左上角(0,0)起算；r是半径，不能为0、负数或小数（如10.5会被截断或丢弃） - 坐标里不能有空格：
"120, 90, 25"中的空格会导致第二值被截成"90"，后续全丢 - 推荐用浏览器开发者工具的「截图测量」功能直接读像素值，手动估算误差常达 5–10px
shape="rect" 坐标是左上+右下，不是宽高
rect 对应的 coords 是四元组 "x1,y1,x2,y2"，不是 "x,y,width,height"。顺序和逻辑关系必须满足： x1 < x2 且 y1 < y2，否则区域不可点击。
- 常见误写：
coords="50,30,200,150"正确；coords="50,30,150,200"也正确；但coords="150,200,50,30"会失效 - 不要试图用百分比或 CSS 单位：
coords只接受纯数字像素值 - 该坐标系绑定原始图片尺寸，缩放后
area不随图缩放——响应式页面中这点极易出问题
poly 至少要 6 个数字，且必须成对
poly 定义多边形，coords 是顶点坐标序列，每两个数字是一对 (x,y)，至少需要三对（即 6 个整数），浏览器自动闭合首尾。
立即学习“前端免费学习笔记（深入）”；
- 正确示例：
coords="10,20,80,15,95,70"表示三角形 - 错误示例：
coords="10,20,80,15,95"（奇数个，丢最后一位）；coords="10,20,80,15,95,70,10,20"（重复首点，多余但不报错） - 所有坐标仍基于原图左上角像素坐标系，缩放后偏移无法避免
- 复杂图形建议改用 SVG，
<area>的poly编辑和调试成本远高于路径描点
真正容易被忽略的是：所有 coords 值都锚定在图片原始尺寸上，CSS 缩放、width/height 属性调整、object-fit 等都会让热点“偏移”或“缩成一个点”。这不是 bug，是规范行为——如果项目需要响应式热区，<map> + <area> 已不适合，该换 SVG 或 JS 计算了。
