标签必须嵌套在内并通过的usemap属性关联才能生效，其坐标不随响应式缩放自适应，需JS动态重算或固定尺寸，且无障碍支持极弱。
area 标签必须嵌套在
单独写 <area> 不会触发任何点击或悬停行为，浏览器直接忽略。它本质是「坐标定义工具」，不是独立可交互元素。
正确结构是：<img src="chart.png" usemap="#infomap"> 配合 <map name="infomap"><area ...></map>。缺一不可，且 usemap 的值（带 #）必须和 <map name></map> 完全一致，大小写敏感。
- 常见错误：漏写
usemap属性，或写成usemap="infomap"（少 #）导致整个区域图失效 -
<map></map>可以放在文档任意位置，不一定要紧贴<img>，但必须在 DOM 中存在 - 如果图片是响应式（
width: 100%），<area>坐标不会自动缩放——这是最大陷阱，后面会讲
coords 属性的坐标系和 shape 类型要严格匹配
<area> 的交互范围完全由 shape 和 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,..."（至少三组点，首尾不自动闭合）
调试建议：先用开发者工具临时加 style="outline: 2px solid red" 到 <area> 上（仅用于定位，实际无效，但能帮你肉眼校验坐标是否覆盖目标区域）。
响应式场景下 area 坐标会失效，必须手动适配
原生 <area> 不感知 CSS 缩放，图片宽度从 800px 缩到 400px，坐标还是按原始像素算，热点会整体偏移甚至消失。
可行解法只有两个：
- 放弃响应式图片，固定
<img style="max-width:90%" style="max-width:90%">，用媒体查询切换不同尺寸的图+对应<map></map> - 用 JavaScript 动态重算
coords：监听window.resize，读取图片当前getBoundingClientRect()尺寸，按比例缩放所有coords值，再重新写入<area>的coords属性（注意 IE 不支持 setAttribute 修改 coords，需用area.coords = "..."）
没有纯 CSS 方案。别信“用 background-image 替代 img + map”的说法——<area> 只对 <img> 生效，对背景图零作用。
无障碍和现代交互支持很弱，关键信息别只靠 area
<area> 默认无 focus 样式，键盘用户 Tab 不到；iOS Safari 对 onmouseover 支持差；屏幕阅读器基本不播报 alt（即使写了）。
如果信息图承载关键导航或数据（比如“点击省份查看GDP”），必须补充降级方案：
- 为每个
<area>加aria-label（如aria-label="广东省：2025年GDP 13.5万亿元"） - 用
<button></button>或<a></a>覆盖在图片上方（通过绝对定位 + pointer-events:none 配合），提供语义化、可聚焦、可动画的替代入口 - 把所有区域信息整理成下方列表，用 id 锚点关联，确保无图像/无脚本环境也能访问
area 标签适合轻量标注（比如老式网站地图），但凡涉及数据展示、多端兼容或合规要求，它只是起点，不是终点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
