必须严格使用小写circle且coords为三个正整数像素值，usemap与map name需逐字符匹配，响应式图片下原生area坐标不缩放，推荐svg替代。

shape="circle" 必须小写且只能是 circle

浏览器对 shape 属性完全不宽容，写成 Shape="Circle"、shape="oval"、shape="round" 或 shape="polygon" 都会被静默忽略——区域点击无响应，控制台也不报错。实际生效的只有严格小写的 circle。常见误写是把 poly 拼成 polygon，结果一样：热区消失，但页面看起来“一切正常”，排查时容易卡住。

coords 必须是三个整数，顺序不能错

coords 值必须是形如 "120,90,25" 的字符串：圆心 x 坐标、圆心 y 坐标、半径，全部为正整数，单位像素，原点在图片左上角（0,0）。不是百分比，不是 CSS rem 或 em，也不能带空格或单位符号。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 错误写法：coords="50%,50%,25%"、coords="center,center,25"、coords="120, 90, 25"（含空格）
• 正确写法：coords="120,90,25" 表示圆心距左 120px、距上 90px，半径 25px
• 取值建议：用浏览器开发者工具的「截图测量」功能或 Photoshop 的信息面板直接读像素值，手动估算误差常达 5–10px，导致点不中

usemap 和 map name 必须字面完全一致

<img usemap="#myhot"> 中的 #myhot 必须和 <map name="myhot"></map> 中的 name 值**逐字符匹配**：大小写、有无空格、是否带 # 全部算在内。

• usemap="#hotmap "（末尾空格） ≠ name="hotmap"
• usemap="#HotMap"（大写 H/M） ≠ name="hotmap"
• 调试方法：打开 DevTools，检查 DOM 中 <map></map> 是否存在，且 name 属性值与 usemap 的 # 后部分完全相同

响应式图片下 coords 不会自动缩放

原生 <area> 的坐标是固定像素值，一旦图片用 width: 100%、max-width 或 object-fit 缩放，热区就偏移失效——这不是 bug，是设计如此。

• 能用原生方案的场景：图片尺寸固定（如 banner 图宽高明确为 800×400），且不随视口变化
• 响应式场景推荐改用 SVG：<circle cx="120" cy="90" r="25"></circle> 可结合 viewBox 和 CSS 缩放保持比例，或用 JS 动态重算 coords
• 别指望 CSS transform: scale() 能带动 <area> 热区同步缩放——它只影响渲染，不影响坐标系统

实际项目里最常卡住的不是语法不会写，而是 coords 坐标取错 + usemap 关联失败这两处；一旦图片缩放，问题立刻暴露，但根源不在 HTML 写法本身，而在对像素坐标的静态假设。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！