纯html无法实现真实访问统计，必须借助外部服务或github actions等后端机制；本地file://协议下fetch被禁用，需用本地服务器或部署到github pages等http环境测试。
怎么用纯HTML显示静态访问统计
纯 HTML 本身无法统计或显示真实访问次数——它没有后端能力，也不执行逻辑。所谓“HTML 显示浏览数”，本质是把统计逻辑交给外部服务（如第三方计数器、自建 API 或 GitHub Pages + JSON 文件），再用 HTML 配合 JavaScript 渲染出来。
直接在 里写个 <p>已访问 123 次</p> 是假数据，刷新不会变；真统计必须有服务端记录或持久化存储支持。
GitHub Pages 上怎么实现轻量级访问计数
适合个人作品页、简历页等静态站点。主流做法是用 GitHub Issues 或 GitHub Actions + gh-pages 分支存一个 JSON 计数文件，再通过 fetch() 读取并更新。
- 把计数存在
stats.json（例如放在/data/stats.json）里，内容为{"count": 123} - 页面加载时用
fetch('/data/stats.json')读取，成功后递增并写回（需配合 GitHub Action 自动提交） - 注意：浏览器跨域限制下，GitHub Pages 默认允许同域
fetch，但不能 POST 提交；实际写回必须走 Action 脚本，不能纯前端完成 - 更简单替代：用
visitors-badge.glitch.me这类免部署服务，在 HTML 里嵌入<img src="https://visitor-badge.glitch.me/badge?page_id=yourname.yourrepo?x-oss-process=image/resize,p_40">
document.write() 和 innerHTML 哪个适合插计数文本
都不推荐直接用 document.write()——它只在页面解析中有效，异步加载计数时调用会清空整个页面。必须用 DOM 操作定位容器再填值。
正确做法是：
- HTML 中预留一个带 id 的标签：
<span id="visit-count">0</span> - JS 获取后更新：
document.getElementById('visit-count').textContent = data.count - 避免用
innerHTML插数字，除非你确认内容绝对可信（防止 XSS）；textContent更安全、更轻量 - 如果统计接口慢，建议加 loading 占位符，比如初始设
textContent = '—'
为什么本地双击打开的 HTML 文件永远显示 0
因为浏览器对 file:// 协议禁用了 fetch、XMLHttpRequest 等网络请求——这是安全策略，不是代码写错了。
验证方式：打开 Chrome 控制台，看到类似 Access to fetch at 'xxx.json' from origin 'null' has been blocked 的错误。
- 解决办法只有两个：用本地服务器预览（如 VS Code 的 Live Server 插件、
npx serve），或部署到 GitHub Pages / Vercel 等支持 HTTP 的环境 - 别试图用
chrome --disable-web-security绕过，这不解决实际部署问题，还容易养成坏习惯 - 本地测试时可 mock 数据：
const data = {count: Math.floor(Math.random() * 100) + 50}，但上线前务必换成真实接口
最常被忽略的一点：统计位置本身不影响技术实现，但影响用户感知。把 <span id="visit-count"></span> 放在作品标题下方、页脚、或右上角小 badge 里都可以，关键是确保 JS 执行时该元素已存在于 DOM 中——要么放 body 底部，要么用 DOMContentLoaded 包裹逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
