html 无法生成动态热度趋势图，因其仅为标记语言，无计算与绘图能力；静态方案仅限手写svg路径、嵌入预生成图片或css轮廓占位，所有动态功能均依赖js、后端或人工导出。
HTML 本身不能直接生成热度趋势图——它只是骨架，没计算、没绘图能力；所谓“7日曲线静态占位”，本质是用 HTML 搭结构 + CSS 画简易柱状/折线轮廓 + 可能嵌入一张提前生成的 PNG/SVG 图。
为什么不能纯 HTML 实现动态趋势图
HTML 是标记语言，不执行逻辑、不读取数据、不渲染图形。你看到的“曲线”，要么是：<svg></svg> 里手写路径（静态）、<canvas></canvas> 里 JS 绘制（需 JS）、或直接 <img src="trend-7d.png"> 引入预生成图。所谓“HTML 教程”标题，大概率混淆了前端技术栈边界。
用 <svg></svg> 手绘一条 7 日折线（最轻量静态方案）
适合数据固定、不常更新的占位场景。关键不是“怎么画美”，而是“怎么对齐坐标、别拉错比例”：
-
<svg width="700" height="300"></svg>—— 宽高定死，避免缩放失真 - X 轴每格 100px 对应 1 天，7 天共 600px 内部绘图区（留边）
- Y 轴按最大值归一化：比如最高热度 1200 → 映射到
y=40（底部 y=260），公式：y = 260 - (value / 1200) * 220 - 用
<polyline></polyline>连点，点坐标必须是字符串，如"100,220 200,180 300,200 ..."，空格分隔，不能换行 - 别漏
stroke="#3b82f6" fill="none" stroke-width="2"，否则线看不见
用 <img> 嵌入静态图（最稳妥占位方式）
运营或数据分析同学导出 PNG/SVG 后，前端只需插入并控制尺寸：
- 路径必须相对准确：
<img src="./assets/trend-weekly.svg" alt="7日热度趋势">，注意./assets/是常见存放位置 - 加
width="100%"和height="auto"保证响应式，但 SVG 会保持矢量清晰，PNG 在高清屏可能发虚 - 如果图里含中文，确保 SVG 中字体已转为路径，或 PNG 字体已嵌入，否则上线后文字变方块
- 别用 base64 写死在 HTML 里——体积大、无法缓存、改图要动 HTML
容易被当成“HTML 功能”但其实依赖外部的东西
很多所谓“HTML 热度图教程”实际偷偷混入了其他技术，上线前务必厘清：
-
Chart.js或ECharts的调用代码 ≠ HTML 功能，它们是 JS 库，需要<script src></script>加载，且依赖数据接口 -
data-* 属性存数值（如data-day1="842"）只是存着，不自动成图——得配 JS 解析+绘图 - CSS 动画（如
@keyframes rise）只能模拟上升动作，不能反映真实数值变化，慎用于数据展示 - 服务端渲染的 HTML 片段（如 PHP/Node 输出带
<svg></svg>的 HTML）——那已是服务端逻辑，和纯静态 HTML 无关
真正只靠 HTML + 基础 CSS 能做的，就是搭个容器、塞张图、或手写几条线。数据来源、坐标计算、交互响应，这些都得明确交给谁——JS、后端，还是人工导出。别让“HTML”三个字母模糊了责任边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
