usemap 与 map 的 name 必须完全一致（含大小写、符号、#号），coords 格式须严格匹配 shape 类型，响应式需 JS 动态缩放坐标，area 必嵌套于 map 内且 href、alt 不可省略。
usemap 和 name 必须逐字节一致，否则整个热区静默失效
浏览器不会报错，也不会提示，只是完全忽略 <map> —— 这是 90% 的人写完发现“点不动”的根本原因。不是语法错，是匹配失败。
-
usemap值必须以#开头，比如usemap="#product-map"；<map name="product-map">才能连上 -
usemap="#Product-Map"❌ 大小写不一致 → 断连 -
usemap="product-map"❌ 漏掉#→ 整个<map>被跳过 -
<map name="product_map">❌ 下划线 vs 连字符 → 不匹配
调试时别靠眼睛扫，直接在开发者工具里复制 usemap 的值，再复制 <map> 的 name，用文本比对工具（或 VS Code 的 “Compare Selected Text”）确认是否完全相同。
coords 填错一位，热区就偏到画布外或缩成一个点
坐标不是“随便填的数字”，它由 shape 类型严格决定解析逻辑。填错格式、顺序、数量，浏览器照样解析 HTML，但热区位置会彻底失真。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 < x2且y1 < y2；反序会导致热区不可点击 -
shape="circle"→coords="cx,cy,r"：半径r必须是正整数（不能是0或小数），coords="100,80,5.5"在 Safari 中会被静默跳过 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点数必须为偶数；导出坐标时若含空格/换行（如"10,20, 30,40"），部分浏览器会截断解析
设计稿里标的是“居中坐标”？别直接抄——所有 coords 都以图片左上角为原点 (0,0)，x 向右、y 向下。用 Photoshop 的“信息面板”或在线工具（如 ImageMap Generator）导出原始像素坐标更可靠。
立即学习“前端免费学习笔记（深入）”；
响应式下 coords 不重算 = 移动端热区全失效
<map> 的坐标永远绑定图片原始尺寸，和 CSS 缩放、width/height 属性无关。一张 1200×600 的图用 width="100%" 在手机上显示为 375×187，但 coords 还按 1200×600 算，热区必然错位。
- 纯静态页面且不响应式 → 可直接写死坐标
- 需要适配多端 → 必须用 JS 动态重算：监听
resize，获取图片原始宽高与当前渲染宽高比，再对每个area的coords值等比缩放 - 更稳妥的替代方案：改用 SVG，原生支持响应式缩放，热区路径自动跟随
别信“CSS transform 缩放后 coords 自动适配”——没有这回事。浏览器只认原始像素坐标，缩放是渲染层的事，<area> 的命中检测仍在原始坐标系里跑。
<area> 必须嵌套在 <map> 内，且 href 和 alt 不可省略
<map> 本身不渲染任何内容，<area> 放在它外面等于没写；而缺少关键属性会让交互或可访问性直接崩掉。
-
<area>标签必须是<map>的直接子元素，不能套<div>或写在<body>顶层 -
href是必需的：即使只想做 JS 触发，也得写href="#"或href="javascript:void(0)"，否则部分浏览器（尤其旧版 IE）不识别为可点击区域 -
alt不是可选：缺失会导致屏幕阅读器无法播报热区用途，也违反 WCAG 可访问性要求；搜索引擎也会弱化该区域语义 -
target="_blank"时务必加rel="noopener"，否则现代浏览器可能拦截新窗口，看起来像“点了没反应”
最常被忽略的细节：图片加载失败时，<map> 区域直接不可用，且无任何 fallback 提示。所以 <img> 的 alt 要写实义描述，不能只写“图片”。
