能直接双击打开的HTML文件需满足：文件名以.html结尾、编码为UTF-8、结构含<html><head><meta charset="UTF-8"></head><body>内容</body></html>，图片等资源用正斜杠相对路径；file://协议下无法运行AJAX等Web API，须用Live Server等本地服务器。
怎么快速写出一个能打开的 HTML 文件
直接新建一个纯文本文件，后缀改成 .html，用任意编辑器写几行最简结构，双击就能在浏览器里打开——不需要服务器、不需要编译、不依赖任何工具链。
常见错误现象：写完保存成 .txt 或没关掉编辑器的“自动加 .txt”功能，结果双击打不开，或者浏览器显示源码而不是渲染效果。
- 确保文件名是
index.html或page.html这类带.html后缀的，不是page.txt - 用记事本、VS Code、Sublime 等编辑器保存时，编码选
UTF-8（别用“ANSI”） - 最简可用结构只要三样：
<html>、<body>、一句文字，比如：<html> <body> Hello world </body> </html>
为什么 <head> 里要加 <meta charset="UTF-8">
不加这句，中文会变方块、问号或乱码，尤其你在 VS Code 里写了中文，保存为 UTF-8，但浏览器默认按 GBK 解析，就对不上。
这不是“推荐”，是实际运行的必要条件。现代编辑器默认存 UTF-8，但浏览器不会自动猜——它得靠这行声明来确认。
立即学习“前端免费学习笔记（深入）”；
-
<meta charset="UTF-8">必须放在<head>最前面，越早越好，最好紧贴<head>开始 - 别写成
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">，老写法兼容性差，且容易被忽略 - 如果用了中文标点、emoji 或用户输入内容，缺这句几乎必出问题
图片、CSS、JS 文件路径写不对，页面就“断腿”
浏览器加载 <img src="logo.png"> 时，找的是当前 HTML 文件所在目录下的 logo.png，不是编辑器打开的文件夹路径，也不是你心里想的“同级目录”。
路径错的典型表现：图片位置显示红叉、控制台报 404 Not Found、CSS 不生效、按钮点击没反应。
- 相对路径以 HTML 文件为起点：
./assets/style.css表示同目录下assets文件夹里的style.css - 别用 Windows 风格反斜杠：
images\icon.jpg→ 必须写成images/icon.jpg - 路径区分大小写：Linux/macOS 服务器上，
Photo.jpg和photo.jpg是两个文件 - 调试时右键检查元素，看控制台报错的具体路径，再对照文件管理器里真实位置
本地双击打开 vs 用 Live Server 启动的区别在哪
双击打开走的是 file:// 协议；Live Server 启动走的是 http://localhost:5500。看似只是地址不同，但影响极大。
很多初学者卡在这儿：本地能显示文字和图片，但 AJAX 请求失败、fetch 报跨域、localStorage 异常、甚至某些 CSS @import 不生效——全是因为 file:// 协议限制了安全上下文。
- 只要涉及 JS 加载外部数据、调用 API、用 Web Workers、读取本地 JSON，就必须用本地服务器（如 VS Code 的 Live Server 插件）
- Live Server 默认端口是
5500，启动后地址栏变成http://127.0.0.1:5500/index.html，这时才具备完整 Web 运行环境 - 别试图用 Chrome 加启动参数绕过限制（比如
--allow-file-access-from-files），新版已废弃，且不解决根本问题
真正麻烦的从来不是写多少标签，而是路径怎么算、编码怎么对、协议怎么选——这三个地方错一个，页面就静默失效，连报错都不明显。
