最小合规HTML文件必须以<!DOCTYPE html>开头，包含完整<html><head><meta charset="UTF-8"><title>和<body>结构，保存为.html后缀并用浏览器打开。
直接打开浏览器就能看的 HTML 页面，不需要服务器、不用编译，但必须满足三个硬条件：文件后缀是 .html，内容有合法的 <html> 结构，且用支持 HTML 的程序（比如浏览器）打开——不是双击用记事本打开，而是用 Chrome/Firefox/Safari 打开。
怎么写一个能被浏览器正确解析的最小 HTML 文件
浏览器对 HTML 的容错性很强，但“能显示”不等于“结构合规”。真正可靠的起点是一个符合标准的最小文档骨架。它不是可选的“最佳实践”，而是避免乱码、样式失效、JS 不执行的基础。
- 必须以
<!DOCTYPE html>开头，否则 IE 和部分旧环境会触发怪异模式（Quirks Mode），盒模型、字体渲染全乱 -
<html>标签必须包裹<head>和<body>，缺一不可；<head>里至少要有<meta charset="UTF-8">，否则中文可能变问号 - 不要省略闭合标签（如
<p>文字</p>），尤其在嵌套或含 JS/CSS 时，省略易导致 DOM 解析错位
示例（复制保存为 index.html，右键 → “在浏览器中打开”）：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>我的第一个页面</title> </head> <body> <h1>Hello World</h1> </body> </html>
为什么用记事本写完双击没反应，或者中文全是方块
本质是编码和打开方式两个独立问题混在一起，排查要分开看。
立即学习“前端免费学习笔记（深入）”；
- 中文乱码：99% 是没写
<meta charset="UTF-8">，或写了但文件实际保存成了 GBK 编码（Windows 记事本默认）。解决方法：用 VS Code / Sublime / Notepad++ 新建文件，手动设编码为 UTF-8（无 BOM），再保存 - 双击没反应/白屏：检查文件扩展名是不是真的
.html—— Windows 默认隐藏扩展名，可能你存成了index.txt或index.html.txt。右键 → 属性 → 看“类型”是否为“HTML 文档” - 右键菜单没有“在浏览器中打开”：说明系统没关联
.html后缀，临时解决是拖文件到已打开的 Chrome 窗口里
script 和 link 标签放哪里才不会报错或失效
顺序和位置直接影响 JS 能否拿到 DOM、CSS 是否及时生效，不是“放哪儿都行”。
-
<script>如果写在<head>里且没加defer或async，会阻塞 HTML 解析，脚本里访问document.getElementById()很可能返回null（因为 DOM 还没生成） - 推荐做法：把
<script>放在</body>前；如果必须放<head>，加defer（按顺序执行，等 DOM 解析完）或async（不保证顺序，适合统计脚本） -
<link rel="stylesheet">必须放在<head>，放<body>里会导致 FOUC（Flash of Unstyled Content），即先闪一下无样式的 HTML，再突然变样
最常被忽略的一点：路径。所有 src 和 href 的相对路径，都是相对于当前 HTML 文件的位置算的，不是相对于你编辑器打开的文件夹，也不是相对于浏览器地址栏显示的路径。这点在本地双击打开时尤其容易出错。
