<p>HTML 中的 map 和 area 配置仅靠文本声明生效，无独立存储；usemap 与 name 必须逐字节匹配（含大小写、符号），且 usemap 值须以 # 开头；coords 坐标须严格按 shape 类型填写，错误将导致热区失效；响应式下 coords 不自动缩放，需 JS 动态重算或改用 SVG。</p>
map 和 area 的配置本身不“保存”，它只是 HTML 文本声明——写进 HTML 文件里，就生效；删掉或改错，就失效。没有独立的配置文件、不需要后端存储、也不走 localStorage 或 API 提交。
usemap 与 name 必须逐字节匹配
这是最常导致“明明写了却没反应”的原因。浏览器不报错，只静默跳过整个 map。
-
usemap属性值必须以#开头，例如usemap="#product-map" -
<map name="product-map">中的name值必须和usemap去掉#后的内容完全一致：大小写、连字符、下划线、空格都不能差 - 调试时别靠眼睛扫，直接复制
usemap的值，去掉开头#，再粘贴到<map>的name属性里比对
coords 坐标必须按 shape 类型严格填写
填错一位数字，热区可能缩成一个点、偏移到画布外，甚至覆盖整张图——但浏览器不会提示。
-
shape="rect"→coords="x1,y1,x2,y2"：要求x1 < x2且y1 < y2，否则部分浏览器（如 Safari）会忽略该area -
shape="circle"→coords="cx,cy,r"：半径r必须是正整数，不能是0或小数（如12.5） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3"：坐标总数必须为偶数；导出工具带的空格或换行（如"10,20, 30,40"）会让 Safari 直接跳过该区域
响应式场景下 coords 不会自动缩放
所有 coords 都基于图片原始像素尺寸计算。用 CSS 缩放图片、或设 width/height 属性改变显示尺寸后，热区会严重错位。
立即学习“前端免费学习笔记（深入）”；
- 如果图片在移动端被缩放，必须用 JS 动态重算
coords，例如监听resize并按比例缩放每个坐标值 - 更稳妥的做法是改用 SVG 热区方案，原生支持缩放和响应式
- 在线工具（如 ImageMap Generator）导出的坐标默认是原始尺寸，别直接抄进响应式页面
真正容易被忽略的不是怎么写，而是怎么验证：每次改完，打开开发者工具，检查 <img> 的 usemap 值是否真和 <map name> 对得上，再把鼠标悬停在图片上——光标变手形才是热区生效的唯一可靠信号。
