HTML文件必须置于项目根目录，如index.html；子目录中的HTML双击将仅显示源码，因file://协议无路由支持；资源路径须用相对路径（如css/style.css），编码必须为UTF-8（非BOM），动态页面需用Elements→Copy outerHTML保存真实DOM结构。
HTML文件必须放在项目根目录，不能塞进子文件夹
浏览器默认只认根目录下的 index.html 或手动指定的 page.html 为入口。如果把 HTML 文件误放进 html/ 或 src/ 子目录，双击打开会显示源码而非渲染页面——因为本地文件协议（file://）下没有服务器路由支持。
常见错误现象：
• 双击后浏览器地址栏显示 file:///.../html/index.html，但页面空白或只显示代码
• 控制台报错 net::ERR_FILE_NOT_FOUND，指向 CSS/JS 路径
- 始终将主 HTML 文件（如
index.html）保存在你创建的项目文件夹最顶层 - 子目录仅用于存放资源：固定用
css/、js/、images/（不要用img/或assets/等非标准名，避免协作混乱） - 如果已有 HTML 在子目录里，直接剪切出来，别改路径引用——改引用容易漏，移动文件更可靠
CSS 和 JS 文件路径必须用相对路径，且区分“同级”和“子目录”写法
HTML 中引用资源时，路径不是“电脑里的位置”，而是“相对于当前 HTML 文件的位置”。比如 index.html 在根目录，style.css 在 css/style.css，那 link 标签就得写成：<link rel="stylesheet" href="css/style.css">。写成 ./css/style.css 或 /css/style.css 都可能出问题。
容易踩的坑：
• 用绝对路径 /css/style.css：本地 file:// 协议下会被解析为磁盘根目录（如 C:\css\style.css），必然 404
• 漏掉 css/ 前缀，直接写 style.css：浏览器去根目录找，找不到
• 在子目录 HTML 里引用同级 CSS：比如 pages/about.html 引用 css/style.css，href 应为 ../css/style.css（两个点表示上一级）
立即学习“前端免费学习笔记（深入）”；
- 所有
href和src值，优先用不带斜杠开头的相对路径（如css/main.css、js/app.js、images/logo.png） - 检查路径是否生效：右键网页 → “查看页面源代码” → 点击链接中的 CSS/JS 文件名，看浏览器是否能跳转并加载内容
- 图片路径同样适用该规则；不要依赖编辑器自动补全，它有时会按项目根目录推断，而非 HTML 当前位置
保存时编码选 UTF-8，Windows 记事本要手动关掉 .txt 后缀
中文乱码、符号显示为方块、特殊字符（如 ©、¥、 emoji）变成问号，90% 是编码没选对。记事本默认用 ANSI 或 GBK 编码保存，而现代 HTML 必须声明并使用 UTF-8。
关键细节：
• Windows 记事本保存时，“保存类型”必须选 所有文件，否则即使输入 index.html，也会强制变成 index.html.txt
• 文件名框里必须完整手输 index.html，不能依赖自动补全
• “编码”下拉菜单里明确选 UTF-8，不是 UTF-8-BOM（BOM 可能导致某些工具解析异常）
- VS Code / Sublime Text 用户：保存时右下角状态栏会显示当前编码，点击可快速切换为 UTF-8
- Mac 上 TextEdit 默认是富文本，必须先执行菜单栏“格式 → 使纯文本”，再保存，否则生成的是 RTF 格式，浏览器打不开
- 验证是否成功：用 VS Code 打开文件，左下角显示
UTF-8且无 BOM 标识；文件里中文正常，无乱码
动态渲染页面要用 Elements → Copy outerHTML，别信“查看源代码”
单页应用（SPA）、含 Vue/React 渲染的页面，或者用了 document.write、AJAX 加载内容的网站，“查看页面源代码”（Ctrl+U）看到的是初始空壳 HTML，不是你眼睛看到的最终结构。这时候复制源码保存，打开就是一片空白。
正确做法是抓取当前 DOM 快照：
• F12 打开开发者工具 → Elements 面板 → 右键最外层 <html> 节点 → Copy → Copy outerHTML
• 粘贴到编辑器，保存为 snapshot.html
- 此方法只保存 HTML 结构和内联样式/脚本，外部 CSS/JS 文件仍需手动下载并调整路径，否则样式丢失
- 如果页面依赖大量异步数据，建议在 Network 面板中筛选
XHR或Fetch，找到接口响应，单独保存 JSON 数据作备份 - 不要用“网页,全部”保存动态页面：它只会存初始 HTML + 空白 _files 文件夹，无法还原 JS 渲染结果
index.html 在哪一层、编辑器编码设对没、路径里有没有多余斜杠，比事后调试快得多。 
