直接用<map>和<area>可实现图片热点，但usemap与map的name必须逐字节一致（含#、大小写、连字符），coords基于原始图片尺寸且格式须严格匹配shape类型，缩放后需JS重算或改用SVG。
直接用 <map> 和 <area> 就能做出可点击区域，但坐标错一位、usemap 少个 #、coords 多个空格，整个热区就失效——不是代码没写，是匹配断了。
usemap 和 map name 必须严格一致（含 # 和大小写）
<img usemap="#floorplan"> 对应的 <map name="floorplan"> 才生效；写成 usemap="floorplan"（缺 #）或 <map name="FloorPlan">（大小写不一致），浏览器完全忽略，控制台也不报错。
-
usemap值必须以#开头，且只认后面那一串名字 -
<map>的name属性值不能带#，也不能有空格或特殊字符 - 二者必须在同一个文档上下文中——
<map>不能放在<picture>内，也不能在 Shadow DOM 里而<img>在 Light DOM
shape 和 coords 格式必须精确匹配
shape="rect" 要 4 个数字：coords="10,20,100,80"（左上 x,y，右下 x,y）；shape="circle" 要 3 个：coords="50,60,25"（圆心 x,y，半径 r）；shape="poly" 必须偶数个数字，按顶点顺序排列：coords="10,10,90,10,90,90,10,90"。
-
coords中不能有空格，只能是英文逗号分隔的纯数字 -
poly坐标若为奇数个，Safari 和部分旧版浏览器会静默跳过该<area> - 所有坐标基于图片原始尺寸（
img.naturalWidth/img.naturalHeight），缩放后不会自动换算
href 不是随便填，移动端还有最小触控要求
href 必须是有效 URL：写 href="#section1" 不会跳锚点，href="" 或 href="#" 在多数浏览器里触发页面顶部跳转；想执行 JS，得用 href="javascript:void(0)" 并配 onclick="doSomething(); return false;"。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
- 移动端 Safari 对小热区响应迟钝，建议
poly区域最小宽高 ≥ 44px（物理像素） - 如果用
onclick，记得加event.preventDefault()或return false，否则 href 默认行为仍会执行 - 每个
<area>应配alt属性，既提升可访问性，也方便调试时快速识别区域用途
响应式图片下 coords 失效？别硬调像素值
用 CSS 缩放或 width/height 属性改变图片显示尺寸后，<area> 仍按原始分辨率匹配坐标，点击必然偏移。没有浏览器自动适配机制。
- 临时调试可用 JS 动态重算：
const scale = img.clientWidth / img.naturalWidth;，再遍历所有<area>，把coords字符串拆开、乘 scale、取整、拼回去 - 更稳的方案是改用 SVG：
<image>+<polygon>，所有坐标天然基于viewBox，缩放自动对齐 - 别用
background-image+<div>模拟热区——<map>只对<img>生效
真正卡住人的从来不是怎么写标签，而是坐标从哪来、是否对应原始图尺寸、以及 usemap 和 name 这一对字符串有没有在某个复制粘贴时悄悄变了大小写或多了空格。
