coords属性必须严格按shape取值顺序书写坐标，否则热点错位；rect需2点、circle需3点、poly至少3点且自动闭合；图片缩放后coords须按原始尺寸换算；area必须嵌入map并通过usemap正确关联。
coords属性必须按顺序写对坐标点，否则热点错位
HTML <area> 标签的 coords 是纯数字列表，具体格式完全取决于 shape 的取值。浏览器不会校验你写的数字是否合法，错一位、少一个、多一个都会导致热点区域偏移或失效。
常见错误现象：shape="rect" 却写了 6 个数字；shape="poly" 最后没闭合（首尾点不重合）；用中文逗号或空格混用分隔坐标。
-
shape="rect"→coords="x1,y1,x2,y2"（左上、右下，注意不是宽高） -
shape="circle"→coords="cx,cy,r"（圆心 x、y 和半径） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,xn,yn"（至少 3 个点，自动首尾闭合）
shape取值只有 rect/circle/poly/defaults，没有 round 或 oval
很多人搜“椭圆热点”或“圆角矩形”，但 HTML 原生 <area> 只支持四种 shape：严格区分大小写，且不支持扩展。所谓“圆角”“椭圆”“文字区域”都得靠 CSS + JS 模拟，不能靠 shape 属性实现。
容易踩的坑：shape="oval" 或 shape="rounded" 在任何浏览器里都等价于 shape="rect"（降级处理），但控制台不会报错，只会默默失效。
- 想支持不规则图形？用
shape="poly"手动描点，或改用 SVG<path> - 想响应鼠标悬停提示？
title属性有效，但alt在现代浏览器中已不显示 - 移动端点击热区小？确保 poly 至少有 3 组坐标，且相邻点间距不宜小于 8px
coords单位是像素，基准是整个<img>的原始尺寸
coords 的数值永远相对于图片原始分辨率（即 <img src> 文件本身的宽高），不是 CSS 缩放后的显示尺寸。如果图片被 width/height 或 CSS 缩放过，coords 必须按比例换算，否则热点会严重偏移。
典型问题：一张 800×600 的图，CSS 设为 width: 400px，那 coords="0,0,800,600" 会覆盖整个缩放后图像 —— 但实际只覆盖左上四分之一区域，因为浏览器仍按原始像素解析。
- 最稳做法：用
<img>的naturalWidth/naturalHeight获取原始尺寸，再按缩放比反推coords - 懒人方案：给图片加
width和height属性（非 CSS），让渲染尺寸与原始一致 - 调试技巧：临时加
border: 1px solid red到<img>，用开发者工具测真实渲染尺寸
area标签必须嵌在<map>内，且usemap指向正确
<area> 本身不渲染，也不生效，必须包裹在 <map> 中，并通过 <img usemap="#xxx"> 关联。名字不匹配、ID 写错、# 号遗漏，都会让所有热点失效，且无任何提示。
错误示例：<img usemap="mymap">（缺 #）、<map name="map1"> 对应 usemap="#mymap"（name 和 usemap 值不一致）。
-
<map>的name属性值必须和<img>的usemap值（去掉 # 后）完全一致，包括大小写 - 一个
<map>可包含多个<area>，但每个<area>的href或onclick需独立处理逻辑 - 如果用 JS 动态插入
<area>，要确保<map>已存在于 DOM 中，否则 IE 和旧版 Safari 可能不识别
实际用的时候，最常出问题的是 coords 数字没按 shape 对齐、图片缩放后忘了换算、usemap 的 # 号手滑删了——这三个点卡住，整个热点就“看起来写了，但点不动”。
