map 和 area 标签必须严格嵌套且属性精确匹配才生效：usemap="#name" 与 的 name 值须逐字节一致（含大小写、符号）；area 必为 map 直接子元素；coords 基于原图尺寸计算；href 和 alt 为必需属性。
map 和 area 标签本身不渲染、不独立存在，它们只在满足严格嵌套与属性配对关系时才被浏览器识别为有效热区——不按规范写，就等于没写。
usemap="#name" 与 <map name="name"></map> 必须逐字节匹配
这是最常卡住的地方：浏览器不会报错，但热区完全失效。usemap 属性值必须以 # 开头，且 # 后字符串要和 <map name="..."></map> 的 name 值完全一致——包括大小写、连字符、下划线，甚至不可见空格。
- ✅ 正确：
<img usemap="#product-map" alt="HTML标签之map与area标签在文档结构中的交互" >+<map name="product-map"></map> - ❌ 错误：
usemap="product-map"（漏#）、usemap="#Product-Map"（大小写错）、usemap="#product_map"（下划线 ≠ 连字符） - 调试建议：Chrome 开发者工具中右键图片 → “检查”，看是否能高亮到对应
<map></map>；如果不能，基本就是匹配失败
<area> 必须是 <map></map> 的直接子元素
<area> 不是通用交互标签，它没有默认样式，也不响应事件，脱离 <map></map> 就彻底被忽略。任何“中转”都会导致失效。
- ✅ 正确：
<map name="plan"><area shape="rect" coords="0,0,100,100" href="/kitchen" alt="厨房"></map> - ❌ 错误：
<map><div><area ...></div></map>或<area>单独写在 body 里 - 注意：
<area>是空元素，不能自闭合写成<area>；HTML5 允许省略结束标签，但必须有开始标签且嵌套正确
coords 坐标永远基于图片原始像素尺寸计算
你用 CSS 把一张 1200×800 的图缩成 300px 宽显示，coords="0,0,100,100" 仍指向原始图左上角 100×100 像素区域——现在它在屏幕上只占约 25×25px，点不准是必然的。
立即学习“前端免费学习笔记（深入）”；
- shape="rect" →
coords="x1,y1,x2,y2"：要求x1 且 <code>y1 ，否则部分浏览器可能忽略 - shape="circle" →
coords="cx,cy,r"：半径r必须为正整数，不能是小数或 0 - shape="poly" →
coords="x1,y1,x2,y2,x3,y3,..."：顶点成对出现，总数必须是偶数；首尾点无需重复，但交叉多边形渲染不可靠 - 坐标字符串里不能有空格或换行，只允许数字和逗号；从设计工具导出后务必手动清理
href 和 alt 是 <area> 的必需属性
缺一不可。没有 href，点击无跳转行为（即使绑了 JS 事件，部分旧浏览器也可能不触发）；没有 alt，不仅影响无障碍访问，某些浏览器会直接忽略该 <area>。
-
alt不是可选提示，而是功能描述，例如：alt="点击进入耳机详情页" -
<area>不支持title属性触发 tooltip，也不支持aria-label被屏幕阅读器自然读出；如需更强无障碍支持，得额外加<span aria-hidden="true"></span>或用 JS 注入辅助文本 - 如果只是想执行 JS 行为而非跳转，可以去掉
href，但必须保留alt，并用event.preventDefault()阻止默认行为
真正麻烦的不是写几行 HTML，而是坐标随缩放漂移、匹配稍有偏差就静默失效、以及无障碍支持需要额外补丁——这些地方一旦忽略，上线后用户点不到，却查不出错在哪。
