HTML文件只需用文本编辑器保存为UTF-8编码的.html后缀即可，常见错误包括乱码、无法打开、页面空白；需使用标准结构、避免中文路径与大小写混淆，并推荐Live Server调试。
直接用文本编辑器保存为 .html 后缀就行
HTML 文件本质就是纯文本，没有编译、打包或构建环节。只要内容符合 HTML 语法，用任意能存为 UTF-8 编码的文本编辑器（比如 VS Code、记事本、Sublime）写完，另存为 时把文件名结尾设成 index.html 或 page.html 就行。
常见错误现象：打开是乱码（没选 UTF-8 编码）、双击没反应/下载失败（后缀写成 index.txt 或 .html.txt）、页面空白（漏了 结构或标签未闭合）。
实操建议：
- VS Code 中：写完按
Ctrl+S→ 弹窗里手动输入demo.html，确认编码是UTF-8 - Windows 记事本：「另存为」→「保存类型」选「所有文件」→ 文件名输
test.html（必须带引号，否则自动加 .txt） - Mac TextEdit：先「格式 → 纯文本」→ 「文件 → 导出」→ 格式选
Plain Text→ 后缀手动改成.html
浏览器双击打不开？检查文件路径和协议
双击本地 HTML 文件，地址栏显示的是 file:/// 协议，不是 http://。这意味着：fetch、XMLHttpRequest、localStorage（部分浏览器限制）、相对路径引用的 ./js/script.js 都可能因安全策略失败。
立即学习“前端免费学习笔记（深入）”；
使用场景：适合静态展示、原型验证、离线文档；不适合调试 Ajax、PWA、Service Worker。
实操建议：
- 想用 JS 加载本地 JSON？改用
data:URL 或把文件拖进浏览器临时预览 - 引用 CSS/JS 失败？确认路径对——
<script src="js/main.js"></script>要求当前目录下有js/文件夹 - 开发阶段更稳的方式：用 VS Code 插件
Live Server右键启动，自动起http://127.0.0.1:5500
基础结构别省，否则浏览器会“猜”错渲染模式
没写 或缺失 <code>，老版本 IE 或某些移动端 WebView 会触发怪异模式（Quirks Mode），导致盒模型、字体大小、Flex 布局行为异常，调试时很难定位。
性能影响：现代浏览器解析快，但缺 <meta charset="utf-8"> 可能引发重排或乱码重加载。
最小可用模板（复制即用）：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>我的页面</title> </head> <body> <h1>Hello</h1> </body> </html>
注意：lang="zh-CN" 影响屏幕朗读、字体回退；charset 必须在 最前面，否则可能被忽略。
中文路径或空格会导致链接失效
文件名含中文、空格、括号（如 我的首页.html、page (v2).html）在命令行、Git、某些服务器或跨平台共享时容易出问题：<a href="%E6%88%91%E7%9A%84%E9%A6%96%E9%A1%B5.html"></a> 在终端中可能被截断，Nginx 默认拒绝带空格的 URI，微信内嵌浏览器对编码处理不一致。
实操建议：
- 统一用小写字母 + 连字符：
about-me.html、contact-us.html - 路径层级别太深：避免
src/pages/v2/components/header/index.html，平铺更易维护 - 用 VS Code 的「重命名文件」功能（F2），它会自动更新项目内所有引用的
href和src
最常被忽略的一点：文件系统大小写敏感性。macOS 默认不敏感，Linux 和 Git 仓库默认敏感——Image.jpg 和 image.jpg 是两个文件，写错路径在本地能开，上线就 404。
