area标签不制作地图，仅定义热区；关键在坐标精准、usemap与name严格匹配（usemap带#而name不带）、图片未被CSS拉伸——任一出错则点击失效。
直接说结论：area 标签本身不“制作”地图，它只是定义热区的语法载体；真正能用起来的关键是坐标准、usemap 和 name 对得上、图片尺寸没被 CSS 拉伸变形——这三点错一个，点击就失效。
usemap="#xxx" 和
这是最常卡住人的地方。浏览器不会报错，但点击完全没反应。
-
usemap属性值必须带#前缀，比如usemap="#china-map" -
<map>的name属性值**不能带#**，必须写成<map name="china-map"> - 大小写敏感：写成
usemap="#China-Map"但<map name="china-map">就会断连 - 检查控制台是否出现
Failed to load resource: net::ERR_FILE_NOT_FOUND—— 这说明浏览器在找一个根本不存在的<map>
coords 坐标必须按原始图片像素取，且为偶数个整数
所有 coords 值都基于图片**原始尺寸左上角 (0,0)**，不是你页面里渲染出来的尺寸，也不是设计稿标注的百分比。
- 先右键图片 → “在新标签页中打开”，看 URL 对应的真实宽高（比如
map-china-800x600.png） - 用
<img width="800" height="600">显式声明尺寸，避免浏览器重排导致坐标偏移 -
poly至少要 6 个数字（3 个点），且必须是偶数个；rect要 4 个，circle要 3 个 —— 多一个空格、少一个逗号、奇数个值，Safari 和 Firefox 可能直接忽略该area - 导出坐标时，别信 UI 给的“标注图”，要确认工具输出的是原始图尺寸下的像素值（例如 MapEdit 或 Image Map Generator）
href 写法决定跳转是否生效
纯 #id 不行，javascript:void(0) 可以但需配 JS，浏览器对锚点跳转支持极差。
立即学习“前端免费学习笔记（深入）”；
- 有效写法：
href="./provinces.html#beijing"、href="https://example.com"、href="javascript:void(0)" - 无效写法：
href="#beijing"（会被当成相对路径请求/#beijing，404）、href=""（同理） - 想做点击弹层或高亮？别依赖
onclick内联属性 ——area不支持事件冒泡到它身上，得用 JS 监听img的click事件，再用document.elementFromPoint(x, y)或坐标比对判断点在哪块area
移动端和响应式下热区容易失灵
area 坐标不会随 CSS 缩放自适应，这是硬伤，不是 bug。
- 如果图片用了
width: 100%; height: auto，原始 800×600 的图缩到 400px 宽，你写的coords="100,50,200,150"就全偏了 - 临时调试：给
<img>加style="outline: 2px solid red"，再用开发者工具的 “Toggle element screenshot” 功能叠在图片上比对位置 - iOS Safari 对小面积
poly热区响应迟钝，建议最小物理尺寸 ≥ 44×44px（按原始图算），否则手指点不中 - 真要响应式，别死磕
<map>—— 改用 SVG +<path>，或者上 Leaflet（哪怕不用底图，只用它的多边形绘制和点面判断能力）
最麻烦的其实是坐标校准：同一张图，在 PS 里取一次、在 Figma 里量一次、用 MapEdit 描一次，三个结果可能都不一样。别省这一步，拿真实设备点十次，确认每个省都能稳稳触发。
