area标签的shape属性仅接受rect、circle、poly、default四个严格小写值，coords必须严格匹配：rect需4个整数（x1,y1,x2,y2），circle需3个（cx,cy,r），poly需偶数个（至少6个），default不需coords；所有坐标基于图片原始尺寸，不可缩放适配。
coords 参数不是“写对就行”，而是必须和 shape 严格配对、基于原图尺寸、纯整数无空格——错一位、多一个空格、缩放后直接点不中。
shape 和 coords 必须一对一匹配
浏览器只认四个合法 shape 值：rect、circle、poly、default。其他如 rectangle、oval、square 全部被忽略，area 区域直接失效。
-
shape="rect"→coords必须是且仅是 4 个整数：x1,y1,x2,y2，顺序是左上角 + 右下角；要求x1 < x2且y1 < y2，否则区域不可点 -
shape="circle"→coords必须是且仅是 3 个整数：cx,cy,r，r必须为正整数（0或负数、小数如10.5会被静默丢弃） -
shape="poly"→coords必须是偶数个整数，至少 6 个（即 3 个顶点），按顶点顺序列出：x1,y1,x2,y2,x3,y3；浏览器自动闭合，无需重复首坐标 -
shape="default"→ 不需要coords，也不允许写；它覆盖所有未被其他area覆盖的图像区域
coords 坐标永远基于原始图片尺寸
无论你用 CSS 缩放、img 标签加 width/height，还是响应式布局拉伸图片，coords 的数值始终以图片原始像素宽高为基准计算。
- 一张 1200×800 的图，用
<img width="600">显示，那么coords="300,150,500,250"仍指原图上那块 200×100 的区域——浏览器会自动按比例映射到缩小后的画面上 - 千万别把 Photoshop 里量出的“显示尺寸坐标”直接填进去，比如在 600px 宽视图下量出 (150,75)，就写成
coords="150,75,250,125"，这会导致热点严重偏移 - 导出坐标时务必确认工具输出的是像素值而非百分比、em 或 SVG 坐标系（Y 向上）；Figma/Photoshop 量取后要手动转成整数、删空格、去换行
常见 coords 格式错误与调试现象
浏览器对 coords 字符串不做逻辑校验，只按逗号切分、转整数。格式错，区域就废，但不会报错——你只能靠点击行为反推问题。
立即学习“前端免费学习笔记（深入）”；
-
coords="100, 200, 150, 180"中的空格会让第二项变成"200 "，后续全截断，实际只剩100,200→shape="rect"少两个数，区域消失 -
shape="poly"写了 5 个数字（奇数），浏览器无法成对解析，整个area被跳过 -
shape="rect"却写了 6 个数：coords="10,20,100,80,150,120"，多余数字被忽略，但前 4 个可能已错位（比如本意是 poly 却写成 rect） - 用开发者工具检查时，发现
area元素存在但点击无反应？先查usemap="#xxx"和<map name="xxx">是否完全一致（大小写敏感）、map是否在 DOM 中可访问（不在<template>或<head>里）
响应式页面中 coords 失效怎么办
原生 area 不支持百分比或相对单位，coords 是硬编码像素值。只要图片尺寸随视口变化，固定坐标必然错位。
- 静态页且图片尺寸绝对固定（如 banner 图宽高写死），直接写死
coords即可 - 带
max-width: 100%、vw或 JS 动态缩放的图，必须用 JS 监听resize，根据当前img.naturalWidth/img.clientWidth算出缩放比，再批量重设所有area.coords - 复杂热区、频繁变更、需无障碍支持的场景，优先考虑用
<svg>替代：<path>支持viewBox、事件委托、语义化 ARIA，维护成本远低于手动换算 coords
最常被忽略的其实是坐标系起点和空格——你复制粘贴的那串数字，开头或逗号后有没有看不见的空格？量坐标时图片是不是被 CSS 拉伸过？这两个点卡住绝大多数人。
