usemap属性必须带#前缀且与map的name值严格一致；coords基于原始像素，缩放后失效；响应式场景应改用SVG或绝对定位+事件委托方案。
usemap 的 # 符号漏掉就完全失效
浏览器不会报错，但整个热区图点击无反应——这是最常被忽略的硬性规则。usemap 属性值必须带 # 前缀，且与 <map name="xxx"></map> 中的 name 值严格一致（含大小写）。
-
<img usemap="#navmap">必须对应<map name="navmap">，写成usemap="navmap"或name="NavMap"都会断连 - coords 坐标基于原始图片像素尺寸，不是 CSS 渲染后的宽高；图片用
width或max-width: 100%缩放后，热区必然偏移 - 不支持语义化焦点管理，键盘 Tab 无法进入
<area>，alt和href缺一不可，否则无障碍阅读器跳过该区域
响应式图片热区别用 map，改用绝对定位 + 事件委托
当图片需要随视口缩放时，<map> 的 coords 失效是设计使然，不是 bug。更可靠的方案是把图片设为容器背景，再用 position: absolute 叠加可点击元素。
- 背景图用
background-size: 100% 100%（禁用cover），确保像素坐标线性映射 - 可点击区域（如
<button id="donut">）设为position: absolute，用top: 72.2%、left: 50.5%等百分比精确定位 - 所有交互统一走事件委托：
container.addEventListener('click', e => { if (e.target.matches('[data-hotspot]')) {...} }) - 移动端需确保
min-width: 48px、min-height: 48px，避免仅靠font-size或padding撑尺寸
用原生 button 替代 div 实现可点击区域
小屏点不中按钮，主因是 DOM 语义缺失：屏幕阅读器跳过、无 :focus、触摸目标不足 48×48px。这不是样式问题，是标签选错了。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 把
<div class="btn">Submit</div>改成<button type="button" class="btn">Submit</button> - 禁用
role="button"伪装——它不自动获得焦点，不响应 Space/Enter，在部分安卓 WebView 中完全失效 - 文字按钮必须加
padding，总可触面积（含 border、padding）≥ 48×48px；只设width: 48px; height: 48px不够 - DOM 嵌套别超过 4 层，实测 6 层结构在低端安卓机上
touchstart延迟达 42ms
SVG 热区比 map 更适合现代响应式场景
SVG 是矢量图形，天然响应式，坐标系独立于渲染尺寸，还能直接绑定事件、加动画、支持 ARIA。
立即学习“前端免费学习笔记（深入）”；
- 用
<svg viewBox="0 0 800 600">定义原始坐标系，内部<circle cx="400" cy="300" r="50">会随容器缩放自动适配 - 每个热区直接加
onclick或用事件委托监听svg.addEventListener('click', ...) - 支持
aria-label、focusable="true"，键盘 Tab 可聚焦，Enter可触发 - 相比
<map>，维护成本低、样式灵活、无需外部工具取坐标，多边形热区也只需写<polygon points="...">
实际项目里，<map> 只适合静态示意图或后台管理页这类尺寸固定、无缩放需求的场景。一旦涉及响应式、触摸交互、无障碍，就得切到 SVG 或绝对定位方案——不是技术不够，而是语义和行为模型根本不同。
