area标签必须嵌套在map中且通过usemap关联图片，否则无效；coords需按原始尺寸设置并注意CSS缩放影响；不支持:hover等样式，复杂交互应改用SVG或JS实现。
area 标签必须嵌套在 map 里，单独写无效
浏览器会直接忽略孤立的 <area>，它不是独立可渲染元素。必须配合 <map> 使用，且图片需通过 usemap 属性关联。常见错误是把 <area> 当成普通按钮写在任意位置，结果点击无响应。
正确结构示例：
<img src="product.png" usemap="#product-map"> <map name="product-map"> <area shape="poly" coords="10,20,30,40,50,20" href="#motor" alt="电机模块"> <area shape="rect" coords="100,80,180,120" href="#sensor" alt="传感器阵列"> </map>
-
name和usemap的值要严格一致（注意开头的#只在usemap中需要） -
shape推荐用poly（多边形），复杂轮廓比rect或circle更贴合实际部件边界 -
coords坐标单位是像素，必须按顺时针或逆时针顺序列出顶点，奇数个坐标会截断或错位
coords 坐标不准？先确认图片是否被 CSS 缩放
如果产品图用了 width/height 属性或 CSS transform: scale()，<area> 的 coords 仍按原始图片尺寸计算，导致热区偏移。这是最常被忽略的兼容性问题。
- 用
<img>的width和height属性等比缩放，而非 CSS 控制尺寸 - 或者用 JavaScript 动态重算坐标：读取
img.naturalWidth和img.clientWidth，按比例缩放coords数组 - 调试技巧：临时加
border: 1px solid red到<map>看不到效果，但可以用 DevTools 的 “Toggle element screenshot” 功能叠加查看热区覆盖情况
需要 hover 效果或高亮？纯 HTML 不行，得靠 JS + SVG 模拟
<area> 不支持 :hover 伪类，也无法设置背景色或描边。想实现鼠标悬停高亮某部件、点击后标记已查看，必须引入额外逻辑。
立即学习“前端免费学习笔记（深入）”；
- 监听
map的click事件，用event.target区分不同<area> - 用
document.querySelector('area[href="#motor"]')定位后，动态插入一个带position: absolute的<div>覆盖对应区域（需同步计算偏移） - 更稳妥的做法是放弃
<area>，改用 SVG：<path>支持fill、stroke、pointer-events，且坐标系天然适配缩放
移动端点击失效？检查 touchstart 与 click 的触发时机
iOS Safari 和部分安卓浏览器对 <area> 的 click 事件有延迟或拦截，尤其在页面有 touchstart 监听器时。用户点一下没反应，其实是事件被吞了。
- 给
<map>添加ontouchstart="void(0)"可消除 300ms 延迟 - 不要在
<body>或父容器上用preventDefault()，否则会阻断<area>的默认跳转行为 - 真机测试比模拟器可靠——Chrome DevTools 的 device mode 无法准确复现
<area>的触摸穿透逻辑
<area> 只负责最基础的区域绑定。一旦需要状态管理、动画反馈或响应式适配，就得主动跳出这个标签的限制，用更可控的方式重建映射关系。 
