<map>和<area>是HTML原生支持图片热点的标签组合：<map>定义可点击区域集合，<area>描述各区域形状、坐标及跳转目标；usemap属性必须以#开头且与<map name>严格一致（大小写敏感），坐标基于图片原始像素尺寸，原点为左上角，不同shape对应不同coords格式（rect需4值、circle需3值、poly需偶数顶点坐标）。
什么是<map>和<area>？
它们是HTML原生支持图片热点（image map）的标签组合：<map>定义一组可点击区域，<area>描述每个区域的形状、坐标和跳转目标。浏览器不渲染<map>本身，只靠<img>的usemap属性关联。
usemap属性怎么写才有效？
关键在命名匹配：必须以#开头，且与<map>的name属性值完全一致（大小写敏感）。常见错误是漏掉#或拼错名字。
正确写法示例：
<img src="plan.png" usemap="#floor-map"> <map name="floor-map"> <area shape="rect" coords="10,20,100,80" href="/lobby"> </map>
容易踩的坑：
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
usemap="#floor-map"和<map name="floor-map">必须严格一致 - 路径中不能有空格或特殊字符，否则部分旧浏览器会失效
- 如果页面含多个
<map>，每个name必须唯一
coords坐标怎么算？
坐标系原点在图片左上角（0,0），单位是像素。不同shape对应不同坐标格式：
-
rect：左上x,左上y,右下x,右下y（如"50,30,120,90"） -
circle：圆心x,圆心y,半径（如"200,150,40"） -
poly：依次列出多边形各顶点x,y（如"10,10,50,5,80,30,60,70"）
实操建议：
用浏览器开发者工具选中图片，按住Shift拖选区域，控制台里临时运行getBoundingClientRect()辅助估算；或导出图片到图像编辑软件，开启标尺读取像素值。别靠肉眼猜——差5像素就可能点不中。
为什么点了没反应？常见原因排查
最常被忽略的是相对路径和MIME类型问题：
-
href值为空或#时，点击无效果（不是bug，是预期行为） - 若跳转地址是相对路径（如
href="room-1.html"），确保该文件真实存在且服务器返回200，而不是404 - 某些CDN或静态托管服务默认不支持
.map后缀，但这里不需要单独部署<map>——它只是HTML片段，只要HTML能加载就行 - 移动端Safari对
poly区域的触摸热区偏小，建议最小边长不小于20px，或加style="cursor: pointer;"给<area>提升感知
复杂点在于坐标随图片缩放失效——<img>设了width/height或CSS缩放时，coords仍按原始尺寸计算。必须用原始分辨率图片，或改用SVG+事件委托方案替代。
