area的coords值必须为纯整数、无单位、无小数、无空格，且poly形状下总数须为偶数；坐标基于图片naturalwidth/naturalheight，受css缩放影响；多个area按dom顺序响应，usemap与map name须严格一致。
area 的 coords 值必须是纯整数，不能带单位或小数
浏览器解析 coords 时只认逗号分隔的整数序列，比如 "120,80,135,60,150,80" 是合法的，但 "120px,80px"、"120.5,80.3" 或 "120, 80"（含空格）都会导致整个 <area> 失效——点击无响应，开发者工具里也看不到高亮区域。
常见错误现象包括：区域飘在图外、变成一条细线、或完全不触发。这类问题 90% 出在坐标格式上，不是逻辑写错，而是字符串没过浏览器的语法校验。
- 用
parseInt()或正则/\d+/g清洗导出坐标时务必确认没有残留小数点或单位 - 手敲坐标前先删掉所有空格和换行，避免复制粘贴引入不可见字符
- Chrome DevTools 的 Elements 面板悬停
<area>时，如果右侧 Styles 栏里coords值显示为红色或带下划线，说明解析失败
poly 形状的 coords 必须成对且总数为偶数
shape="poly" 的 coords 是严格按顺序两两配对的：x1,y1 是第一个点，x2,y2 是第二个点……少一个、多一个、错一位，整个多边形顶点就会偏移。例如 "100,50,120,40,140,50" 只有 6 个数，解析为 (100,50)→(120,40)→(140,50)，自动闭合回 (100,50)；但如果写成 "100,50,120,40,140"（5 个数），浏览器会丢弃末尾的 140，只剩前 4 个数 → (100,50)→(120,40)，结果是一条线段。
- 用
coords.split(',').length % 2 !== 0在 JS 初始化时快速校验是否偶数 - 不要手动重复首尾点，
"100,50,120,40,140,50,100,50"会导致第 4 对点覆盖预期形状 - 描点顺序决定连线路径，逆时针/顺时针都行，但跳点（如把“左耳尖→右耳尖→下巴”写成“左耳尖→下巴→右耳尖”）会让连线横穿图形内部
coords 坐标必须基于图片 naturalWidth / naturalHeight 取点
coords 的单位是像素，原点在图片左上角 (0,0)，但它绑定的是图片原始尺寸，不是渲染后的宽高。如果 <img> 设置了 width="100%"、max-width:100% 或 CSS transform: scale()，坐标就立刻失准——点再准也没用。
- 调试时先在控制台执行
document.querySelector('img').naturalWidth和offsetWidth，对比两者比值，若不等于 1，说明存在缩放 - 用 Chrome 的 “Rendering” 设置开启 “Emulate CSS media” 查看 DPR 变化影响
- 响应式场景别硬算比例，要么换 SVG，要么用 JS 监听
resize+img.naturalWidth动态重写coords
多个 area 重叠时 DOM 顺序决定点击优先级
浏览器按 <area> 在 <map></map> 中出现的顺序处理点击事件：前面的区域会挡住后面的，即使视觉上后者更大或更靠上。这不是 z-index 能改的，是 HTML 图像映射的固有行为。
- 调试时临时删掉其他
<area>，只留一个测是否生效，排除遮挡干扰 - 把大范围默认区域（如
shape="default"）放在<map></map>最后，否则它会吞掉所有后续定义 - usemap 的
#xxx必须和<map name="xxx"></map>完全一致（大小写、有无 #），错一个字符就断连
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
