原生+热区方案无需js/css，但需严格匹配usemap="#name"与（含大小写符号）；shape与coords须格式正确；响应式缩放需js动态重算坐标或改用svg；必须设alt、有效href，且与同dom上下文。
直接用 <map></map> 和 <area> 就能实现，不需要 JS、不依赖 CSS，原生语义化方案，IE6 都支持。
usemap 和 map name 必须严格匹配（大小写+符号）
这是最常卡住的地方：图片的 usemap 属性值必须以 # 开头，且和 <map name></map> 的值**完全一致**，包括大小写、空格、连字符。
-
<img src="map.jpg" usemap="#product-map">→ 对应的<map name="product-map"></map> - 写成
usemap="product-map"（漏掉#）或<map name="Product-Map"></map>（大小写错）都会让整个热区失效 - 浏览器不会报错，只是点击无反应——调试时先检查控制台是否出现
Failed to load resource，再核对这两个字符串是否逐字相同
shape 和 coords 必须配对正确（格式/顺序/分隔符）
shape 决定了 coords 的格式和含义，写错一个数字或逗号位置，区域就偏移甚至消失。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
shape="rect"：需 4 个值，coords="x1,y1,x2,y2"（左上角 + 右下角），不能写成"x1, y1, x2, y2"（带空格） -
shape="circle"：需 3 个值，coords="cx,cy,r"（圆心 x、y + 半径），半径不能为 0 -
shape="poly"：需偶数个值，coords="x1,y1,x2,y2,x3,y3,x4,y4"，顶点按顺时针或逆时针列，不能交叉，也不能少写一对 - 所有
coords值都是整数像素，基于图片**原始尺寸**（不是 CSS 渲染后的宽高）
响应式缩放后热区错位？coords 不会自动适配
只要给 <img> 加了 width: 100% 或 max-width，原生 <area> 的坐标就立刻失效——因为浏览器仍按图片原始像素计算点击命中，但视觉区域已缩放。
- 临时调试：给
<img>加style="max-width:90%"，用开发者工具截图比对实际坐标 - 可靠解法：监听
window.resize和img.load，用 JS 读取图片自然宽高（img.naturalWidth）、当前显示宽高（img.offsetWidth），算出缩放比，再遍历更新每个area.coords - 更轻量替代：改用 SVG 热区（
<svg></svg>+<path></path>），天然响应式，但需重绘路径
移动端和可访问性容易被忽略的细节
看似简单，但在真实项目里，这两点最容易导致上线后被用户投诉或测试卡住。
-
<area>必须带alt属性，比如alt="点击进入耳机详情页"，否则屏幕阅读器无法识别，WCAG 不合规 - iOS Safari 对小面积
poly区域响应迟钝，建议最小热区物理尺寸 ≥ 44×44px（对应原始图尺寸），否则手指点不中 -
href不能只写#detail，必须是有效 URL，如href="./product.html#detail"；写成href="#"或空字符串会触发页面跳顶，且部分浏览器静默失败 -
<map></map>必须和<img>在同一 DOM 上下文，如果<img>在 Shadow DOM 里，外部<map></map>默认不可见
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
