必须将文件命名为index.html,因其是web服务器默认识别的首页文件名;保存时需确保扩展名为.html而非.txt,且用纯文本模式编辑、避免中文路径;推荐用live server等本地服务方式打开以支持相对路径和ajax。

用任意文本编辑器新建文件并保存为 index.html
不需要专用工具,系统自带的记事本(Windows)、TextEdit(macOS 设为纯文本模式)或 VS Code 都能直接创建。关键在于文件名必须是 index.html,且扩展名不能是 .txt 或隐藏了扩展名——常见错误是保存成 index.html.txt,浏览器会当作普通文本打开,不解析 HTML。
操作建议:
- 在编辑器中新建空白文件 → 输入最简结构(如
Hello)→「另存为」→ 文件名栏手动输入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 "OK" > index.html
macOS/Linux:
echo 'OK' > 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 或协议限制上,却以为是代码写错了。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!











