area标签必须嵌套在map中并通过img的usemap属性关联才能生效，usemap值须以#开头且与map的name严格一致；shape推荐rect、circle或poly，coords需按原图像素精确测量；area不支持title提示，应使用aria-label增强无障碍访问。
area 标签必须嵌套在 map 里才能生效
单独写 <area> 标签浏览器完全忽略，它不是独立可交互元素。医院科室分布图要用 area 实现点击跳转，必须配对使用 map 和 img 的 usemap 属性。
常见错误是只写了 area，忘了声明 map 或漏掉 usemap 值的 # 前缀：
<img src="floor-plan.png" usemap="#dept-map"> <map name="dept-map"> <area shape="rect" coords="100,50,200,120" href="/dept/cardio"> </map>
-
usemap的值必须以#开头，且和<map name="...">中的name完全一致（大小写敏感） -
shape推荐用rect（矩形）、circle（圆形）或poly（多边形），避免用default—— 它不支持href，只能配合 JavaScript - 坐标系原点在图片左上角，
coords单位是像素，务必用实际截图量取，别靠目测
poly 形状适合不规则科室区域（比如儿科诊区带弧形走廊）
医院平面图里很多科室边界不是直角矩形，硬用 rect 会误触相邻区域。这时得用 poly，手动标出多边形顶点坐标。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用截图工具（如 Windows Snipping Tool 或 macOS Preview）打开分布图，开启像素标尺，逐点记录坐标，格式为
x1,y1,x2,y2,x3,y3,... - 坐标点顺序要顺时针或逆时针闭合，首尾点不必重复；浏览器会自动连线并封闭区域
- 如果某科室被柱子或楼梯隔开成两块，就写两个
<area>，别试图用一个poly跨越空白 - 移动端点击热区小，
poly点数不宜超过 12 个，否则 Safari 可能解析失败
area 不支持 title 提示但可以用 aria-label 补充无障碍信息
<area> 上加 title 属性在 Chrome/Firefox 里鼠标悬停不显示提示框，这是规范行为，不是 bug。想让视障用户或键盘导航者知道“这是放射科”，不能依赖 title。
- 必须加
aria-label="放射科"，屏幕阅读器能读出来 - 如果希望鼠标悬停也有文字提示，得用 CSS +
span浮层模拟，但注意这会增加 DOM 复杂度，且和area的热区不自动同步 - 别给
area加tabindex—— 它默认可聚焦，加了反而破坏语义 - 所有
area必须有href或onclick，否则会被屏幕阅读器跳过
IE11 及以下不支持 area 的 download 属性，跳转前下载 PDF 科室指南需降级处理
想让点击“检验科”直接下载 lab-guide.pdf，写 <area href="lab-guide.pdf" download> 在 IE11 里会变成跳转页面而非下载，因为 IE 不支持 download 属性。
- 兼容方案：用
onclick触发 Blob +URL.createObjectURL下载，但注意 IE11 需用msSaveBlob - 更稳妥的做法是统一跳转到一个中间页，比如
/download?file=lab-guide.pdf，后端设置Content-Disposition: attachment - 如果科室图是纯导航用途，优先用
href跳转，下载类操作建议移到科室详情页内，降低area负担
img 的 width/height 缩放图片后，coords 坐标不会自动换算，必须按缩放比例重算。响应式页面里建议固定图片尺寸，或改用 SVG 替代 map+area 方案。 
