<map> 和 <area> 是 HTML 原生客户端图像映射标签：<map> 定义热区图，<area> 声明可点击区域；需通过 usemap="#name" 与 <img> 关联，name 必须严格匹配且带 # 前缀；shape 决定 coords 格式（rect/circle/poly），坐标基于图片原始像素，不随缩放自适应。
什么是 <map> 和 <area>？
客户端图像映射靠的是 HTML 原生支持，不是 JS 模拟。核心就两个标签：<map> 定义一张“热区图”，<area> 在里面声明具体可点击区域。浏览器在渲染时自动把 <img> 和 <map> 关联起来，点击区域触发原生链接跳转或事件（比如配合 JS 的 click 监听）。
usemap 属性必须匹配 name，且带 # 前缀
很多人卡在这步：图片不响应点击，或者控制台报 “Map not found”。关键不是写错标签，而是关联失效。
-
<img usemap="#nav-map">中的#nav-map必须和<map name="nav-map">的name值完全一致（大小写敏感） -
usemap的值**必须带#**，哪怕文档里没写清楚——这是历史遗留规则，不加就无效 -
<map>标签可以放在页面任意位置（不必紧挨<img>），但不能放在<head>里（部分旧浏览器会忽略）
三种 shape 值对应不同坐标写法，coords 顺序不能乱
<area> 的 shape 决定了 coords 的解析方式。写反或少写坐标会导致区域偏移甚至不显示。
-
shape="rect"：需要 4 个值，coords="x1,y1,x2,y2"（左上角 + 右下角） -
shape="circle"：需要 3 个值，coords="cx,cy,r"（圆心 x、y，半径 r） -
shape="poly"：至少 6 个值，按顺时针/逆时针列出顶点，coords="x1,y1,x2,y2,x3,y3,..." - 所有坐标都是相对于图片左上角（0,0）的像素值，不是百分比（除非你用 JS 动态计算）
示例：
<img src="menu.png" usemap="#main-menu"> <map name="main-menu"> <area shape="rect" coords="10,20,110,60" href="/home"> <area shape="circle" coords="200,40,30" href="/search"> <area shape="poly" coords="300,10,350,10,350,50,300,50" href="/help"> </map>
现代开发中容易被忽略的兼容性与调试点
看似简单，但在响应式或高 DPR 设备上极易出问题：
- 图片缩放后，
coords像素值不会自动适配 —— 如果用了width/height缩放图片，coords得按比例重算；CSStransform: scale()更麻烦，基本得靠 JS 重映射 - 部分浏览器对
<area>的title属性支持不一，别依赖它做关键提示 - 无障碍方面：
<area>支持alt，但必须写（否则屏幕阅读器跳过），且内容要描述功能，比如alt="跳转到用户设置"，不是“设置图标” - 没有 CSS 伪类（如
:hover）直接作用于<area>，想加悬停效果得用 JS +mousemove计算坐标
真要动态适配，不如放弃原生 <map>，改用 SVG 或 canvas + 事件坐标判断 —— 尤其当图片要缩放、旋转或支持触摸时。
