usemap 与 map name 必须严格字符串匹配（含#、大小写、连字符），coords 格式由 shape 决定且需按原始尺寸计算，响应式下必须用 js 动态重算缩放比例并更新 coords。
usemap 和 map name 必须逐字节匹配
热区点击没反应，90% 是因为 usemap 和 <map name=""></map> 值不一致。浏览器不做容错，只做严格字符串比对——大小写、连字符、空格、#号缺一不可。
-
usemap="#product-map"✅ 必须配<map name="product-map"></map> -
usemap="product-map"❌ 漏掉#，整个<map></map>被忽略 -
usemap="#Product-Map"❌ 大小写不一致，断连 -
<map id="product-map"></map>❌usemap不认id，只读name
调试时别靠肉眼核对，右键图片 → “检查”，复制 usemap 值；再点开 <map></map> 元素，复制其 name 属性值；用编辑器做纯文本比对。
shape 与 coords 格式必须一一对应
coords 不是“坐标列表”，而是由 shape 决定的结构化数据。填错格式，热区可能缩成一个像素点、偏移到画布外，甚至覆盖整张图。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，且必须满足x1 且 <code>y1 -
shape="circle"→coords="cx,cy,r"：圆心横纵坐标 + 半径，r必须是正整数（不能是0或小数） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,...,xn,yn"：顶点坐标成对出现，总数必须是偶数；首尾点**不会自动闭合**，Safari 等浏览器会静默跳过格式错误的poly - 别用
shape="default"做兜底——它会捕获所有未被其他<area>覆盖的点击，干扰调试
设计稿里标出的“居中坐标”不能直接填；必须按原始图片尺寸（img.naturalWidth/img.naturalHeight）换算。导出坐标时注意清理空格和换行——coords 中只允许数字和逗号。
响应式页面中 coords 会失效，必须 JS 动态重算
<area> 的 coords 永远基于图片原始尺寸，不是 CSS 渲染后的宽高。只要图片被缩放（比如 max-width: 100%、width: 50%、object-fit），热区立刻偏移。
- 原始图 1200×800，
coords="0,0,100,100"是左上角 100×100 区域 - 缩放到 375px 宽后，该区域在屏幕上仅约 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> 是空元素，不能写 ，也不支持自闭合写法（如 <area>）；它必须作为子节点直接出现在 <map></map> 内，且 href 和 alt 都不可省略。
-
href缺失 → 点击无响应（即使有onclick也不触发） -
alt缺失 → 影响无障碍访问（屏幕阅读器无法播报），SEO 降权，部分浏览器静默禁用热区 - 不要在
<area>上写style或试图用 CSS 控制显示——它本身不可见，样式无效 - 多个
<area>重叠时，DOM 顺序决定点击优先级：后面定义的覆盖前面的
真正难的不是写出来，而是让 coords 在缩放、加载、不同设备间始终对得准——这需要你亲手读 naturalWidth、手算比例、手动更新每一段 coords 字符串。稍有疏忽，热区就静默消失，浏览器连个警告都不给。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
