area标签shape属性合法值仅有rect、circle、poly、default四个；其中default不依赖coords，其余三者必须配合coords使用，且coords坐标基于图像原始尺寸左上角(0,0)的像素值。
area 标签的 shape 属性有哪些合法值
shape 决定点击区域的几何类型，浏览器只认四个值：rect、circle、poly、default。其中 default 表示整个图像区域，不依赖 coords；其余三个必须配 coords 才生效。
常见错误是把 shape="square" 或 shape="triangle" 当作合法值——这些根本不会被解析，浏览器会退化为 rect 或直接忽略该 area。
-
rect：需 4 个值，格式为x1,y1,x2,y2（左上角 + 右下角） -
circle：需 3 个值，格式为cx,cy,r（圆心 x、y + 半径） -
poly：至少 6 个值，每对x,y构成一个顶点，如x1,y1,x2,y2,x3,y3
coords 坐标怎么数？起点是哪
所有 coords 值都是相对于 <img> 元素**左上角像素点 (0,0)** 的绝对坐标，单位是像素。不是百分比，也不受 CSS 缩放影响（除非你用 usemap 配合原图尺寸）。
容易踩坑的是：导出坐标时用了截图工具或设计稿标注，但没确认图像原始尺寸。比如一张 800×600 的图，在页面里被 CSS 缩放到 400×300，此时你按缩放后尺寸取的坐标（如 100,50,200,150）会错位——必须按原图像素取。
- 用浏览器开发者工具打开图片链接，右键“在新标签页中打开”，看地址栏 URL 对应的真实尺寸
- 用
<img style="max-width:90%" style="max-width:90%">显式声明尺寸，避免渲染差异 - 坐标顺序不能颠倒：例如
rect必须是左上→右下，写成x2,y2,x1,y1会导致区域消失
为什么点击 area 没反应？常见失效原因
最常被忽略的是 <img> 没绑定 usemap，或者 usemap 值和 <map></map> 的 name 不匹配。注意：usemap 值要带 # 前缀，而 <map></map> 的 name 不带。
另一个隐蔽问题是：多个 area 区域重叠时，DOM 中靠后的元素会覆盖前面的（z-index 无效），导致前面的点不中。这不是 bug，是规范行为。
- 检查控制台是否报
Failed to load resource: net::ERR_FILE_NOT_FOUND—— 说明usemap="#xxx"指向的<map name="xxx"></map>根本不存在 -
area不支持onclick直接内联，得靠 JavaScript 绑定事件，或用href跳转 - 如果图像用
background-image实现，area完全无效——它只作用于<img>标签
poly 形状画歪了？顶点顺序和闭合问题
poly 不自动闭合路径，但浏览器会隐式连接首尾点形成封闭区域。这意味着如果你漏掉最后一个点，或重复写了起点，坐标列表奇数个，结果可能不可预测。
更麻烦的是：顶点顺序影响抗锯齿和点击判定。顺时针/逆时针都行，但交叉多边形（如五角星）必须确保顶点按轮廓走向依次列出，否则内部挖空或反色区域会被误判。
- 用在线工具（如 ImageMap.net）生成坐标，别手算
- 复制坐标后，用逗号分隔检查数字个数是否为偶数（每个点两个数）
- 调试时临时加
style="outline: 1px solid red"到area—— 不生效，但可改用 JS 在 canvas 上绘出对应多边形对比
实际用起来，最难的不是语法，而是坐标和图像原始尺寸的咬合。一旦图变、尺寸变、缩放变，所有 coords 都得重算。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
