必须包含 DOCTYPE 声明、UTF- 8 编码和 title 标签，用相对路径组织文件，本地测试需 HTTP 服务而非双击，上线前检查文件名小写、资源可直访、字体 MIME 类型正确。

直接上手建一个能访问的 HTML 网站，不需要框架、不依赖托管平台，核心就三件事：写对 index.html、放对文件结构、用对方式打开或部署。其他“教程”常把简单事绕成迷宫，这里只说你真会卡住的地方。

怎么写一个浏览器能正确解析的 index.html

不是所有 HTML 都能被当成网页加载——尤其本地双击打开时，缺关键标签会触发怪异行为（比如中文乱码、样式失效、JS 不执行）。

• 必须包含 声明，否则 IE/ 旧 Edge 进入怪异模式，flex 或 grid 可能完全失效
• 里必须有 ，否则本地打开时中文显示为方块或问号
• 不是可选装饰，缺失会导致浏览器标签页显示空名，SEO 和书签功能直接受损
• 避免在 外写内容（比如把

  直接丢在 后面），部分浏览器静默忽略，但 Chrome DevTools 会标红警告

             
 你好
  

静态文件怎么组织才不会 404

本地双击 index.html 和部署到服务器，路径解析规则不同——这是 90% 的图片 / 样式 / 脚本加载失败的根源。

• 本地双击打开时，浏览器以 file:// 协议运行，./css/style.css 会被解析为当前文件所在目录下的相对路径，但跨目录引用（如 ../images/logo.png）容易因误点子目录文件而断链
• 部署到服务器（如 Nginx/Apache）后，所有路径按 URL 解析：/css/style.css 指网站根目录下的 css/ 文件夹，和物理文件位置无关
• 推荐统一用 ** 相对路径 ** 起步：css/style.css（无开头斜杠）、images/icon.svg；等确定部署方式后再决定是否加 / 转绝对路径
• 图片路径写错常见现象： → 实际文件夹名是 img（大小写敏感！Linux 服务器上必 404）

本地测试别用双击，改用简易 HTTP 服务

双击打开 index.html 看似快，但会禁用 fetch、阻止跨域请求、无法读取本地 JSON，连 localStorage 都可能受限——这不是你的代码问题，是浏览器安全策略。

立即学习 “ 前端免费学习笔记（深入）”；

• Python 3 用户：终端进入项目根目录，运行 python3 -m http.server 8000，然后访问 http://localhost:8000
• Node.js 用户：全局安装 serve（npm install -g serve），运行 serve -s .
• VS Code 用户：装插件 Live Server，右键 index.html →“Open with Live Server”，自动启动并监听文件变化
• 切记：只要用了 fetch、XMLHttpRequest、或引入了外部字体（如 Google Fonts），就必须走 http:// 协议，否则控制台报 net::ERR_FILE_NOT_FOUND 或 CORS 错误

上线前必须检查的三个硬性条件

很多“建好了”的网站传到服务器后打不开，往往卡在这三点，且错误不报在页面上，只藏在浏览器控制台或服务器日志里。

• index.html 文件名必须全小写、无空格、无中文——某些 Linux 主机（尤其是共享虚拟主机）对大小写敏感，Index.html ≠ index.html
• 所有资源路径（CSS/JS/ 图片）必须能在浏览器地址栏直接粘贴访问，例如打开 http://yoursite.com/css/main.css 应返回 CSS 内容，而不是 404 页面或下载弹窗
• 如果用了自定义字体或图标字体（如 Font Awesome），确认 @font-face 中的 url() 路径正确，且服务器允许该 MIME 类型（.woff2 需配置 application/font-woff2）

真正麻烦的从来不是写 HTML，而是路径、协议、大小写这三样东西在不同环境里反复咬人。先跑通本地 http://localhost，再上传，比一边双击一边猜错因高效得多。