area标签需有href或nohref才具交互性，usemap与map的name必须严格一致，coords须按原图尺寸书写并动态适配缩放，且需兼顾键盘与屏幕阅读器可访问性。
area 标签本身不触发点击，它只是定义区域；真正响应点击的是浏览器对 href 属性的原生导航行为，或你手动绑定的 onclick 事件。 这是绝大多数“点了没反应”的根本原因——不是热区没画准，而是没给浏览器一个可执行的动作。
usemap 和 map name 必须逐字节一致
这是最常被忽略、也最容易静默失败的一环。浏览器只做严格字符串匹配，大小写、连字符、空格、符号全算在内。
-
usemap="#Product-Map"❌ 与<map name="product-map">不匹配（大小写+连字符） -
usemap="#map1"❌ 但<map id="map1">不起作用（usemap只认name，不认id） - 调试时别靠眼睛扫：右键图片 → “检查”，复制
usemap值；再点开<map>元素，复制其name属性；用编辑器做纯文本比对（推荐 VS Code 的 Compare Files）
coords 坐标必须按原始尺寸书写，且格式不能错位
coords 是像素值，永远基于图片的 naturalWidth/naturalHeight，不是 CSS 渲染后的宽高。填错格式会导致热区缩成一个点、偏移到画布外，甚至覆盖整张图。
-
shape="rect"→coords="x1,y1,x2,y2"：必须满足x1 < x2且y1 < y2，否则部分浏览器（如 Safari）会跳过该区域 -
shape="circle"→coords="cx,cy,r"：半径r必须是正整数，r=0或小数（如12.5）会导致热区失效 -
shape="poly"→coords="x1,y1,x2,y2,x3,y3,..."：顶点数必须为偶数；首尾不自动闭合；导出坐标时务必清理空格和换行，coords中只允许数字和逗号
area 必须有 href 或 nohref 才能被识别为交互元素
没有 href 也没有 nohref 的 <area>，屏幕阅读器会直接跳过，键盘 Tab 也无法聚焦——它在辅助技术眼里就是“不存在”。
立即学习“前端免费学习笔记（深入）”；
- 有跳转目标：写
href="#"（哪怕后续用 JS 阻止默认行为），确保语义存在 - 纯装饰/占位区域：显式加
nohref（HTML5 已废弃但 NVDA/VoiceOver 仍依赖它） - 仅靠
onclick不够：JS 事件不自动赋予链接语义，必须补role="link" tabindex="0" -
alt不可省：它是屏幕阅读器唯一播报的文案，不能写“点击此处”，要写具体功能，比如alt="查看上海办公室联系方式"
响应式下 coords 必须用 JS 动态重算
只要图片用了 max-width: 100%、width: 50% 或 object-fit，热区立刻错位。没有纯 HTML/CSS 方案能自动适配。
- 监听两个时机：
window.addEventListener('resize', updateCoords)和img.addEventListener('load', updateCoords) - 在
updateCoords()中读取img.naturalWidth与img.offsetWidth得到缩放比，再遍历所有<area>，把每个coords数值乘以比例后重新赋值 - 注意：移动端触控最小推荐尺寸是
44×44px，原始图 1200×800 缩到 375px 宽后，coords="0,0,100,100"在屏幕上只剩约31×21px，很可能点不中
真正难的不是写对语法，而是让 usemap 关联成立、coords 在缩放后依然精准、area 在键盘和屏幕阅读器里都可访问——这三者缺一不可。一旦其中任一环节松动，热区就变成一张“看不见的网”。
