定义可点击区域集合，描述各区域形状、坐标和行为；二者须通过name与usemap="#name"严格配对，coords基于原图像素且不响应缩放。
什么是 <map></map> 和 <area> 的基本协作关系
客户端图像映射（client-side image map）靠 <map></map> 定义可点击区域集合，靠 <area> 描述每个区域的形状、坐标和行为。关键点是：二者必须通过 name 和 usemap 属性配对，且 usemap 值要带 # 前缀。
常见错误是漏掉 #，比如写成 usemap="mymap" 而不是 usemap="#mymap"，导致整个映射失效，浏览器完全忽略 <area> 标签。
-
<map name="mymap"></map>中的name是纯标识符，不带# -
<img usemap="#mymap" alt="如何创建一个客户端图像映射区域_MAP标签与AREA标签配合" >中的usemap必须带# -
<map></map>可放在文档任意位置（不限于<img alt="如何创建一个客户端图像映射区域_MAP标签与AREA标签配合" >附近），但必须在 DOM 中存在
shape 和 coords 怎么对应才不出错
shape 决定坐标解析方式，coords 是逗号分隔的数字列表，顺序和含义严格绑定 shape 值。用错会直接导致区域错位或不可点击。
最常踩的坑是把像素坐标当成百分比——<area> 的 coords 永远是绝对像素值，基于原图尺寸计算，不响应缩放或 CSS width/height。
-
shape="rect"→coords="x1,y1,x2,y2"（左上、右下） -
shape="circle"→coords="cx,cy,r"（圆心 x、y，半径 r） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（顺时针顶点序列，至少 3 对） - 所有坐标值必须为整数，小数会被截断（如
10.7→10）
为什么点击没反应？检查这三处硬性限制
即使 HTML 结构正确，<area> 也可能静默失效。根本原因常出在协议、属性缺失或样式干扰上。
- 页面必须通过
http://或https://加载；本地双击打开的file://页面中，多数浏览器禁用<area>的href跳转（仅 Chrome 允许部分跳转，但不一致） -
<area>必须有href（含href="#"）或onclick才能触发交互；空<area>不响应鼠标事件 - CSS 的
pointer-events: none若作用于<img alt="如何创建一个客户端图像映射区域_MAP标签与AREA标签配合" >或父容器，会屏蔽所有区域点击（连title提示都消失）
调试建议：给每个 <area> 加 title 属性，悬停看是否显示提示——不显示基本可判定映射未生效。
响应式场景下怎么让 <area> 坐标依然准确
原生 <map></map> 不支持响应式。当 <img alt="如何创建一个客户端图像映射区域_MAP标签与AREA标签配合" > 被 CSS 缩放（如 max-width: 100%）后，coords 仍按原图尺寸匹配，区域会严重偏移。
没有标准 HTML 解决方案，只有两个务实路径：
- 放弃
<map></map>，改用 SVG：<svg></svg>内嵌<image></image>+<polygon></polygon>等，天然支持缩放和事件绑定 - 保留
<map></map>，但用 JS 动态重算coords：监听resize，根据img.naturalWidth/img.offsetWidth比例缩放所有coords值（注意 poly 多点需逐对处理）
别依赖 devicePixelRatio 或媒体查询做静态适配——不同设备缩放比例差异太大，必须运行时计算。
