直接双击.html文件即可运行，但必须确保后缀为.html（非.html.txt）、编码为UTF-8（避免乱码），且涉及JS/AJAX或外部资源时需用本地服务器（如Live Server）绕过file://协议限制。
直接双击 .html 文件就能运行，但必须注意文件后缀和编码
浏览器能直接打开本地 HTML 文件，前提是它真的是 HTML 文件——不是记事本默认保存的 .txt，也不是编码错乱导致中文变问号。常见错误是：用记事本写完代码，另存为时没选“所有文件”，结果存成了 index.html.txt，双击就打不开或显示乱码。
- 保存时文件名必须以
.html或.htm结尾（推荐.html） - “保存类型”务必选“所有文件”，不是“文本文档（*.txt）”
- 编码选
UTF-8（不是 ANSI 或 GB2312），否则中文标题、段落会乱码 - 用 VS Code、Sublime 等编辑器可避免这类问题，它们默认保存为 UTF-8 且不加 .txt 后缀
用浏览器 F12 打开开发者工具，实时检查结构和错误
写完 HTML 别急着关编辑器，按 F12 打开浏览器开发者工具，切到 Elements 面板，能看到浏览器实际解析出的 DOM 树。很多看似“没效果”的问题，比如标题不显示、图片不加载，其实是因为标签没闭合、属性拼错或路径不对。
-
<img src="logo.png">如果logo.png不在同目录，图片就不会出现——开发者工具的Console会报404错误 -
<ul><li>A</li><li>B</ul>缺少</li>，浏览器会自动补全，但结构可能和你预期不同 - 右键页面元素 → “检查”，能快速定位对应 HTML 行，比肉眼扫代码快得多
在线编辑器如 CodePen 可跳过本地环境，但要注意资源加载限制
CodePen、JSFiddle 这类平台适合快速验证想法，不用装软件、不操心路径，但它们对本地文件、相对路径和某些 API（如 fetch 读取本地 JSON）有限制。新手常误以为“能跑就是没问题”，结果一下载到本地就挂了。
- 图片要用绝对 URL（如
https://via.placeholder.com/200），不能写./img/logo.png - 外部 CSS/JS 需手动在设置里添加 CDN 链接，不能靠
<link rel="stylesheet" href="style.css">自动加载 - 想测试表单提交或 AJAX，得配 mock 接口（如 JSONPlaceholder），本地
file://协议下这些请求会被浏览器拦截
本地起服务器不是“进阶技巧”，而是日常调试刚需
只要涉及图片、CSS、JS、字体、AJAX 或现代框架（如 Vue 单文件组件），直接双击打开就会触发浏览器的 file:// 安全策略，报错如 Access to script at 'file:///xxx.js' from origin 'null' is therefore not allowed。这不是你代码错了，是浏览器故意拦的。
立即学习“前端免费学习笔记（深入）”；
- Python 用户：终端进项目目录，运行
python -m http.server 8000，然后访问http://localhost:8000 - Node.js 用户：全局装
live-server，运行live-server，自动打开并热重载 - VS Code 插件：Live Server（作者 Ritwick Dey）点一下就能起服务，连命令行都不用开
真正容易被忽略的是：哪怕只加了一张本地图片、一个 import 语句、一行 fetch('./data.json')，就得切到服务器模式——这不是可选项，是绕不开的执行前提。
