必须用全小写shape="circle"，coords为三个正整数"x,y,r"，usemap与map name须逐字符完全匹配；响应式下坐标不缩放，需SVG或JS动态适配。
必须用 shape="circle"，coords 严格为三个正整数，且 usemap 和 <map name></map> 字符完全一致——错一个字母、多一个空格、大小写不匹配，热区就彻底失效，浏览器还不报错。
shape="circle" 必须全小写且不能拼错
浏览器对 shape 属性零容忍：shape="Circle"、shape="oval"、shape="round" 或 shape="polygon" 全部被静默忽略。实际只认 circle（全小写，无空格，无额外字符）。常见卡点是把 poly 误写成 polygon，结果热区消失但页面看起来“正常”，调试时容易绕远路。
coords 值必须是三个正整数，顺序固定
coords 格式只能是 "x,y,r"：圆心横坐标、纵坐标、半径，全部为正整数，单位像素，原点在图片左上角。不允许出现以下情况：
-
coords="50%,50%,25%"（百分比无效） -
coords="center,center,25"（字符串不识别） -
coords="120, 90, 25"（含空格，解析失败） -
coords="120,90,-25"（半径不能为负）
实操建议：用浏览器 DevTools 的截图测量工具或 Photoshop 信息面板直接读取像素值；手动估算误差常达 5–10px，导致点击失准。
立即学习“前端免费学习笔记（深入）”；
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
usemap="#name" 和 <map name="name"></map> 必须逐字符匹配
usemap 的值（如 #hotmap）和 <map></map> 的 name 属性必须完全一致，包括：
- 大小写（
#HotMap≠name="hotmap"） - 是否带
#（usemap="hotmap"不生效，必须是usemap="#hotmap"） - 首尾空格（
usemap="#hotmap "≠name="hotmap"）
调试时直接在 DevTools 中检查 DOM：<map></map> 节点是否存在，且其 name 属性值是否与 usemap 的 # 后部分一字不差。
响应式图片下 coords 不缩放，热区必然偏移
原生 <area> 的坐标是静态像素值，一旦图片通过 width: 100%、max-width 或 object-fit 缩放，热区就立刻错位——这不是 bug，是规范如此。CSS transform: scale() 同样无效，它只改变渲染，不重算坐标系。
能用原生方案的场景仅限于图片尺寸固定（如 banner 图明确为 800×400），且不随视口变化。真实项目中，只要涉及响应式，基本都要换 SVG 或用 JS 动态重算 coords；否则上线后在不同设备上点不中，问题根源不在代码语法，而在对像素坐标的静态假设。
