area标签的shape属性合法取值为rect、circle、poly和default，分别对应矩形、圆形、多边形和整个图像区域，其他值如triangle、oval等均不合法。
area 标签的 shape 属性取值有哪些
HTML 中 <area> 的 shape 属性决定热点区域形状，只有四个合法值：rect、circle、poly、default。浏览器忽略其他字符串（比如 square 或 ellipse），会退化为 rect 行为或直接失效。
常见误写是把 poly 拼成 polygon，或把 rect 写成 rectangle —— 这些都会导致区域不响应点击。
-
rect：需 4 个坐标，格式为x1,y1,x2,y2（左上 + 右下） -
circle：需 3 个坐标，格式为cx,cy,r（圆心 x、y 和半径） -
poly：需偶数个坐标，按顺时针/逆时针顺序列出顶点，如x1,y1,x2,y2,x3,y3 -
default：覆盖整个图片，无需coords，但必须放在所有<area>最后
coords 坐标单位和参照系怎么算
coords 的数值单位是像素，原点在图片左上角（0,0），x 向右递增，y 向下递增。它**严格依赖 <img> 的实际渲染尺寸**，不是原始图片分辨率。
如果图片用 CSS 缩放（比如 width: 100%; height: auto），但没同步更新 coords，热点就会错位。现代做法是：要么用固定宽高的 <img>，要么用 JavaScript 动态换算坐标（需监听 resize）。
- 用
getBoundingClientRect()获取图片当前宽高，再按比例缩放原始coords - 避免用百分比值写死
coords（HTML 不支持） - 调试时可在控制台打印
document.querySelector('img').naturalWidth和offsetWidth对比缩放比
area 标签必须嵌套在 map 里才能生效
单独写 <area> 是无效的。它必须包裹在 <map> 元素中，且该 <map> 必须通过 img 的 usemap 属性绑定——注意 usemap 的值要带 # 前缀，比如 usemap="#hotmap" 对应 <map name="hotmap">。
常见错误包括：usemap 拼错 name、漏掉 #、<map> 放在 DOM 之外（如 <head> 里）、或多个 <map> name 重复导致绑定错乱。
-
<img src="a.jpg" usemap="#navmap">→ 必须有<map name="navmap"> - 一个
<map>可被多张图复用，但每张图只能绑定一个usemap -
<area>不支持tabindex，默认不可键盘聚焦；如需可访问性，得额外加 ARIA 属性
点击 area 触发跳转的链接怎么写
给 <area> 加 href 属性即可跳转，和 <a> 一样支持相对路径、绝对 URL、锚点甚至 javascript:void(0)。但要注意：target 属性只在 href 存在时生效，且浏览器策略可能阻止 target="_blank" 弹窗（尤其无用户手势触发时）。
如果想执行 JS 而非跳转，别用 href="javascript:..."，改用 onclick 事件更可控。但需手动调用 event.preventDefault() 防止默认跳转行为。
- 推荐写法：
<area shape="rect" coords="10,10,50,50" href="/product?id=123" target="_self"> - JS 处理：
<area ... onclick="handleClick(event); return false;"> - 不支持
download属性，无法直接下载文件
复杂交互建议用 SVG 替代 image map —— 坐标更稳定、支持 CSS 动画、无障碍语义也更清晰。但若必须用 <area>，务必验证各浏览器对 shape 和 coords 的解析一致性，尤其是 Safari 对小数坐标的截断行为。
