纯 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 就完事。每次百度改前端，你的页面就可能白屏一次。
