area标签必须嵌套在map内且通过usemap关联img，否则无效；coords不随图片缩放自适应，需手动重算或改用svg；不支持键盘焦点，无障碍场景应避免使用。
area 标签必须嵌套在 map 内，且 map 必须通过 usemap 关联到 img
单独写 <area> 不会生效——浏览器根本不会识别它。常见错误是把 <area> 直接丢在页面任意位置，或忘了给 <img> 加 usemap 属性。
正确结构只有这一种：<img src="logic.png" usemap="#flowmap"><map name="flowmap"><area shape="rect" coords="10,20,100,60" href="#start"></map>。注意：name 和 usemap 的值必须一致（usemap 值带 #，name 不带）。
-
shape可选rect、circle、poly，不支持default以外的自定义形状 -
coords值依赖shape：矩形是x1,y1,x2,y2，圆形是cx,cy,r，多边形是逗号分隔的x,y对序列 - 图片尺寸变化时，
coords不会自动缩放——必须手动按比例重算，否则热区偏移
用 onclick 替代 href 实现无跳转逻辑分支
如果点击区域只想触发 JS 逻辑（比如高亮节点、展开说明、更新状态），别用 href="#xxx"，否则页面会滚动或产生历史记录。直接绑定 onclick 更干净：
<area shape="circle" coords="150,80,20" onclick="handleNode('decision')">
这样 handleNode 函数就能接收参数区分不同区域，避免为每个 <area> 单独写事件监听器。
- 不要在
onclick里写大段逻辑，只做分发；复杂处理提到函数外部 - 记得在函数里加
event.preventDefault()（如果用了href回退默认行为） -
area元素不支持data-*属性？错，它完全支持——<area data-type="end" onclick="...">是合法且推荐的传参方式
响应式下 area 热区失效的根源是坐标未适配
图片设了 width: 100% 或用 max-width 响应式后，<area> 的 coords 仍按原始像素计算，必然错位。没有 CSS 能修复这个——area 的坐标系是硬编码的。
- 最简方案：用固定宽高的
<img>，配合媒体查询切换不同尺寸图+对应<map></map> - 进阶方案：用 JS 读取
img.naturalWidth和img.clientWidth，动态重算所有coords值并重写area元素（需监听resize和load） - 替代思路：放弃
<area>，改用 SVG<path></path>+viewBox，天然响应式，但需把逻辑图重绘为 SVG
IE 和旧版 Safari 对 area 的 focus/keyboard 支持极弱
想让键盘用户按 Tab 进入热区、空格触发点击？基本不可靠。area 在 IE 中无法获得焦点，Safari 14 之前也不支持 tabindex。即使加上 tabindex="0"，部分浏览器仍忽略。
- 无障碍需求强的场景，别依赖
area——改用带role="button"的绝对定位<div> 覆盖在图上，用 JS 同步位置 <li>若坚持用 <code>area，至少确保每个<area>有alt属性（如alt="开始节点：用户登录"），屏幕阅读器能读出 - 测试时真用键盘 Tab 导航，别只信鼠标点击效果 实际用起来，
area 最适合静态、尺寸固定、交互简单、无障碍要求不高的内部逻辑图。一旦要缩放、动画、键盘操作或复杂状态管理，很快就会卡在坐标同步和兼容性上。
