HTML图片热区必须严格遵循原生规则：usemap="#name"与<map name="name">须逐字节匹配（含大小写）；coords基于原始尺寸，响应式下需JS换算；每个<area>必有alt，且避免边界重叠。
HTML 图片热区能用，但必须严格按原生规则写，漏一个 # 或坐标格式错一位，整个热区就静默失效——浏览器不报错，也不提示，只让你反复点不动。
usemap="#name" 和 <map name="name"> 必须完全匹配
这是最常踩的坑：很多人写 usemap="mymap"，却忘了开头的 #；或者 usemap="#MyMap"（大写 M）而 <map name="mymap">（小写 m），大小写不一致也会断连。浏览器不会警告，<area> 标签直接被忽略。
-
usemap属性值必须以#开头，且后面字符串要和<map name="...">的name值**逐字节相同**（包括大小写、空格、连字符） -
<map>标签本身不渲染任何内容，放在文档任意位置都行，但建议紧邻<img>后面，便于维护 - 一个
<img>只能关联一个usemap，但一个<map>可被多个图片复用（只要usemap指向它）
<area> 的 shape 和 coords 格式不能混用
shape 决定了 coords 的解析方式，写错会导致区域偏移、缩成一点，甚至覆盖整张图。所有坐标都基于图片**原始尺寸**的左上角（0,0），不是显示尺寸。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，顺序不能颠倒（x1 < x2且y1 < y2） -
shape="circle"→coords="cx,cy,r"：圆心 x、y 和半径，半径必须为正数 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点坐标成对出现，总数必须是偶数；首尾不需闭合，浏览器自动连线 - 别用
shape="default"来兜底——它会捕获所有未被其他<area>覆盖的点击，容易干扰调试
响应式页面里热区会失效，这不是 bug 是设计限制
HTML 图像映射的坐标是像素绝对值，一旦图片用 CSS 缩放（比如 max-width: 100%）、或在不同 DPR 屏幕上渲染，热区就立刻错位。这不是你坐标取错了，是机制本身不支持动态适配。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 测试时务必在目标设备/视口宽度下检查热区，不要只在桌面大屏调好就上线
- 没有纯 HTML/CSS 方案能自动重算坐标；若必须响应式，得靠 JS 库如
rwd-image-maps在运行时按比例换算coords - 复杂交互场景（比如 hover 高亮、拖拽热区）直接改用
<svg>更可控，坐标天然支持百分比和 viewBox
可访问性和基础体验不能省略
屏幕阅读器依赖 alt 和语义结构理解热区意图，缺失这些会让部分用户完全无法操作。
- 每个
<area>必须有alt属性，描述该区域功能（例如alt="进入厨房区域"），不能留空或只写“链接” - 给
<img>加alt是基本要求，否则无图环境下整张热区图失去上下文 - 加一行
area { cursor: pointer; }CSS，能让鼠标悬停时显示手型，这是最廉价的反馈增强 - 避免相邻
<area>边界重叠——点击交界处行为不确定，有的浏览器触发上一个，有的触发下一个
真正难的不是写出第一组 <area>，而是确保它在各种缩放、DPR、辅助技术下依然准确响应。坐标取值工具只能帮你起步，最终得靠真实设备验证。别迷信“写完就能用”，热区是少数几个看起来简单、实则容错率极低的 HTML 特性之一。
