diff --git a/README.md b/README.md
index a5cfa21..61635db 100644
--- a/README.md
+++ b/README.md
@@ -8,6 +8,10 @@
 
 您可以将本项目代码部署在服务器上（在本地运行也可），程序会每隔一分钟拉取一次微博热搜数据，并保存为 `json` 格式文件。
 
+## 数据预览
+
+在部署并启动项目后，您可以在浏览器中打开 `html/index.html` 文件实时预览当前热搜。
+
 ## 数据来源
 
 微博热搜接口：https://weibo.com/ajax/statuses/hot_band
diff --git a/html/index.html b/html/index.html
new file mode 100644
index 0000000..29c67f9
--- /dev/null
+++ b/html/index.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>微博热搜</title>
+    <style>
+        #list {
+            width: 100%;
+            text-align: center;
+            border-spacing: 0;
+        }
+
+        #list td {
+            margin: 0;
+            border: 0.5px solid black;
+        }
+    </style>
+</head>
+
+<body>
+    <p id="latestUpdateTime"></p>
+    <table id="list"></table>
+    <script>
+        var getDateCount = 0;
+        getData();
+        window.onload = function () {
+            setInterval(getData, 10 * 1000);
+        };
+
+        function getData() {
+            var xhr = new XMLHttpRequest();
+            xhr.open("GET", "../data/latest.json?t=" + Date.now(), true);
+            xhr.send();
+            xhr.onreadystatechange = function () {
+                if (xhr.readyState == 4 && xhr.status == 200) {
+                    var data = JSON.parse(xhr.responseText);
+                    console.log(data);
+
+                    /**
+                     * 更新时间
+                     */
+                    document.getElementById("latestUpdateTime").innerHTML =
+                        "数据拉取时间：" + new Date().toLocaleString() + "<br/>" +
+                        "拉取次数：" + ++getDateCount + "<br/>" +
+                        "热榜更新时间：" + new Date(data.update_time).toLocaleString();
+
+                    /**
+                     * 渲染热搜列表
+                     */
+                    let hotBandList = data.data;
+
+                    var str = [];
+                    // 渲染表格
+                    str.push(`<tr>
+                        <td>编号</td>
+                        <td>类型</td>
+                        <td>热搜</td>
+                        <td>表情</td>
+                        <td>热度<br/><span style="font-size: 10px;">(展示/真实)</span></td>
+                        <td>分类</td>
+                        <td>热搜上线时间</td>
+                        <td>是否新热搜</td>
+                        <td>热搜详情</td>
+                        <td>mid</td>
+                    </tr>`);
+                    for (var i = 0; i < hotBandList.length; i++) {
+                        const hotBand = hotBandList[i];
+                        let hotDelta = hotBand.num - hotBand.raw_hot;
+                        str.push(`<tr>
+                            <td>${i + 1}</td>
+                            <td><span style="background-color: ${hotBand.more.icon_desc_color}; color: white; padding: 3px; border-radius: 6px; font-size: 10px;">${hotBand.label_name}</span></td>
+                            <td><a href="${hotBand.url}" target="_blank">${hotBand.word}</a></td>
+                            <td>${hotBand.emoticon}</td>
+                            <td>
+                                <nobr><span style="font-size: 14px;">${hotDelta == 0 ? hotBand.num : `${hotBand.num} / ${hotBand.raw_hot}`}</span></nobr><br/>
+                                <nobr>
+                                    <span style="font-size: 10px; color: ${hotDelta > 0 ? "red" : "green"}; font-weight: bold;">
+                                        ${hotDelta != 0 ? `(官方调控 ${hotDelta > 0 ? "+" : ""}${hotDelta})` : ""}
+                                    </span>
+                                </nobr>
+                            </td >
+                            <td>${hotBand.category.map((c) => `<nobr>${c}</nobr>`).join('<br>')}</td>
+                            <td style="font-size: 10px;">${new Date(hotBand.onboard_time * 1000).toLocaleString()}</td>
+                            <td>${hotBand.more.is_new == 1 ? "是" : "否"}</td>
+                            <td>
+                                <div style="font-size:10px; max-width: 300px; display: inline-block;">${hotBand.more.detail}</div>
+                            </td>
+                            <td style="font-size: 14px;">${hotBand.more.mid}</td>
+                        </tr >`);
+                    }
+                    document.getElementById('list').innerHTML = str.join('');
+                }
+            }
+        }
+    </script>
+</body>
+
+</html>
\ No newline at end of file
