html原生方案语义化强、兼容性好，但需严格匹配usemap与map的name值（大小写敏感、带#前缀），coords须按shape规则书写且不随缩放自适应，响应式需js动态重算坐标。
直接用 <map></map> + <area>，不是 CSS 也不是 JS 模拟——这是 HTML 原生支持的语义化方案，兼容性好、无障碍友好，但坐标不随缩放自适应，这点必须手动处理。
usemap 和 map 的 name 必须严格匹配
这是最常卡住的地方：<img usemap="#product-map"> 中的 #product-map，必须和 <map name="product-map"></map> 的 name 值完全一致（大小写敏感、不能多空格、不能少 #）。浏览器不会报错，但热区就是不响应。
-
usemap属性值必须带#前缀；<map></map>的name属性值绝对不能带# - 如果页面有多个
<map></map>，确保每个name唯一，且只被一张图引用 - 建议在
<img>上加alt，并在每个<area>上也加alt，否则屏幕阅读器无法识别区域功能
shape 和 coords 格式必须一一对应
<area> 的 shape 决定了 coords 的数值个数和含义，写错一个数，整个区域就偏移或失效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
shape="rect"：需 4 个值，格式为left,top,right,bottom（左上角 x,y + 右下角 x,y），例如coords="10,20,100,80" -
shape="circle"：需 3 个值，格式为centerX,centerY,radius，例如coords="150,60,30" -
shape="poly"：需偶数个值，按顺序列出所有顶点x,y，例如coords="200,10,250,30,230,90"（3 个点 → 6 个数字） -
coords中只能用英文逗号分隔，禁止空格；浏览器会静默忽略非法格式，不报错也不生效
图片缩放后热区错位？coords 不自动适配
原生 <area> 的坐标基于图片原始像素尺寸（即 <img> 的 naturalWidth/naturalHeight），一旦用 CSS 改变显示宽高（比如 width: 100% 或 max-width），热区就严重偏移。
- 最简方案：给
<img>设置固定width和height属性，与原始尺寸一致，禁用 CSS 缩放 - 响应式方案：监听
img.onload和window.resize，用 JS 计算缩放比scaleX = img.offsetWidth / img.naturalWidth，再遍历所有<area>，把coords字符串拆开、转数字、乘缩放比、拼回去赋值给area.coords - 别依赖
getBoundingClientRect()反推坐标——它受 transform、margin 等干扰，不稳定
需要点击触发 JS 而非跳转？去掉 href 再监听 click
如果不想页面跳转，只是弹窗、上报、切换内容，就别写 href，改用事件监听。注意：<area> 支持原生 click，但默认行为是跳转，所以要先阻止默认。
- 移除
href属性，加上data-id="btn-cart"这类标识 - 用
document.querySelectorAll('area[data-id]')获取全部热区元素 - 对每个元素调用
addEventListener('click', e => { e.preventDefault(); /* 自定义逻辑 */ }) - 不要用
onclick=""行内写法——难以维护，且无法动态增删热区
真正麻烦的不是写几行 <area>，而是坐标准确性验证和响应式缩放适配。坐标最好用图像编辑工具（如 GIMP、Figma 插件）导出，而不是肉眼估；缩放适配逻辑一旦写错，热区会在不同设备上随机失效，且很难复现调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
