area标签本身不渲染且无样式能力，必须嵌套在map中并严格匹配usemap与name属性；coords基于原始尺寸，缩放需js重算；href和alt为必需属性，提升交互需用css+js覆盖层方案。
原生 area 标签本身不渲染、不响应 hover、不支持 CSS 样式，所谓“提高交互体验”不是靠它自己，而是靠绕过它的限制、用它做底层逻辑支撑——否则热区点不准、点不中、无障碍失效，体验只会更差。
area 必须嵌套在 map 里，且 usemap 与 name 逐字节匹配
这是 90% 的热区失效原因。浏览器不做容错，只做字符串比对：大小写、连字符、下划线、空格、#号缺一不可。
-
usemap="#product-map"必须配<map name="product-map"></map>，不能是id="product-map" - 复制
usemap值后，直接右键图片 → “检查”，再点开<map></map>元素，用编辑器做纯文本比对（别靠眼睛扫） - 导出设计稿坐标时，手动删掉 coords 字符串里的换行和多余空格——
coords="10,20,100,120"合法，coords="10, 20, 100, 120"在部分浏览器中会被静默忽略
coords 坐标永远基于原始图片尺寸，缩放后必须 JS 重算
CSS 缩放图片（比如 width: 100%; max-width: 600px）会让 area 热区严重偏移——它绑定的是 img.naturalWidth，不是渲染宽高。
- 原始图 1200×800，
coords="0,0,100,100"指左上角 100×100 区域；缩放到 375px 宽后，该区域在屏幕上仅约 31×21px，远低于触控最小推荐尺寸 44×44px - 必须监听
img.addEventListener('load', updateCoords)和window.addEventListener('resize', updateCoords) -
updateCoords()中读取img.naturalWidth / img.offsetWidth得到缩放比，再遍历所有area，把每个coords数值乘以该比值（注意保留整数）
href 和 alt 是硬性必需属性，不是可选提示
漏掉 href，点击无跳转行为；漏掉 alt，部分浏览器直接忽略该 area，且无障碍访问完全失效。
-
alt不是“描述形状”，而是功能说明，例如：alt="点击进入北京站时刻表"，而非alt="矩形区域" - 即使绑了
onclick，也必须有href（哪怕设为href="#"），否则旧版 Safari 可能不触发事件 -
title属性不会触发 tooltip，aria-label也不被屏幕阅读器识别——alt是唯一合法的无障碍入口
真正提升体验要靠覆盖层 + CSS + JS 组合方案
想加 hover 效果、焦点反馈、视觉高亮？不能直接操作 area，它没 DOM 节点、没盒模型、不支持伪类。得用 JS 动态生成 <div class="hotspot"> 覆盖在对应位置上，再用 CSS 控制样式。
<ul>
<li>先用 <code>area 定义逻辑区域（保证语义、SEO、基础可点击性）
area.coords 和 shape，结合图片 naturalWidth/Height 和当前渲染尺寸，计算出覆盖层的 left/top/width/height 或 clip-path
.hotspot 加 transition、background、box-shadow、pointer-events: auto，并用 :focus-within 或 :hover 做反馈position: absolute 相对于图片容器定位，且 z-index 高于图片但低于其他交互元素最易被忽略的一点：area 的坐标系统没有“相对单位”，没有百分比，没有响应式语法。你写的每一个数字，都是对原始像素的绝对承诺。设计稿改了尺寸、前端换了缩放方式、用户开了系统字体放大——只要没重跑 JS 重算 coords，热区就一定错位。
