area标签必须嵌套在map中并通过usemap属性与img绑定才能生效，coords仅支持整数像素值且需严格匹配shape类型，alt为href的强约束必填项，响应式下需js动态重算坐标或改用svg方案。
area 标签必须嵌套在 map 里，且依赖 usemap 关联
单独写 <area> 不会生效，它只是坐标和行为的“描述”，不渲染、不响应点击。真正起作用的是 <map></map> 容器 + <img usemap="#xxx"> 的三者绑定关系。
常见错误现象：图片点了没反应、控制台无报错但链接失效——大概率是 usemap 值和 <map name="xxx"></map> 不匹配（注意 # 符号、大小写、空格）。
-
usemap属性值必须以#开头，例如usemap="#navmap" -
<map></map>必须在 DOM 中可访问，不能放在<template></template>、<noscript></noscript>或未挂载的 Shadow DOM 里 - 多个
<map></map>共存时，name值不能重复，否则浏览器可能随机绑定其中一个 - 动态插入
<map></map>后，需确保<img>已完成渲染（可加setTimeout或用MutationObserver触发重绑）
shape 和 coords 必须严格配对，且 coords 只接受整数像素值
浏览器坐标系原点在图片左上角 (0,0)，X 向右、Y 向下递增。所有 coords 值必须是整数，单位是像素，不支持小数、百分比或 em/rem —— HTML5 已废弃百分比语法，旧写法如 coords="20%,30%,80%,70%" 在现代浏览器中会被忽略。
容易踩的坑：用截图工具量坐标后直接复制，结果含空格或换行；导出自 SVG 或设计稿的坐标是浮点数；图片被 CSS 缩放（如 width: 100%）导致像素坐标偏移。
-
shape="rect"→coords="x1,y1,x2,y2"：左上角 + 右下角，顺序不能反 -
shape="circle"→coords="cx,cy,r"：圆心 + 半径，半径不能为 0 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：至少 3 个顶点（6 个数字），自动闭合，首尾点无需重复 -
coords字符串内禁止空格，例如"100,200,150,180"正确，"100, 200, 150, 180"会导致截断
href 和 alt 是强约束组合，无障碍不可省略
只要用了 href，alt 就是必需属性。这不是校验警告，而是 WCAG 2.1 强制要求：屏幕阅读器靠 alt 知道“这个区域是干什么的”，没有它，视障用户完全无法操作。
别写 alt="点击这里" 或 alt=""。它得说明功能，比如 alt="德国区域，查看签证申请指南"。如果区域纯装饰、无跳转（比如只触发 JS），应改用 role="presentation" + aria-hidden="true"，而不是留空 alt。
-
href为空字符串（href=""）会触发页面刷新，等价于href="#"，慎用 - 需要新窗口打开时，务必加
rel="noopener"防安全漏洞（尤其搭配target="_blank"） -
rel支持nofollow、license、help等语义值，SEO 和版权场景有用 -
target值如_blank、_self仍有效，但部分浏览器对非同源链接会忽略target（受弹窗拦截策略影响）
响应式页面里 area 坐标会失效，没有自动适配机制
原生 <area> 没有媒体查询、百分比坐标或缩放感知能力。只要图片尺寸被 CSS 改变（比如 max-width: 100%、vw 单位、Flex/Grid 拉伸），固定像素的 coords 就必然错位。
这不是 bug，是规范限制。你没法靠 CSS 修复它，只能用 JS 动态重算，或者换技术栈。
- JS 方案：监听
window.resize，按图片实际宽高与原始尺寸比例，重新设置每个<area>的coords属性 - 更稳妥的替代方案是改用
<svg></svg>：<path></path>支持 viewBox 缩放、相对坐标、事件委托，且可无障碍标注 - 轻量交互可用 CSS +
pointer-events: none / auto分层覆盖伪热点，但仅适用于矩形区域 - 复杂图形、频繁更新、多设备适配场景，优先考虑 Canvas 或第三方库（如 ImageMapster）
alt 的语义质量与响应式下的坐标漂移——前者影响合规性，后者让整个图像映射在移动端彻底失能。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
