纯HTML页面无法实现百度热榜，因其无网络请求能力；需Node.js代理中转绕过反爬与跨域限制，并处理数据嵌套、HTML实体解码及PC/移动端接口差异。
用 HTML 静态页面根本做不了百度热榜
百度热榜数据是动态实时更新的，HTML 本身不支持发起网络请求、解析 JSON、处理定时刷新——它只是个结构描述语言。你直接写 <div>热搜第1名：AI 写作</div>，这不算“做”，只是抄了个快照。
真要实现，必须搭配 JavaScript 发起请求，并处理跨域、反爬、接口鉴权等问题。纯 HTML 页面连 fetch() 都调用不了。
百度热榜 API 实际不可直接调用
百度没有开放官方公开 API。网上流传的接口（如 https://top.baidu.com/api/realtime）属于前端内部接口，依赖 token、sign、User-Agent、甚至 Cookie 中的 BDUSS，且规则频繁变动。
- 直接在浏览器控制台粘贴
fetch('https://top.baidu.com/api/realtime')会返回403 Forbidden或空响应 - 抓包看到的请求头里有
X-Requested-With、Referer、加密的sign参数，缺一不可 - 服务端校验 Referer 和 UA，本地 HTML 文件（
file://协议）发起的请求连请求头都发不出去
能跑起来的最小可行方案：用 Node.js 代理中转
绕过浏览器限制和前端反爬，得让请求从服务端发出。最轻量的做法是起一个本地代理服务，由它去请求百度接口，再把结果返回给前端 HTML 页面。
立即学习“前端免费学习笔记（深入）”；
示例（需安装 Node.js）：
npm init -y npm install express cors
新建 server.js：
const express = require('express');
const cors = require('cors');
const axios = require('axios');
const app = express();
app.use(cors());
app.get('/api/hot', async (req, res) => {
try {
const resp = await axios.get('https://top.baidu.com/api/realtime', {
headers: {
'User-Agent': 'Mozilla/5.0',
Referer: 'https://top.baidu.com/'
}
});
res.json(resp.data);
} catch (e) {
res.status(500).json({ error: e.message });
}
});
app.listen(3000, () => console.log('Proxy running on http://localhost:3000'));
然后你的 HTML 页面里用 fetch('/api/hot') 就能拿到数据了——但注意：/api/hot 是你自己的服务路径，不是百度的。
前端渲染时容易忽略的三个细节
就算接口通了，前端展示也常出问题：
- 百度返回的数据结构嵌套深，真实字段是
data.list[0].word，不是data.words[0]；字段名还可能突然变成word_display - 热榜标题含 HTML 实体（如
），直接innerHTML渲染会出乱码，得先decodeURIComponent()或用DOMParser - 百度接口返回的是 PC 端数据，移动端榜单排序、字段、甚至 URL 都不同，别拿 PC 接口硬套手机页面
热榜背后是持续维护的接口适配 + 容错逻辑，不是写完一个 fetch 就完事。每次百度改前端，你的页面就可能白屏一次。
