是定义图片热点区域的容器，是其子元素，通过shape和coords指定形状与像素坐标，并依赖的usemap="#name"关联生效；漏写#、坐标未按原图尺寸缩放、缺少href或alt均会导致失效。
什么是 <map></map> 和 <area>？
<map></map> 本身不渲染任何内容，它只是个容器，用来定义一组可点击的区域；真正起作用的是里面的 <area> 标签。每个 <area> 必须通过 shape 和 coords 描述形状与坐标，再绑定到某张图片上——靠的是 <img> 的 usemap 属性。
常见错误是漏写 #：<img usemap="mymap"> ❌（不会生效）<img usemap="#mymap"> ✅（必须带井号）
shape 和 coords 怎么配对用？
shape 决定区域类型，coords 是像素坐标列表，顺序和含义严格对应：
-
rect：左上 x,y + 右下 x,y →coords="10,10,100,80" -
circle：圆心 x,y + 半径 r →coords="60,50,40" -
poly：多边形顶点序列，x1,y1,x2,y2,... →coords="20,30,80,20,90,70,30,80"
注意：所有坐标都是相对于图片左上角（0,0）的绝对像素值，不是百分比；图片缩放后坐标不会自适应，这点容易被忽略。
为什么点击没反应？检查这几点
-
<map></map> 的 name 和 <img> 的 usemap 值（含 #）是否完全一致？大小写敏感
- 图片是否加载成功？
<img> 加了 src 且路径正确，否则区域不可见也不响应
-
<area> 是否写了 href 或 onclick？纯 <area> 标签不加交互属性就是“透明”的
- 浏览器是否支持？所有现代浏览器都支持，但旧版 IE 对
poly 的坐标解析略有差异
<map></map> 的 name 和 <img> 的 usemap 值（含 #）是否完全一致？大小写敏感 <img> 加了 src 且路径正确，否则区域不可见也不响应 <area> 是否写了 href 或 onclick？纯 <area> 标签不加交互属性就是“透明”的 poly 的坐标解析略有差异 示例最小可用结构：
@@##@@
<map name="floorplan"><area shape="rect" coords="100,50,200,120" href="/kitchen">
<area shape="circle" coords="300,80,30" onclick="alert('Light switch!')"></map>
响应式图片下 <area> 坐标还准吗？
不准。原生 <map></map> 不响应图片缩放或 CSS width/height 调整。如果用了 max-width: 100% 或 object-fit，坐标就全偏了。
可行解法只有两个：
- 放弃
<map></map>，改用 SVG +<path></path>或绝对定位的透明<a></a>层 - 用 JS 在图片加载后按缩放比例重算
coords（需监听resize并重新设置area.coords）
多数人卡在这里，以为写完就完了，其实响应式场景下原生方案基本等于不可用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
