area必须是map的直接子元素，不能嵌套在div等容器中；usemap与map name须逐字节匹配（含#、大小写）；coords基于原图像素，CSS缩放会导致热区偏移；href和alt为必需属性。
area 标签不能“嵌套使用”，它只能作为 <map> 的直接子元素存在；所谓“嵌套”是误用概念，真正要解决的是多热区共存、坐标对齐、链接绑定等实际问题。
area 必须是 map 的直接子元素，中间不能插入任何容器
浏览器只认 <map><area></area></map> 这种扁平结构。<div>、<span>、注释、<script> 甚至空格换行（在某些旧解析器中）都可能让 <area> 失效。
- 错误写法：
<map name="nav"><div><area href="/home" alt="首页"></div></map>→ 浏览器完全忽略该<area> - 正确写法：
<map name="nav"><area href="/home" alt="首页"><area href="/about" alt="关于"></map> - 检查方法：在 Chrome 中右键图片 → “检查”，看是否能高亮对应
<map>及其内部的<area>节点
usemap="#name" 和 <map name="name"> 必须逐字节匹配
这是 90% 热区不生效的根源。浏览器不报错，但关联一断，<area> 就形同虚设。
-
usemap值必须带#前缀，且后面字符串与<map name="xxx">的name完全一致（大小写、连字符、空格都不能差） - 推荐统一用小写+连字符：
usemap="#product-section"对应<map name="product-section"> - 为兼容 HTML5 和旧标准，可同时写
id和name：<map id="product-section" name="product-section">
coords 坐标基于原始图片像素，CSS 缩放会导致热区偏移
<area> 的 coords 是绝对像素值，以原图左上角为 (0,0)。一旦用 CSS 改变图片尺寸或裁剪方式，热区就不再对准。
立即学习“前端免费学习笔记（深入）”；
- 危险操作：
img { width: 100%; height: auto; }或object-fit: cover;→ 热区漂移 - 稳妥做法：让图片按原始尺寸显示，或用 JS 动态重算
coords（需监听resize和图片加载完成） - 形状支持：
shape="rect"（4 值）、"circle"（3 值）、"poly"（至少 6 值），shape="default"表示整张图
href 和 alt 是必需属性，area 不是自闭合标签
HTML5 允许 <area href="/x" alt="x"> 不写闭合，但语义上它仍是空元素；省略 href 或 alt 会导致验证失败，部分辅助技术无法识别，且现代浏览器可能降级处理。
-
href缺失 → 点击无响应（即使写了onclick） -
alt缺失 → 屏幕阅读器无法描述区域功能，也违反 WCAG - 不要写成
<area ... />（XHTML 风格），HTML5 中不推荐
最隐蔽的问题往往不是语法错，而是图片尺寸变化后 coords 没同步更新，或者 usemap 的 # 写漏了——这种错误没有任何提示，只表现为“点不动”。
