usemap属性必须严格匹配map的id/name，且大小写、连字符等需完全一致；area必须直接嵌套于map内并含href和alt；coords按原图尺寸计算，缩放需JS动态修正。
usemap="#xxx" 必须和
浏览器只认 usemap="#nav-map" 这种写法，usemap="nav-map" 或 usemap="#Nav-Map" 都会断连。大小写、连字符、空格，哪怕多一个都算失败。Chrome 里右键图片 → “检查”，如果点不到对应 <map>，基本就是这里错了。
推荐统一用小写字母 + 连字符命名：name="product-section" → usemap="#product-section"。为兼容 HTML5 和旧标准，<map> 标签建议同时写 id 和 name：<map id="product-section" name="product-section">。
area 必须直接嵌套在 map 内，且 href 和 alt 不可省略
<area> 是空元素，但不是随便放哪都行。它必须直接写在 <map> 开始和结束标签之间，不能被 <div>、注释、<script> 包裹，也不能放在 <head> 里——否则所有浏览器都会忽略它。
href 和 alt 是必需属性：
立即学习“前端免费学习笔记（深入）”；
- 没
href：点击不跳转，JS 绑定的click事件在部分旧浏览器里也可能不触发 - 没
alt：屏幕阅读器跳过该热区，Chrome 控制台会报 warning，无障碍直接失效
coords 坐标永远按原图尺寸计算，不是显示尺寸
一张 1200×800 的图，用 CSS 缩成 600×400 显示，coords="0,0,100,100" 仍指原始左上角 100×100 像素区域——现在它只占屏幕上 50×50 像素，点起来必然偏移。
纯 HTML/CSS 没有自动适配机制。只有两个办法：
- 不用缩放：让
<img>的width/height属性和原图一致，靠外层容器限制显示大小（但可能拉伸） - 用 JS 动态重算：监听
load和resize，读取img.naturalWidth/img.naturalHeight与当前offsetWidth/offsetHeight的比例，再逐个修正每个<area>的coords属性值
Bootstrap 不干预 area 行为，但可能影响视觉对齐
Bootstrap 对 <area> 本身无样式或 JS 支持，但它加载的全局 CSS（比如重置 box-sizing、设置字体、影响 img 默认 display）可能间接干扰热区定位感。尤其当 <img> 被 Bootstrap 的响应类（如 img-fluid）包裹时，更容易放大 coords 偏移问题。
常见踩坑点：
-
img-fluid强制max-width: 100%+height: auto，加剧原图/显示尺寸不一致 - 父容器用了
text-center或justify-content-center，导致图片渲染位置浮动，进一步模糊热区坐标参考系 - 未给
<img>设置明确alt，影响可访问性，也容易被 Lighthouse 报告为严重问题
真正难调的从来不是语法，而是 coords 和实际像素之间的那层“信任”——浏览器照着原图量，人眼盯着屏幕点，中间差的那一点缩放比，得自己补上。
