使用xampp运行html文件是本地测试静态网页最常用的方法，xampp集成了Apache服务器、MySQL数据库等组件，能快速搭建本地web服务环境，让html文件可以在浏览器中以服务器环境的方式运行，避免本地直接打开文件出现路径加载异常的问题。
xampp运行html文件的前置准备
首先需要确保已经在电脑上正确安装xampp程序，安装完成后打开xampp控制面板，找到Apache模块，点击对应的Start按钮启动服务。当Apache模块的状态栏显示绿色，且端口显示80（默认端口）时，说明服务已经正常启动，可以开始后续操作。
具体操作流程
第一步：找到xampp的站点根目录
xampp默认的站点根目录是安装路径下的htdocs文件夹，不同系统的默认路径参考如下：
- Windows系统默认路径：C:xampphtdocs
- macOS系统默认路径：/Applications/XAMPP/htdocs
- Linux系统默认路径：/opt/lampp/htdocs
第二步：放置html文件到根目录
把需要运行的html文件直接复制到htdocs文件夹下即可，如果有多个关联的文件（比如css、js、图片资源），可以把这些文件统一放到htdocs下的同一个子文件夹里，方便管理。假设我们把test.html文件直接放在htdocs根目录下，同时把相关的样式文件放在htdocs/css文件夹中，html中引用样式的代码示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试页面</title>
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<h1>这是xampp运行的html页面</h1>
</body>
</html>
第三步：通过浏览器访问文件
打开任意浏览器，在地址栏输入localhost/文件名即可访问对应的html文件。比如刚才的test.html文件，访问地址就是localhost/test.html，如果文件放在htdocs下的demo子文件夹里，访问地址就是localhost/demo/test.html。如果修改了Apache的默认端口，比如改成了8080，那么访问地址需要加上端口号，格式为localhost:8080/test.html。
常见问题排查
| 问题现象 | 可能原因 | 解决方法 |
|---|---|---|
| 访问页面显示404错误 | 文件路径错误或者文件名拼写错误 | 检查文件是否确实放在htdocs目录下，地址栏输入的文件名是否和实际文件名一致，注意文件名不要包含中文和特殊字符 |
| 页面显示403禁止访问 | htdocs文件夹权限不足 | 右键htdocs文件夹，打开属性设置，把当前用户的读写权限开启，Linux和macOS系统可以通过chmod命令修改文件夹权限 |
| Apache服务启动失败 | 80端口被其他程序占用 | 打开xampp控制面板的Netstat工具，查看占用80端口的程序，关闭对应程序，或者在xampp中修改Apache的监听端口 |
注意事项
如果html文件中引用了本地绝对路径的资源，比如C:imagespic.jpg，在xampp环境下运行会无法加载，需要把资源引用改成相对路径或者基于localhost的绝对路径。另外如果需要在html中使用php等后端代码，xampp同样支持，只需要把文件后缀改成.php，按照相同的流程放置和访问即可。
xampphtmlweb_serverlocalhost修改时间：2026-06-20 09:09:23