适合初学者的VSCode运行html及常见问题解答-VSCode-PHP中文网

live server插件是vscode中运行html网页最推荐的方式，它通过启动本地http服务（如http://127.0.0.1:5500）绕过file://协议限制，支持自动刷新、正确解析路径及调用fetch等api，避免cors和资源加载失败问题。

适合初学者的vscode运行html及常见问题解答

VSCode 本身不“运行” HTML，它只编辑和保存文件；真正打开并渲染 HTML 的是浏览器。关键在于如何让修改后的内容快速在浏览器中看到——Live Server 是最稳的解法。

双击打开时，浏览器用 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

这是初学者唯一需要的插件，没有之一。它起一个轻量本地服务器，自动刷新页面，且路径解析完全符合标准。

安装：打开 VSCode → 左侧扩展图标 → 搜索 Live Server → 点击“Install”
使用：右键编辑器中的 index.html 文件 → 选 Open with Live Server → 浏览器自动弹出，地址类似 http://127.0.0.1:5500/index.html
注意：Live Server 默认监听端口 5500，如果被占用会自动换到 5501，不用手动改配置
小技巧：改完代码按 Ctrl+S 保存，页面自动刷新（无需手动点刷新按钮）

不是插件坏了，大概率是操作链断在某个环节。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

确认你右键用的是 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">）