coords必须严格匹配shape类型：rect为x1,y1,x2,y2（左上+右下），circle为cx,cy,r（圆心+半径），poly为至少三对x,y坐标；全为整数，不支持小数或百分比。
coords 值怎么写才被浏览器正确解析
coords 不是随便写的坐标列表，它必须严格匹配 shape 类型的格式要求，否则热区失效或错位。浏览器只按顺序读取数值，不校验合理性，所以写错也不会报错，只是点不中。
-
shape="rect"→coords="x1,y1,x2,y2"（左上、右下，注意不是宽高） -
shape="circle"→coords="cx,cy,r"（圆心 x、y 和半径，单位像素） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（至少 3 对坐标，首尾不自动闭合，但浏览器会闭合绘制） - 所有坐标值必须为整数，小数会被截断（如
10.7变成10）
为什么图片缩放后 area 热区就失灵了
因为 coords 是绝对像素值，绑定在原始图片尺寸上。只要 <img> 被 CSS 缩放、width/height 属性改变，或响应式布局导致实际渲染尺寸变化，热区就不再对齐。
- 最稳妥做法：用原图尺寸设置
<img>的width和height属性，并禁用 CSS 尺寸覆盖 - 若必须响应式，得用 JavaScript 动态重算
coords（基于img.naturalWidth与img.clientWidth比例缩放） - 不要依赖开发者工具里看到的“渲染后尺寸”去手调
coords——那是缩放后的，而area只认原始图尺寸
shape="default" 是什么，能用来兜底吗
shape="default" 表示整个图片区域，coords 被忽略。但它不是“没写 shape 时的默认值”，而是显式声明后才生效；且它不能和其他 area 共存于同一 map —— 浏览器会忽略后续所有 area。
- 想实现“其余区域跳转到首页”，得把
default的area放在map最后，且确保前面所有热区已精确覆盖目标区域 - 更可靠的做法：用 JS 监听
img的click事件，通过event.offsetX/Y手动判断是否落在已定义热区内，否则执行兜底逻辑 -
shape不写或写错（如"rectt"）时，浏览器按"rect"处理，但coords若不足 4 个值，该area直接被忽略
area 标签必须配合 usemap 才生效吗
是的，而且链接关系非常脆弱：<img usemap="#myMap"> 中的 #myMap 必须与 <map name="myMap"> 的 name 完全一致（区分大小写），且 map 必须在 DOM 中（不能动态插入后延迟生效）。
立即学习“前端免费学习笔记（深入）”；
-
usemap值带#，map的name不带#——写反就完全无效 - 多个图片复用同一
map是允许的，但所有热区坐标都基于各自图片的原始尺寸 - 如果
map在img后面，部分旧浏览器（如 IE8）可能无法关联，建议map放在img前或同级容器内
img 标签验证 coords 是否准确，再考虑缩放和兼容性问题。热区看不见摸不着，靠猜不如用 DevTools 的“元素选择器”悬停看 area 边框（Chrome/Firefox 支持），或者临时加 style="outline: 2px solid red" 查看渲染范围。 
