纯HTML无法实时渲染股票行情或绘制K线图，因其仅负责结构，需JavaScript配合API或SDK实现数据获取、计算与Canvas/SVG绘图。
纯 HTML 无法实时渲染股票行情或绘制 K 线图——它没有数据获取能力，也没有图形计算和 canvas/svg 绘图逻辑。所谓“HTML 股票行情页”，实际是 HTML + JavaScript（配合后端 API 或第三方行情 SDK）的组合体，HTML 只负责结构和容器。
为什么直接写 HTML 画不出 K 线
HTML 是标记语言，不处理时间序列数据、不计算 OHLC（开盘/最高/最低/收盘）、不响应价格变化。K 线本质是动态 SVG 或 Canvas 图形，依赖 JS 解析数组数据并逐根绘制。常见错误是把 index.html 当成完整解决方案，结果页面空白或只显示静态文字。
-
<div id="chart"></div>这类容器标签必须存在，但本身不产生任何图形 - 若没引入
chart.js、lightweight-charts或自研绘图逻辑，document.getElementById("chart")拿到的是空 DOM 节点 - 用
<img src="kline.png">硬塞截图？那不是行情页，是截图快照，无法交互、不能缩放、数据过期即失效
轻量级方案：用 lightweight-charts + HTML 容器
这是目前最接近“HTML 页面起步”的可行路径：HTML 提供结构，JS 加载库+拉数据+绘图。关键不是写多少 HTML，而是怎么组织这三块。
- 在
<head>中通过<script src="https://s3.amazonaws.com/lightweight-charts/dist/lightweight-charts.standalone.production.js"></script>引入官方 CDN - 确保容器有明确宽高：
<div id="chart" style="width: 800px; height: 400px;"></div>（无尺寸则图表不显示） - JS 中调用
createChart()后，必须用addCandlestickSeries()+setData()才能出图；漏掉任一环节都会白屏 - 模拟数据可先用静态数组测试，例如：
[{ time: "2024-01-01", open: 10, high: 12, low: 9, close: 11 }]，注意time字段格式必须符合库要求（ISO 8601 或时间戳）
行情数据从哪来：避开免费陷阱
前端直接请求 A 股/港股/美股实时行情，99% 会跨域失败或被风控。别试 fetch("https://api.xxx.com/stock?code=sh600519") 这种裸调用。
立即学习“前端免费学习笔记（深入）”；
- 国内合规接口极少开放给前端直连，
akshare、baostock都需服务端代理，否则浏览器报CORS error - 聚合数据、和讯等“免费 API”通常限频、插广告、返回乱码字段（如把
close写成c），导致setData()报错"Invalid data item" - 真正可用的路径只有两条：自己搭 Node.js 代理转发（加 referer / token 鉴权），或用支持 WebSockets 的商业 SDK（如
tqsdk浏览器版，但需申请 license key）
移动端适配和性能卡点
K 线图在手机上缩放拖动卡顿，往往不是 HTML 写得不好，而是 JS 层没做优化。
-
lightweight-charts默认启用timeScale自动缩放，但数据点超 5000 根时，setData()会明显延迟；应提前在服务端聚合（比如 1 分钟线 → 15 分钟线）再传给前端 - 别在
resize事件里反复调用chart.timeScale().fitContent()，改用chart.timeScale().fitContent()+once("timeScaleVisibleTimeRangeChanged")防抖 - HTML 中避免用
viewport强制width=device-width, initial-scale=1，否则 iOS Safari 下双指缩放会被禁用——K 线图失去最基本交互
真正卡住进度的从来不是 HTML 标签怎么写，而是数据链路是否通、JS 图表库是否初始化成功、跨域和性能边界有没有提前踩坑。把 index.html 当起点可以，但别把它当终点。
