直接双击保存为.html后缀的文件即可用浏览器运行，无需另存为网页；务必用纯文本编辑器、手动输入后缀、避免空格中文；本地file://协议下基础功能正常但API受限，需本地服务测完整功能；DOCTYPE必须首行且无BOM，路径须准确，404错误易被忽略。
直接用浏览器打开 .html 文件就能运行，不用“另存为网页”
很多人卡在“怎么把写好的 HTML 代码变成能点开就看的网页”，其实根本不需要复杂操作。只要文件后缀是 .html（或 .htm），双击它，系统默认用浏览器打开——这就是最标准的可运行网页。
常见错误现象：
• 写完代码保存成 .txt，双击只弹记事本；
• 编辑器里点了“另存为网页”，结果生成一堆文件夹和冗余资源；
• 把代码粘贴进 Word 或富文本编辑器再保存，破坏了纯文本结构。
- 保存时务必选“所有文件”，后缀手动输入
.html（别让系统自动加.txt） - 用记事本、VS Code、Sublime 等纯文本编辑器，别用 Word、WPS、Pages
- 文件名避免空格和中文，比如用
index.html而不是我的第一个网页.html
file:// 协议下 JS/CSS 能用，但部分 API 会受限
本地双击打开的网页地址是 file:///xxx/index.html，属于 file:// 协议。这时候 HTML、CSS、基础 JS 都正常执行，但涉及安全策略的功能会失败。
典型表现：
• fetch() 请求本地 JSON 文件报 CORS 错误；
• localStorage 可用，但 Service Worker 注册失败；
• 图片路径写相对路径（如 ./img/logo.png）必须确保文件结构真实存在。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 开发阶段临时预览没问题，但凡要测网络请求、PWA、跨域资源，就得启一个本地服务
- 最轻量方案：VS Code 装
Live Server插件，右键菜单点“Open with Live Server” - 命令行党可用
npx serve或python3 -m http.server 8000，访问http://localhost:8000
HTML 代码里没写 <DOCTYPE html> 会导致渲染异常
这是新手最常漏掉的一行，但它决定浏览器用什么模式解析页面。没这句，IE 和旧版 Edge 会进 Quirks 模式，现代浏览器也可能降级处理——比如 flex 布局错位、rem 单位计算偏差、表单控件样式不一致。
正确开头长这样：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>我的页面</title> </head> <body> <p>Hello World</p> </body> </html>
-
<!DOCTYPE html>必须是文件第一行，前面不能有空格、注释或 BOM -
<html lang="zh-CN">的lang属性不是可有可无，它影响屏幕阅读器、SEO 和部分 CSS 伪类（如:lang()） - 如果用模板引擎或 CMS 输出 HTML，确认它没悄悄删掉 DOCTYPE
图片/字体/JS 路径写错，控制台报 404 但页面看起来“好像能动”
HTML 渲染是容错的：图片加载失败留白、JS 报错后其余代码继续跑、字体找不到就回退到系统默认。所以你可能以为页面“跑起来了”，实际关键功能早挂了。
检查路径是否正确的核心逻辑：
• 浏览器地址栏显示的是 file:///Users/xxx/demo/index.html，那么 ./css/style.css 就去找同级 css/ 文件夹；
• 如果你在服务器环境（http://localhost:3000），路径解析规则一样，但根目录是服务启动位置，不是文件物理位置。
- 用浏览器开发者工具的 Network 标签页，一眼看出哪些资源返回了
404 - 路径优先用相对路径（
./、../），避免硬编码绝对路径（/css/style.css） - 图片路径大小写敏感，
IMG.PNG和img.png在 macOS/Linux 下是两个文件
