可用记事本、TextEdit(设为纯文本)、VS Code等编辑HTML,保存为UTF-8无BOM;双击打开可预览,但开发推荐Live Server或python3 -m http.server;路径须相对于HTML文件,注意大小写和404错误。
直接用文本编辑器就能编辑 HTML 文件,不需要专用工具;所谓“HTML 编辑器”只是帮你写得更快、更少出错,不是必需品。
index.html 最简单Windows 自带的记事本(notepad.exe)、macOS 的 TextEdit(需设为纯文本模式)、VS Code、Sublime Text、Vim 都能直接打开并保存 .html 文件。关键不是工具多高级,而是保存时编码选 UTF-8,且不带 BOM —— 否则中文可能乱码或页面顶部空白。
Save with Encoding → UTF-8
Format → Make Plain Text
.html,它们会塞一堆私有标签和样式,浏览器很难正确解析双击打开 index.html 是最直接的方式,浏览器会加载本地文件(地址栏显示 file:/// 开头)。但注意:某些功能(比如 fetch() 加载本地 JSON、Service Worker)在 file:// 协议下会被浏览器禁用。
Live Server,右键 HTML 文件 → Open with Live Server,自动起一个 http://localhost:5500 服务python3 -m http.server 8000(Python 3),然后访问 http://localhost:8000/index.html
Ctrl+R(Windows/Linux)或 Cmd+R(macOS),别只点地址栏回车 和 路径写错的典型表现页面空白、样式丢失、按钮没反应、控制台报 404 或 net::ERR_FILE_NOT_FOUND,大概率是路径问题。HTML 中的路径永远相对于当前 HTML 文件位置,不是相对于编辑器打开的文件夹根目录。
index.html 和 style.css 在同一目录,写
css/style.css,就写 href="css/style.css";不能写成 href="./css/style.css"(虽然多数情况也行,但 ./ 是冗余的),确保 URL 可访问(可粘贴到浏览器地址栏测试)Image.jpg ≠ image.jpg,Windows 通常不敏感但不要依赖它我的页面 Hello World
![]()
路径错误往往藏在 href 和 src 里,而不是语法本身;调试时优先看浏览器开发者工具的 Network 标签页,找红色 404 请求。