area标签必须嵌套在内且与严格配对；shape和coords须成对出现、格式正确；href不支持纯锚点；coords不随缩放自适应，移动端需确保热区≥44×44px。
area 标签必须嵌套在
area 标签本身不渲染任何内容，也不接受子元素。它只在 <map></map> 内部才生效，且必须与 <img usemap="#xxx" alt="HTML area标签创建图片超链接区域的方法" > 显式配对。常见错误是把 area 放到 <div> 或 <code><p></p> 里，或者漏写 <map name="xxx"></map> —— 这时浏览器完全忽略所有 area，点击无反应。
确保三者严格一致：
-
<img usemap="#main-map" alt="HTML area标签创建图片超链接区域的方法" >中的#main-map必须和<map name="main-map"></map>的name完全匹配（大小写敏感） -
<map></map>不能被<picture></picture>、<figure></figure>或 Shadow DOM 隔离，否则关联断裂 - 多个
area可共存于一个<map></map>，但每个area必须有shape和coords
shape 和 coords 必须成对出现，且格式不能出错
shape 只接受四个值：rect、circle、poly、default；写成 rectangle 或 round 会静默失效。对应 coords 的格式也严格固定：
-
shape="rect"→coords="x1,y1,x2,y2"（左上 + 右下，不是宽高） -
shape="circle"→coords="cx,cy,r"（圆心 x、y 和半径，不是直径） -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."（顶点坐标成对，总数必须为偶数；顺序影响填充，自相交多边形渲染不可靠） -
shape="default"→ 不需要coords，覆盖图中未被其他区域覆盖的部分
coords 中不能有空格、换行或中文逗号；用图像编辑工具导出坐标后，务必手动清理空格和多余字符。
立即学习“前端免费学习笔记（深入）”；
href 必须是有效 URL，纯 #id 锚点基本不可用
很多人想让某个热区跳转到页面内 <h2 id="section2"></h2>，于是写 href="#section2" —— 这在绝大多数浏览器中不会触发滚动，属于无效写法。HTML 规范不保证 area 的 href 支持 fragment-only 地址。
- 可行写法：
href="./page.html#section2"（带路径）、href="javascript:void(0)"（配合 JS 处理） - 无效写法：
href="#"、href="#section2"、href=""（会触发当前页重载或报 Failed to load resource） - 若需锚点行为，推荐用 JS 绑定
click事件并调用element.scrollIntoView()
移动端和缩放图片下 coords 不自动适配，必须手动处理
coords 值始终基于原始图片像素尺寸，不随 CSS 缩放、width/height 属性或响应式布局变化。图片在手机上被缩放到 50%，但 coords 还是按原图 1000×600 解析，热区就偏了。
- 最稳妥方案：改用 SVG 替代
map/area，SVG 坐标天然响应式 - 折中方案：用 JS 监听
resize，按缩放比例动态重写area.coords（需先获取原始尺寸与当前渲染尺寸比值） - 底线要求：移动端热区最小物理尺寸 ≥ 44×44px，否则 iOS Safari 可能拒绝响应点击
真正容易被忽略的是：当图片通过 object-fit: cover 裁剪显示时，coords 仍以原始宽高为基准，但可视区域已变形——此时坐标系统与用户所见完全脱节，必须放弃 area 改用定位 + 事件委托。
