html 文件需经 http 服务器托管才能上线；本地双击属 file:// 协议，无效；可用 python3 -m http.server 8000 临时局域网访问；正式部署推荐 vercel/netlify/github pages，注意路径、大小写及 spa 路由配置。
html 文件本身不是网站，只是网站的“一张纸”；要变成能被别人访问的网站，关键在「让服务器托管它，并对外暴露可访问的地址」。
怎么把本地 index.html 变成别人能打开的网页
你双击打开的 index.html 是通过 file:// 协议读取的，浏览器不走网络、不经过服务器——这根本不算“上线”。真正上线必须走 http:// 或 https://，意味着需要一个 HTTP 服务器响应请求。
- 最简方案：用 Python 快速起一个临时服务——
python3 -m http.server 8000（当前目录下运行），然后别人访问你的局域网 IP 加端口，比如http://192.168.1.10:8000 - 正式上线必须部署到支持 HTTP 的主机，比如 Vercel、Netlify、GitHub Pages（静态页免费）、或者买云服务器配 Nginx
- 注意路径问题：
./css/style.css在本地双击会失败（跨协议限制），但走http://就正常——这是初学者最常卡住的地方
GitHub Pages 部署时 404 或资源加载失败
GitHub Pages 默认只识别 index.html 作为入口，且对路径大小写敏感、不支持 file:// 相对路径的本地逻辑。
- 确保项目根目录有
index.html，且所有引用用相对路径，比如<link rel="stylesheet" href="css/style.css">，而不是./css/style.css或绝对路径/css/style.css（除非你配置了base） - 仓库名如果是
username.github.io，就用默认分支（通常是main）根目录；如果是其他仓库，必须在 Settings → Pages 里选分支 + 文件夹（如/docs） - 图片或 JS 报 404？检查浏览器开发者工具 Network 标签页里的实际请求地址，对比文件是否真在那个路径下——GitHub Pages 不会自动重写路径
为什么用 Vercel/Netlify 比自己搭服务器更省事
它们专为静态网站优化，自动处理 HTTPS、CDN、缓存头、甚至 _redirects 路由规则，而自己配 Nginx 容易漏掉 try_files 导致单页应用（SPA）路由 404。
- Vercel 默认开启
static hosting，拖拽上传或连 GitHub 仓库，几秒就生成带 HTTPS 的域名，比如my-site.vercel.app - 如果用了
history.pushState（如 Vue Router 或 React Router 的 BrowserRouter），需在项目根目录加vercel.json或_redirects文件，把所有路径 fallback 到/index.html - 不要手动改
dist目录下的 HTML 中的href/src为绝对 URL——构建工具（如 Vite、Webpack）通常能自动处理 public 资源路径
真正的难点不在写 HTML，而在理解「浏览器怎么拿到它」——路径是相对谁、协议是否允许、服务器有没有正确返回 200、CDN 是否缓存了旧版。这些环节任一出错，页面就白屏或断资源，而且错误提示常常藏在 Network 面板里，不点开根本看不到。
立即学习 “ 前端免费学习笔记（深入）”；
