HTML5页面需部署到HTTP服务器才能生成可访问链接，如GitHub Pages提供免费方案；须检查路径相对性、MIME类型正确性及用户手势触发音视频播放。
HTML5 页面发布后怎么生成可访问的链接
HTML5 本身不是服务，只是静态文件；没有服务器托管，就不可能有对外可访问的链接。所谓“分享链接”，本质是把 index.html 及其依赖资源（js/、css/、图片等）部署到一个带 HTTP 服务的地址上，然后把这个地址发给别人。
- 本地双击打开的
file://路径不能分享——浏览器会因安全策略阻止跨文件加载资源，且别人无法访问你的硬盘路径 - 用 VS Code Live Server 启动的
http://localhost:5500也不能直接分享——这是本机回环地址，外部网络不可达 - 真正可用的链接必须形如
https://yourname.github.io/my-h5-game/或https://cdn.example.com/demo.html
GitHub Pages 是最简免费方案（适合个人/轻量 H5）
如果你的 HTML5 项目是纯静态（无后端、不读 Cookie、不调用需鉴权的 API），GitHub Pages 几乎零配置就能出链接。
- 仓库设为 Public，根目录放好
index.html（或放在docs/子目录） - 进入
Settings → Pages，Source 选Deploy from a branch，Branch 选main / master，Folder 默认/ (root) - 保存后几秒内会生成类似
https://username.github.io/repo-name/的链接 - 注意：路径区分大小写，
Index.html≠index.html；子目录资源引用要用相对路径，比如./js/main.js，避免硬编码http://localhost:8080/js/main.js
国内常用替代方案及关键差异
GitHub 访问不稳定或需中文域名时，可选语雀、腾讯云 COS、Vercel、Gitee Pages 等，但行为细节不同：
从 Git 仓库历史中彻底删除文件
下载
|Git删除了文件，但还会在Git 仓库历史中遗留。 - 想要从 Git 历史移除敏感信息（密码、密钥、token、私钥） - 想要删除意外提交的大文件 - 想要重写 Git 历史、移除特定文件的所有痕迹 - 提到 "force push"、"重写 commit 历史" - 需要从所有分支、所有 tag 中删除某个文件
-
语雀：上传 ZIP 后自动解压并分配
https://www.yuque.com/xxx/yyy/zzz，但不支持自定义域名，且对history.pushState路由（如 React Router）默认 404，需手动开启「SPA 模式」 -
腾讯云 COS + CDN：需设置存储桶为「静态网站托管」，并把
index.html设为索引文档；CDN 回源路径要配对，否则/page2.html会 404 -
Vercel：拖拽上传或连 GitHub 自动部署，链接形如
https://my-h5.vercel.app；对 SPA 友好，但免费版日志只保留 24 小时 -
Gitee Pages：类似 GitHub Pages，但构建有时延，且不支持
CNAME绑定（除非企业版）
分享前必须检查的三件事
链接生成后立刻失效？别人打不开？大概率卡在这几个地方：
立即学习“前端免费学习笔记（深入）”；
-
console.log报错net::ERR_ABORTED或404：检查所有<script src="..."></script>和<link href="...">中的路径是否以/开头（绝对路径）——这会让浏览器从域名根目录找，而非当前页面所在子路径；应改用./js/app.js或js/app.js - 微信内白屏或提示「不支持打开」：确保服务器返回的
Content-Type是text/html; charset=utf-8，不是application/octet-stream（常见于 COS/Gitee 未正确配置 MIME 类型） - 动画卡顿、音效不播：部分平台（如微信内置浏览器）会禁用
autoplay，需用户手势触发（如点击按钮后再play()）；不要依赖页面 onload 就自动播放音频
<button id="start">点击开始</button>
<audio id="bgm" src="music.mp3"></audio>
<script>
document.getElementById('start').onclick = () => {
document.getElementById('bgm').play().catch(e => console.warn('音频未就绪', e));
};
</script>
路径、MIME、交互时机——这三个点没对齐，再短的 HTML5 也分享不出去。
