area 标签必须直接嵌套在 map 内且 usemap 与 map name 精确匹配才生效，否则浏览器静默忽略；它必须有 alt 和 href 属性，coords 校验仅在正确嵌套后触发。
area 标签不嵌套在 map 内就完全失效
浏览器只把 area 当作热区的唯一前提是它作为子元素直接出现在 map 标签内部。只要被 div、span、注释、script 或任何其他标签包裹，或放在 map 外面（哪怕紧邻），所有主流浏览器都会静默忽略该 area——不渲染、不响应点击、控制台也不报错。
这不是兼容性问题，而是 HTML 规范强制要求：area 是 map 的专有子元素，语义上它“不属于文档流”，只在绑定成功的图像映射上下文中才有意义。
-
map必须有name属性，且img的usemap值必须为"#xxx"（带 #）并严格匹配该name -
area不能写成<area />或<area></area>—— 它是空元素，但语法上只允许自闭合写法：<area> - 即使 JS 动态插入
area，也必须确保插入目标是map元素本身（map.appendChild(area)），而非其父容器
为什么 usemap="#name" 和 map name="name" 必须逐字节一致
关联不是“模糊匹配”，而是字符串精确比对。大小写、连字符、下划线、空格、甚至不可见的 Unicode 字符（如全角空格）都会导致断连。例如：usemap="#product-map" 对应 <map name="product-map"> 可用；但 usemap="#Product-Map" 或 usemap="#product_map" 或 usemap="product-map"（漏 #）全部失败。
Chrome 开发者工具里右键图片 → “检查”，如果无法高亮到对应 map，基本可判定关联失败。此时再查 area 是否在 map 内已无意义——因为整个映射链从第一步就断了。
立即学习“前端免费学习笔记（深入）”；
- 推荐命名统一用小写字母 + 连字符，如
name="nav-section"→usemap="#nav-section" - 为兼顾 HTML5 和旧标准，可同时写
id和name：<map id="nav-section" name="nav-section"> - 不要把
map放在<head>或条件注释中——它必须是<body>中可遍历的节点
coords 坐标失效常因 area 不在 map 内触发连锁误判
很多人调 coords 调到崩溃，最后发现根本不是坐标算错，而是 area 根本没被识别——浏览器压根没解析它，自然也不会校验 shape 和 coords 是否匹配。比如 shape="poly" 要求坐标总数为偶数，但若 area 被包在 div 里，这个校验根本不会发生。
真正需要校验坐标的场景，只发生在 area 已成功嵌套、且 usemap/name 关联正确的前提下。
-
rect：必须coords="x1,y1,x2,y2"，且x1 < x2、y1 < y2，否则区域可能反向或坍缩 -
circle：半径r必须为正整数，coords="cx,cy,0"或coords="cx,cy,1.5"都无效 -
poly：顶点成对出现，总数必须为偶数；首尾点不自动闭合，手动重复第一个点更可靠（如coords="10,10,50,10,50,50,10,10"）
alt 属性缺失会让 area 在多数浏览器中彻底不可用
alt 不是“可选的无障碍补充”，而是 area 的强制属性。省略 alt（哪怕写成 alt=""）会导致部分浏览器（如 Safari）直接跳过该 area 解析，表现为点击无反应，且无任何提示。
这和 img 的 alt 逻辑不同：img 缺 alt 只影响可访问性，area 缺 alt 直接导致功能失效。
- 必须显式声明，如
<area shape="rect" coords="0,0,100,100" href="/north" alt="北部区域"> - 若无需语义描述，可用占位值如
alt=" "（一个空格），但不推荐；优先写有意义的简短说明 -
href同样不可省略——没有href或onclick，该area就只是个“不可点击的透明块”
area 根本没进 map 的 DOM 子树，或者 usemap 和 name 差了一个字符、一个 #、一个空格。这些地方浏览器既不报错，也不警告，只默默丢弃。 
