XAMPP运行HTML详细步骤教程

本文详细讲解了如何利用XAMPP本地运行HTML文件的完整流程，强调只需启动Apache服务、将HTML文件正确放入htdocs根目录，并通过http://localhost/路径访问即可——无需编译或复杂配置；同时重点提醒两大易错关键点：务必确保Apache处于Running状态，且必须使用http协议而非双击打开（file://），否则JavaScript、AJAX和相对路径等功能将失效，辅以常见错误（如404、连接被拒、中文乱码）的快速排查技巧，让初学者也能零障碍搭建本地网页环境。

直接把 HTML 文件放进 XAMPP 的网站根目录，然后用浏览器访问就能运行，不需要额外编译或启动服务（只要 Apache 已启动）。

确认 Apache 服务已启动

XAMPP 运行 HTML 依赖 Apache 服务器提供本地 Web 服务。如果 Apache 没开，浏览器会显示“无法连接”或“拒绝连接”。

• 打开 XAMPP Control Panel（控制面板）
• 在 Apache 行点击 Start（启动）按钮
• 看到状态变为 Running，且端口（通常是 80 或 443）未被占用
• 可点 Admin 打开 http://localhost 查看是否显示 XAMPP 欢迎页——这是最简单的验证方式

把 HTML 文件放到正确位置

XAMPP 默认的网站根目录是：htdocs 文件夹（路径类似 C:\xampp\htdocs）。

• 将你的 index.html、about.html 等文件直接复制/保存到 htdocs 文件夹里
• 支持子文件夹，比如放成 htdocs/myproject/index.html，那访问地址就是 http://localhost/myproject/
• 不要放在 htdocs 外面（如桌面或文档），否则 Apache 无法识别和提供服务

用浏览器访问 HTML 页面

不用双击打开 HTML 文件，必须通过 http:// 协议访问，才能模拟真实网页环境（尤其涉及 JS、AJAX、相对路径时）。

• 打开浏览器，输入地址：http://localhost/your-file.html（例如 http://localhost/test.html）
• 如果是首页命名规范（index.html、index.htm），直接访问 http://localhost/ 或 http://localhost/folder/ 就能自动加载
• 刷新页面时按 Ctrl + F5 强制清除缓存，避免看到旧版本

常见问题快速排查

打不开？多半是路径、服务或协议问题。

• 显示 404 错误：检查文件名拼写、大小写（Linux 风格系统区分大小写）、是否真在 htdocs 内
• 显示“Connection refused”：Apache 没启动，或端口被 Skype、IIS 等占用了（可在 XAMPP 设置中改 Apache 端口为 8080）
• 双击 HTML 能打开但功能异常：说明用了 file:// 协议，JS 请求、CSS 路径、fetch 等可能失败——务必用 http://localhost
• 中文乱码：在 HTML 的 中加上

基本上就这些。XAMPP 运行纯 HTML 很轻量，不复杂但容易忽略服务启动和访问协议这两个关键点。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~