Live Preview无法显示网页内容是因扩展未启用、端口冲突或HTML结构不完整；需检查并启用扩展、用Cmd+Shift+P触发预览、修改端口、关闭冲突进程、验证DOCTYPE及编码。
如果您在VSCode中编辑HTML文件，但Live Preview扩展无法正常显示网页内容，则可能是由于扩展未启用、端口冲突或工作区权限限制导致。以下是解决此问题的步骤：
本文运行环境：MacBook Air，macOS Sequoia。
一、检查Live Preview扩展状态
Live Preview功能依赖于官方扩展“Live Server”或“Live Preview”（由Microsoft发布），需确认其已正确安装并处于启用状态。
1、点击左侧活动栏的扩展图标（方块拼图形状）。
2、在搜索框中输入Live Preview。
3、找到名称为Live Preview、作者为Microsoft的扩展。
4、若右侧显示“禁用”，点击该按钮切换为“启用”；若未安装，点击“安装”后再启用。
二、使用快捷键触发预览
Live Preview不自动启动，需手动激活，且仅对当前打开的HTML文件生效，不支持嵌套子目录下的非根路径文件直接预览。
1、确保当前编辑器中打开的是一个有效的.html文件。
2、按下快捷键：Cmd + Shift + P（macOS）或Ctrl + Shift + P（Windows/Linux）。
3、在命令面板中输入Live Preview: Show Preview。
4、回车执行，预览窗口将在右侧边栏或新标签页中打开。
三、重置Live Preview端口配置
Live Preview默认使用随机端口启动本地服务，若端口被占用或防火墙拦截，会导致空白页或连接失败。
1、按下Cmd + ,打开设置界面。
2、在右上角搜索框中输入live preview port。
3、找到设置项Live Preview: Port。
4、将其值修改为5000（或其他未被占用的整数，如5001、8080）。
四、关闭其他本地服务器进程
同一系统中若已运行其他Web服务（如Python的http.server、Node.js的express、或另一个Live Server实例），可能与Live Preview端口冲突，造成预览失败。
1、打开终端，执行命令：lsof -i :5000（将5000替换为您配置的端口号）。
2、查看输出结果中PID列的数字。
3、执行命令：kill -9 [PID]（将[PID]替换为查到的进程号）。
4、重启VSCode，再次尝试启动Live Preview。
五、验证HTML文件结构完整性
Live Preview要求HTML文档具备基本结构，若缺少<!DOCTYPE html>声明或根<html>标签，可能导致渲染异常或白屏。
1、在当前HTML文件顶部确认存在<!DOCTYPE html>。
2、检查是否包含完整的<html><head><body>嵌套结构。
3、移除文件开头可能存在的BOM字符（可通过VSCode右下角编码显示确认，若为UTF-8 with BOM，点击切换为UTF-8）。
4、保存文件后，重新执行Show Preview命令。
