推荐四种本地预览html项目的方法：一、python内置服务器，执行python3 -m http.server 8000；二、node.js的http-server工具，需npm install -g http-server后运行http-server -p 5500；三、vs code的live server扩展，右键html文件选择open with live server；四、chrome扩展web server for chrome，选中项目文件夹即可启动服务。
如果您拥有一个HTML项目文件夹，但希望在本地浏览器中直接预览效果，而非双击HTML文件导致资源加载异常，则需要搭建一个轻量级的本地服务器环境。以下是实现此目标的具体步骤：
一、使用Python内置HTTP服务器
Python 3自带http.server模块，无需额外安装依赖，适用于快速启动静态文件服务，能正确解析相对路径引用的CSS、JS和图片资源。
1、打开终端（macOS/Linux）或命令提示符/PowerShell（Windows），进入您的HTML项目根目录。
2、执行命令：python3 -m http.server 8000（macOS/Linux）或python -m http.server 8000（Windows，确保已安装Python且环境变量配置正确）。
立即学习“前端免费学习笔记（深入）”；
3、在浏览器地址栏输入http://localhost:8000，即可访问项目首页。
二、使用Node.js的http-server工具
http-server是一个零配置的命令行HTTP服务器，支持跨域、缓存控制与自动索引，适合多文件结构复杂的HTML项目。
1、确认已安装Node.js，运行node -v和npm -v验证版本。
2、全局安装http-server：npm install -g http-server。
3、进入项目根目录，执行http-server -p 5500（指定端口为5500）。
4、浏览器访问http://localhost:5500，默认加载index.html或显示目录列表。
三、使用VS Code Live Server扩展
Live Server是VS Code中最常用的前端开发插件之一，启动即用，支持实时刷新、HTTPS模拟及自定义端口，特别适合边写代码边预览。
1、在VS Code中打开HTML项目文件夹。
2、点击左侧扩展图标，搜索并安装Live Server（作者：Ritwick Dey）。
3、右键点击项目中的HTML文件（如index.html），选择Open with Live Server。
4、VS Code自动启动服务，并在默认浏览器中打开http://127.0.0.1:5521（端口号随机，可在设置中固定）。
四、使用浏览器扩展Web Server for Chrome
该Chrome扩展允许用户在不安装任何后端工具的前提下，将本地文件夹映射为HTTP服务，适用于无命令行权限或受限环境。
1、在Chrome网上应用店中搜索并添加Web Server for Chrome扩展。
2、点击浏览器右上角扩展图标，选择该扩展并点击Start Server。
3、点击Choose Folder，选中您的HTML项目所在文件夹。
4、复制弹出窗口中的服务器地址（形如http://127.0.0.1:8887），粘贴至新标签页中打开。
