coords属性值必须严格匹配shape类型：rect需4个坐标（x1,y1,x2,y2），circle需3个（cx,cy,r），poly至少6个（每对为顶点xy）；须用纯数字英文逗号分隔、无空格、无单位，且基于图片原始尺寸像素，不随css缩放变化。
coords属性值取决于shape类型，不是固定格式
直接写coords却点不中热区？大概率是坐标格式和shape没对上。这个属性本身不带单位、不写像素符号，纯数字用英文逗号分隔，但具体要写几个数、怎么排，完全由shape决定。
-
shape="rect"：必须4个数，顺序是x1,y1,x2,y2（左上角 + 右下角），比如coords="10,20,100,80" -
shape="circle"：必须3个数，cx,cy,r（圆心x、y + 半径），比如coords="60,50,30" -
shape="poly"：至少6个数，每两个一组表示一个顶点x,y，按绘制顺序排列，比如三角形写成coords="20,30,80,30,50,90" - 省略
shape时浏览器默认按rect解析，但别依赖这个——显式声明更安全
坐标原点在图片左上角，且以CSS像素为单位
很多人以为coords跟SVG坐标系一样可缩放，其实不是。它严格对应<img>原始尺寸的像素位置。如果图片被CSS拉伸（比如width: 100%），热区会错位。
- 最稳的做法：让
<img>保持原始宽高，或用object-fit: none禁用缩放 - 响应式场景下，不能只靠
coords——得用JavaScript动态重算坐标，或换<svg></svg>方案 - 调试时右键检查图片，看开发者工具里显示的自然尺寸（natural width/height），以此为准写
coords
常见错误：逗号空格混用、多写少写数字、坐标越界
浏览器对coords容错性差，错一位就整个热区失效，而且通常不报错，只是点不动。
- 禁止在逗号前后加空格：
coords="10, 20,30,40"→ 错，必须写成coords="10,20,30,40" -
poly少写一对坐标（比如只写4个数）会被当成rect处理，行为不可控 - 坐标值为负数或超过图片尺寸，热区可能消失或偏移到不可见区域——建议用
Math.min()截断校验 - 复制别人代码时容易漏掉最后的逗号或末尾多逗号，
coords="10,20,"这种直接无效
area标签必须配合usemap和img的map引用才生效
光写<area>没用，它只是定义，不自动挂载。必须通过usemap属性把<img>和<map></map>关联起来。
-
<img src="a.jpg" usemap="#mymap">中的#mymap要和<map name="mymap"></map>的name完全一致（区分大小写） -
<map></map>标签得放在<img>附近（DOM顺序无硬性要求，但放一起便于维护） - 多个
<area>可以共用一个<map></map>，不用每个都套<map></map> - 如果
usemap指向的name不存在，热区彻底静默，控制台也不提示
coords前，先确认这四件事都对得上。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
