area标签需与usemap属性和map元素严格配合才能生效，usemap值必须以#开头且与map的name属性完全一致（含大小写、连字符），coords坐标须按shape类型精确填写并基于图片原始尺寸，响应式场景下必须用JS动态重算或改用SVG。
area 标签本身不生效，必须和 usemap、<map> 三者严丝合缝才能点击跳转；漏一个 #、坐标少一位、alt 缺失，热区就完全静默失效——浏览器既不报错也不提示。
usemap 和 map 的 name 必须逐字节匹配
这是 90% 热区点不动的根源。浏览器只认 usemap="#product-map" 这种写法，且 <map name="product-map"> 中的 name 值必须和 usemap 的 # 后部分**完全一致**（大小写、连字符、空格全算）：
-
usemap="#product-map"✅ 必须配<map name="product-map"> -
usemap="product-map"❌ 漏掉#，整个映射被忽略 -
<map id="product-map">❌usemap不读id，只读name - 调试时建议复制粘贴比对，别靠肉眼扫；命名统一用小写字母+连字符，避免歧义
shape 和 coords 格式不能错一位
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,...,x1,y1"：顶点坐标成对出现，总数必须是偶数；首尾点建议手动重复闭合，别依赖浏览器自动补线 - 避免用
shape="default"做兜底：它会捕获所有未被其他<area>覆盖的点击，干扰调试
响应式页面里 coords 一定会错位
coords 永远基于图片原始尺寸（img.naturalWidth/img.naturalHeight），不是 CSS 渲染后的显示尺寸。只要图片被缩放（比如 max-width: 100% 或 width: 50%），热区立刻偏移：
立即学习“前端免费学习笔记（深入）”；
- 原始图是 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数值乘以比例后重新赋值 - 如果项目已重度响应式，直接改用 SVG 替代——矢量图形天然支持缩放，可编程、易维护、交互丰富
area 必须嵌套在 map 内，且 href、alt 不可省略
<area> 是空元素，不能自闭合（<area /> 是错的），且必须是 <map> 的**直接子节点**：
- 放在
<div>里、或写在<map>外，所有浏览器都会忽略 -
href和alt是必需属性：href定义跳转目标，alt提供可访问性支持（屏幕阅读器朗读、SEO、图片加载失败时备用文本） -
title是可选的，但建议加上，鼠标悬停时有提示 - 多边形区域重叠时，DOM 顺序决定点击优先级：后面定义的
<area>会覆盖前面的，注意排列逻辑
真正难的不是写几行 <area>，而是让它们在各种缩放、设备、加载时机下都精准响应——坐标系统是静态的，而页面是动态的。一旦开始适配移动端或做复杂热区，JS 重算或 SVG 迁移几乎是绕不开的路。
