必须将文件命名为index.html，因其是Web服务器默认识别的首页文件名；保存时需确保扩展名为.html而非.txt，且用纯文本模式编辑、避免中文路径；推荐用Live Server等本地服务方式打开以支持相对路径和AJAX。
用任意文本编辑器新建文件并保存为 index.html
不需要专用工具，系统自带的记事本（Windows）、TextEdit（macOS 设为纯文本模式）或 VS Code 都能直接创建。关键在于文件名必须是 index.html，且扩展名不能是 .txt 或隐藏了扩展名——常见错误是保存成 index.html.txt，浏览器会当作普通文本打开，不解析 HTML。
操作建议：
- 在编辑器中新建空白文件 → 输入最简结构（如
<!DOCTYPE html><html><body>Hello</body></html>）→「另存为」→ 文件名栏手动输入index.html→ 保存类型选「所有文件」（不是「文本文档」） - macOS 用户注意：TextEdit 默认保存为富文本，务必先点菜单栏「格式 → 使纯文本」再保存
- 文件路径里避免中文和空格，比如放在
C:/my-site/或~/Desktop/test-site/下更稳妥
为什么必须叫 index.html？
这不是强制规定，而是 Web 服务器（包括本地双击打开、python -m http.server、VS Code Live Server）默认查找的首页文件名。如果叫 home.html，直接双击能打开，但用服务器访问 http://localhost:8000/ 就会 404。
常见场景差异：
立即学习“前端免费学习笔记（深入）”；
- 本地双击打开：
index.html、page.html都能运行，但只有index.html是“默认首页”语义 - 部署到 Nginx/Apache：默认
index.html是入口，可配置成index.php，但改名需动服务器配置 - GitHub Pages：只把
index.html当根路径首页，其他 HTML 文件需带完整路径访问
用命令行快速生成 index.html
适合习惯终端或需要批量操作的场景，比图形界面更快也更可控。
Windows（PowerShell）：
echo "<!DOCTYPE html><html><body>OK</body></html>" > index.html
macOS/Linux：
echo '<!DOCTYPE html><html><body>OK</body></html>' > index.html
注意点：
-
>是覆盖写入，>>是追加，别用错 - 单引号在 Linux/macOS 中防止 shell 解析
<，Windows PowerShell 用双引号也可，但统一用单引号更安全 - 生成后用
ls -l或dir确认文件大小不为 0，避免因引号嵌套错误导致空文件
打开 index.html 的三种方式及对应效果
不同打开方式影响资源加载行为，尤其是引用 ./style.css 或 fetch('./data.json') 这类相对路径时。
- 双击文件图标：URL 是
file:///.../index.html，现代浏览器会禁用fetch本地 JSON、禁止跨目录读取，适合静态内容预览 - 用 Python 起本地服务：
python3 -m http.server 8000，访问http://localhost:8000/，此时相对路径正常，AJAX 和 CSS/JS 加载无限制 - VS Code 安装 Live Server 插件后右键「Open with Live Server」：自动起服务并监听文件变化，开发阶段最推荐
最容易被忽略的是：用双击方式调试 AJAX 或模块化 JS，会卡在 CORS 或协议限制上，却以为是代码写错了。
