html中无原生标签，需通过hotjar等第三方js脚本嵌入，其依赖行为采集、服务端聚类与延迟渲染，非静态css可实现。
HTML 里不能直接“插入热力图”，你得靠第三方服务或自己用 JavaScript 渲染——没有 <heatmap></heatmap> 这种原生标签。
怎么用第三方工具嵌入（比如 Hotjar、Mouseflow）
主流热力图服务都不提供纯 HTML 标签，而是要求你在页面 或 底部插入一段 JS 脚本。这段脚本会自动监听点击、滚动、悬停行为，并上报到它们的后台生成热力图。
- 复制服务商后台给你的唯一
script片段（通常带data-site-id或类似参数） - 粘贴到你 HTML 文件的
里（或最底部），确保它在其他 JS 执行前加载 - 别手动改
src地址或删async属性——有些服务依赖异步加载时机来捕获首屏行为 - 本地开发时可能看不到数据：这些脚本默认过滤
localhost和127.0.0.1，得配域名或临时切测试环境
为什么不能用 CSS + HTML 自己画热力图
热力图本质是聚合用户行为数据（比如 1000 次点击落在按钮 A 的坐标范围），不是静态视觉效果。你用 div 叠个半透明红色块，那只是假热力图，没数据支撑，也不能随真实点击动态更新。
- 真热力图需要客户端采集坐标（
event.clientX/clientY）、页面尺寸、滚动偏移，再做归一化处理 - 服务端还得存大量原始点位，做密度聚类（比如 DBSCAN），前端只负责渲染结果
- 自己实现容易卡顿：每秒几十次 mousemove 上报，不节流直接崩
fetch队列
常见错误：插了脚本但后台没数据
不是脚本没生效，大概率是触发条件没满足。这类工具普遍有静默过滤机制：
立即学习“前端免费学习笔记（深入）”；
- 页面 URL 匹配规则不对：
https://a.com/page和https://a.com/page/算两个路径，后台要手动加通配符 - 用户没达到最小样本量：Hotjar 默认要 50+ 独立访客才生成热力图，新上线页面等两天再看
- JS 报错阻断执行：打开浏览器控制台，筛选
hotjar或mouseflow，看有没有ReferenceError或CORS错误 - 广告屏蔽插件拦截：部分工具域名（如
script.hotjar.com）被 uBlock Origin 默认屏蔽，需临时关闭验证
热力图从来不是“插上就亮”的灯泡，它依赖数据积累、路径匹配和客户端行为采集的完整链路。最常被忽略的是：你看到的热力图永远滞后 24 小时以上，而且只反映“愿意加载 JS 并允许追踪”的那批用户——这部分人本身就有偏差。
