map+area热区映射需usemap与map name严格一致（含#、大小写、符号），coords须按shape格式精确填写，响应式下必须JS动态缩放，area必须嵌套于map内且href、alt不可省略。
map + area 热区映射不是“写完就能用”的功能，而是“错一个字符就全失效”的精密匹配机制——浏览器不报错，只静默忽略。
usemap="#name" 和 <map name="name"> 必须逐字节一致
这是 90% 热区失效的根源。usemap 属性值必须以 # 开头，且后面字符串要和 <map> 的 name 属性**完全相同**：大小写、连字符、空格都不能差。
-
usemap="#product-map"✅ 对应<map name="product-map"> -
usemap="product-map"❌ 漏掉#，整个<map>被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map name="product_map">❌ 下划线 vs 连字符，不匹配
调试时打开开发者工具，检查 <img> 元素的 usemap 值和对应 <map> 的 name 是否真的一模一样——别靠肉眼扫，复制粘贴比对。
area 的 coords 必须按 shape 格式严格填写
coords 不是“随便填的数字”，它由 shape 类型决定解析逻辑；填错一位，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图。
立即学习“前端免费学习笔记（深入）”；
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2 -
shape="circle"→coords="cx,cy,r"：圆心坐标 + 半径，r必须为正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不自动闭合，但多数浏览器会补线——别依赖，手动重复第一个点更稳
常见错误：把设计稿里“居中坐标”直接当 coords 填；或把 poly 的坐标导出带了空格/换行，导致 Safari 静默跳过该区域。
响应式页面里热区必然错位，coords 永远基于原始尺寸
只要图片用了 width/height CSS 缩放、max-width: 100% 或在高 DPR 屏幕上渲染，coords 就立刻失准——这不是 bug，是原生机制限制。
- 原始图是
1200×800，你用img { width: 375px; height: auto; }显示，那coords="0,0,100,100"实际只占屏幕约31×21px，远低于触控推荐最小尺寸44×44px - 没有纯 HTML/CSS 方案能自动适配；唯一可靠解法是 JS 动态重算：
window.addEventListener('resize', updateCoords)+img.addEventListener('load', updateCoords) -
updateCoords()中读取img.naturalWidth和当前img.offsetWidth得到缩放比，再遍历所有<area>，把每个coords数值乘以比例后重新赋值
移动端尤其明显：测试务必在目标设备视口宽度下进行，别只在桌面调好就上线。
area 必须嵌套在 <map> 内，且 href 和 alt 不可省略
<area> 是空元素，不渲染、不响应事件，只在正确上下文中才生效。它不能独立存在，也不能放在 <div> 或 <figure> 里。
- ✅ 正确结构：
<map name="xxx"><area shape="rect" coords="..." href="..." alt="..."></map> - ❌ 错误写法：
<div><area ...></div>或<img><area ...></img>—— 浏览器直接忽略 -
href必须是有效 URL：./page.html#id或javascript:void(0)可用；纯#id不支持锚点跳转，且易触发 404 请求 -
alt不是可选：缺失会导致屏幕阅读器无法识别该区域意图，也违反 WCAG 基础可访问性要求
最容易被忽略的兼容性断点是 Shadow DOM：<img> 若在 Shadow Root 里，外部 <map> 默认不可见——这种场景建议直接改用 SVG。
