area标签本身不渲染也不响应点击，仅提供坐标映射；真正实现多边形热点的是++coords整套机制，coords需为整数像素值、逗号分隔、无空格、按顶点顺序排列，且usemap与map name必须严格匹配。
area 标签本身不渲染、不响应点击事件，它只是为 <img> 提供坐标映射信息；真正实现“不规则多边形链接定位”的，是 <map></map> + <area shape="poly"> + coords 坐标序列这一整套配合机制。
为什么 poly 形状的 coords 总是点不准
多边形热点失效，90% 是坐标系理解偏差或格式错误导致的。浏览器以图片左上角为原点 (0, 0)，X 向右、Y 向下递增——但很多工具导出的坐标默认是 SVG 坐标系（Y 向上）或含小数/百分比，而 area 的 coords 只接受整数像素值，且必须严格按顶点顺序列出，不能换行、不能空格分隔错位。
- 用开发者工具截图量取时，要确保图片未缩放（
img宽高未被 CSS 拉伸），否则坐标会偏移 -
coords值必须是纯数字逗号分隔，例如"100,200,150,180,180,220,130,240"，不能写成"100, 200, 150, 180..."（空格会导致截断） - 多边形自动闭合，无需重复首尾点；但顶点数至少为 3 对（6 个数字），少于则被忽略
usemap="#xxx" 和 map name 属性必须严格匹配
这是最常被忽略的关联环节。<img usemap="#worldmap"> 中的 #worldmap 必须与 <map name="worldmap"></map> 的 name 值完全一致（区分大小写），且 map 元素不能放在 外或 <template></template> 内——它得在 DOM 中可查找到。
-
id属性对关联无效，只认name - 如果页面有多个
map，别让name重复，否则浏览器可能随机绑定 - 动态插入
map时，需确保它在img渲染后已存在于 DOM，否则部分浏览器（如旧版 Safari）不识别
alt 属性不是可选的，而是无障碍刚需
没有 alt 的 <area> 在屏幕阅读器中完全不可见，WCAG 2.1 要求每个可交互区域都提供有意义的文本替代。它不只是“图片加载失败时显示”，更是语音导航时的唯一操作提示。
- 避免写
alt=""或alt="点击这里"这类无意义内容 - 应描述区域功能，例如
alt="法国区域，点击查看法国旅游指南" -
title可作为悬停提示补充，但不能替代alt
响应式场景下 coords 会失效，必须手动适配
原生 area 不支持百分比坐标（HTML5 已废弃该用法），图片缩放后，固定像素坐标必然错位。这不是 bug，是规范限制。
- 纯静态页且图片尺寸固定，直接写死
coords即可 - 带
max-width: 100%或vw单位的响应式图，必须用 JS 动态重算坐标——监听resize，按缩放比例重新设置area.coords - 更稳妥的替代方案是改用
<svg></svg>：路径<path></path>天然响应式，支持viewBox和事件委托，复杂热区维护成本更低
真正难的不是写对 shape="poly"，而是让那串数字坐标在各种设备、缩放、加载时机下始终指向正确位置——这需要你把 area 当作一个坐标协议来对待，而不是一个现成的 UI 组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
