Live Server插件是VSCode中运行HTML网页最推荐的方式，它通过启动本地HTTP服务（如http://127.0.0.1:5500）绕过file://协议限制，支持自动刷新、正确解析路径及调用fetch等API，避免CORS和资源加载失败问题。
VSCode 本身不“运行” HTML，它只编辑和保存文件；真正打开并渲染 HTML 的是浏览器。关键在于如何让修改后的内容快速在浏览器中看到——Live Server 是最稳的解法。
为什么直接双击 HTML 文件会出问题
双击打开时，浏览器用 file:// 协议加载，很多现代特性（如 fetch()、localStorage 在某些上下文）、相对路径引用（尤其是 ./assets/ 类资源）或本地 CORS 策略都可能失效。开发阶段应避免这种方式。
- 常见现象：
Failed to load resource: net::ERR_FILE_NOT_FOUND（图片/CSS/JS 找不到） - 更隐蔽的问题：AJAX 请求被浏览器拦截，控制台报
Cross origin requests are only supported for protocol schemes - 解决思路：必须走 HTTP 协议，哪怕只是本地
http://localhost:5500
Live Server 插件怎么装、怎么用
这是初学者唯一需要的插件，没有之一。它起一个轻量本地服务器，自动刷新页面，且路径解析完全符合标准。
- 安装：打开 VSCode → 左侧扩展图标 → 搜索
Live Server→ 点击“Install” - 使用：右键编辑器中的
index.html文件 → 选Open with Live Server→ 浏览器自动弹出，地址类似http://127.0.0.1:5500/index.html - 注意：
Live Server默认监听端口 5500，如果被占用会自动换到 5501，不用手动改配置 - 小技巧：改完代码按
Ctrl+S保存，页面自动刷新（无需手动点刷新按钮）
保存后页面没更新？先检查这三件事
不是插件坏了，大概率是操作链断在某个环节。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 确认你右键用的是
Open with Live Server，而不是“Open in Default Browser”或直接双击 - 检查 VSCode 右下角语言模式是否为
HTML—— 如果显示Plain Text，点击它 → 选Configure File Association for '.html'...→ 设为HTML - 确保已按
Ctrl+S保存文件：VSCode 编辑器标题栏文件名右侧有圆点表示未保存，没点保存，Live Server 不会触发刷新
格式乱、缩进错、标签不闭合？别手调，用自动格式化
初学者写 HTML 容易嵌套错层、漏闭合标签，靠肉眼检查效率低。VSCode 内置 HTML 格式化器就能解决大部分结构问题。
- 快捷键：Windows/Linux 按
Shift+Alt+F，macOS 按Shift+Option+F - 前提：确保设置开启
"editor.formatOnSave": true和"html.format.enable": true - 如果按快捷键没反应，先看右下角语言模式是不是
HTML；再检查有没有装冲突插件（比如同时启用 Prettier 但没配好默认格式化器） - 格式化后，
<div><p>文字</p></div>会变成清晰缩进结构，漏闭合的标签也会被提示（如<img src="a.jpg">会自动补成<img src="a.jpg" />）
最常被忽略的一点：Live Server 启动后，浏览器地址栏必须是 http:// 开头，而不是 file://。只要看到后者，说明根本没走服务器，所有后续调试都白搭。
