area标签必须嵌套在map内且usemap值以#开头严格匹配name；area须为map直接子元素、必须闭合；coords基于原始图片尺寸，响应式需js动态计算缩放比；alt属性为可访问性强制要求。
area 标签必须嵌套在 map 内，且 img 的 usemap 属性值必须以 # 开头、严格匹配 map 的 name——漏掉 #、大小写不一致、或 area 放错位置，都会导致热区完全不响应，浏览器也不报错。
usemap="#xxx" 中的 # 号不能省略
这是最常被忽略的硬性规则。usemap 不是普通属性，而是片段标识符（fragment identifier）引用，和 <a href="#section1"></a> 同理。浏览器只认 usemap="#nav-map" 这种写法；写成 usemap="nav-map" 或 usemap="map/nav-map" 会静默失效。
- 错误示例：
<img src="plan.jpg" usemap="roomMap"><map name="roomMap"><area shape="rect" coords="10,10,100,100" href="/kitchen"></map>→ 点击无反应 - 正确写法：
<img src="plan.jpg" usemap="#roomMap">，<map name="roomMap"></map> - 注意：name 值本身不带
#，只有usemap值才带
area 必须是 map 的直接子元素
area 是语义描述器，不渲染、不继承样式、也不支持事件委托。它只能作为 map 的**直接子节点**存在，任何中间包裹（比如 <div><area></div>）或放错层级（比如写在 map 外面），浏览器一律忽略。
- 错误结构：
<map name="m"><div><area shape="rect" coords="0,0,50,50" href="/a"></div></map> - 正确结构：
<map name="m"><area shape="rect" coords="0,0,50,50" href="/a"></map> -
area必须闭合，不能写成<area ...>（HTML5 允许自闭合语法，但部分旧浏览器或无障碍工具可能解析异常，建议显式写<area ...>）
coords 坐标始终基于原始图片尺寸
coords 的单位是像素，原点在图片左上角 (0,0)，且永远按 img.naturalWidth 和 img.naturalHeight 计算——与 CSS 缩放、width/height 属性、object-fit 完全无关。图片被拉伸或缩小时，热区会严重偏移。
- 常见现象：响应式页面中，
<img style="max-width:90%">下热区点击失准 - 临时修复：用 JS 动态计算缩放比，重设
area的coords（需监听resize和load） - 关键代码片段：
const scaleX = img.clientWidth / img.naturalWidth;，再对每个coords值乘以对应比例（rect要处理四个值，poly要遍历所有偶数位坐标） - 更稳妥方案：改用 SVG 替代，原生支持响应式坐标系统
alt 属性不是可选，而是强制可访问性要求
area 的 alt 是 WAI-ARIA 和 WCAG 强制要求的必填属性。没有 alt，屏幕阅读器无法告知用户该区域的功能，也违反 HTML 规范（验证器会报错）。
- 错误：
<area shape="rect" coords="10,20,100,80" href="/login"> - 正确：
<area shape="rect" coords="10,20,100,80" href="/login" alt="登录入口"> - 建议补充
title（鼠标悬停提示）和aria-label（增强语义），但alt是底线 - 如果区域无跳转（仅作标注），至少设
href="#"+alt，并用 JS 阻止默认行为
真正麻烦的从来不是写几行 map 和 area，而是当图片尺寸随视口变化、缩放比例动态浮动时，如何让 coords 始终对齐像素边界——这时候你才会意识到，纯 HTML 图像映射本质上是个静态坐标系统，而现代页面几乎全是动态的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
