三步搞定本地HTML页面：写文件→浏览器打开→调整内容；关键在UTF-8编码保存和DOCTYPE+html+body基础结构，避免file:///下路径错误与编码乱码。
直接用浏览器打开就能看的页面，不需要服务器、不用部署，三步搞定：写 HTML 文件 → 用浏览器打开 → 调整内容。所谓“全流程”，核心就两件事：结构怎么写对，以及为什么一改就乱码或不显示。
HTML 文件怎么保存才不会乱码
Windows 记事本默认存为 ANSI 编码，中文一刷新就变 ???；Mac 的 TextEdit 默认存成富文本（.rtf），浏览器根本打不开。
- 用 VS Code、Sublime Text 或记事本（但必须点「另存为」→ 编码选
UTF-8→ 文件名填index.html） - 文件扩展名必须是
.html或.htm，不能是index.html.txt - 别用微信/QQ 接收后直接双击——它可能自动加了隐藏字符，建议重写一遍最外层
<html></html>
浏览器打不开页面？先查这三行基础结构
缺 <!DOCTYPE html> 可能触发怪异模式；漏 <html> 或 <body> 不一定报错，但 CSS 和 JS 容易失效；标签没闭合（比如写了 <p>文字 却忘了 </p>），后续所有内容都可能错位。
- 最小合法结构长这样：
<!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <p>你好</p> </body> </html>
-
<meta charset="UTF-8">必须放在<head>里，且越靠前越好，否则浏览器可能已按错误编码解析了一部分 - 不要在
<head>外面写<p>、<div>—— 这些只能在<body>里生效
写完打不开、样式不生效？先关掉这些干扰项
本地双击打开时，地址栏是 file:/// 开头，不是 http://。这意味着：fetch() 会失败、localStorage 可能被禁用、相对路径的图片/CSS 如果路径错一个斜杠就 404。
立即学习“前端免费学习笔记（深入）”；
- 检查图片路径：
<img src="photo.jpg">要求photo.jpg和 HTML 文件在同一文件夹；如果图在images/下，就得写src="images/photo.jpg" - CSS 文件同理：
<link rel="stylesheet" href="style.css">中的style.css是相对于 HTML 文件的位置，不是相对于当前编辑器打开的文件夹 - 想测试 AJAX 或现代 API？得搭个本地服务，比如用 VS Code 插件
Live Server，右键点「Open with Live Server」，地址变成http://127.0.0.1:5500/就行
真正卡住人的，往往不是语法，而是路径和编码这两个隐形开关——它们不报错，但让一切看起来“莫名其妙地不对”。多试一次「另存为 UTF-8」，多看一眼地址栏开头是不是 file:///，比查十遍标签拼写更管用。
