html中shape属性仅支持rect、circle、poly、default四个严格小写值，大小写敏感且无容错；coords必须与shape严格匹配：rect需4个坐标（x1,y1,x2,y2），circle需3个（cx,cy,r），poly需偶数个顶点坐标，default不写coords且须置于map末尾。
shape属性只能填这四个小写单词
浏览器对 shape 的取值完全不宽容：只认 rect、circle、poly、default，且必须全小写。写成 Rect、rectangle、oval、polygon 或 triangle，都会被直接忽略——area 标签看似存在，但点击毫无反应，控制台也不报错，极难排查。
常见踩坑点：
-
poly写成polygon：最隐蔽的失效原因，语法合法、无警告，但热区完全不响应 -
default放在<map></map>中间而非末尾：会提前拦截所有未覆盖区域的点击，干扰其他热区调试 - 混用大小写（如
Shape="circle"）：HTML 属性名不区分大小写，但shape的值区分；Shape是无效属性名，浏览器当垃圾丢弃
coords格式必须和shape一一对应
coords 不是“随便填的数字”，而是由 shape 类型严格定义的结构化像素坐标序列。填错一位、少一个、多一个，热区就会缩成一个点、偏移到画布外，甚至覆盖整张图。
正确格式示例：
-
shape="rect"→coords="10,20,100,80"（左上 x,y + 右下 x,y；要求 x1 -
shape="circle"→coords="50,60,25"（圆心 x,y + 半径 r；r 必须是正整数） -
shape="poly"→coords="30,40,90,40,60,120"（三组点构成三角形；总数必须为偶数，至少 6 个数字） -
shape="default"→ 不写coords，写了也无效
错误写法后果：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 用中文逗号分隔：
coords="10，20，100，80"→ 整个字符串被当做一个无效值，热区消失 -
poly坐标个数为奇数（如 7 个）→ 浏览器截断最后一位，导致最后一个点坐标错乱 - 把
rect当成“中心点+宽高”填：coords="55,50,90,60"→ 实际变成左上(55,50)、右下(90,60)，可能反向（x1 > x2）导致热区不可见
href 和 alt 缺一不可，不是“可选”
href 决定点击行为，alt 是可访问性刚需——两者缺失都会导致功能或合规失败。
实操要点：
-
href为空或写成"#"：点击后页面跳到顶部，不是“无跳转”，应设为有效 URL 或javascript:void(0)（若配合 JS 处理） -
href用相对路径时，解析上下文是当前 HTML 页面，不是图片所在目录 -
alt不只是图片加载失败时的备用文字；屏幕阅读器靠它播报热区用途，WCAG 合规检查会直接报错 - Chrome 控制台会在缺少
alt时输出 warning，但不会中断渲染
响应式图片下 coords 会彻底失效
原始图片尺寸才是 coords 的唯一参照系。如果 <img> 设置了 width="100%"、max-width 或通过 CSS 缩放，coords 不会自动缩放——热区位置严重偏移，移动端尤其明显。
可行方案只有两个：
- 放弃
<map>/<area></map>，改用<svg></svg>：天然支持响应式，坐标基于 viewBox，缩放无偏移 - 保留
<map></map>，但用 JS 动态重算coords：监听窗口 resize，按图片实际渲染宽高与原始宽高的比例系数，逐个 area 重新设置coords字符串（注意：需缓存原始坐标，不能反复缩放已缩放值）
别指望浏览器自动适配——这是原生机制的设计限制，不是 bug，也不会被修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
