准备工作
确保已安装XAMPP
- 下载地址：Apache Friends官网（https://www.apachefriends.org/index.html）
- 推荐版本：稳定版（如当前最新为v8.2.12），支持Windows/macOS/Linux。
- 安装时勾选所有组件（Apache、MySQL、PHP、phpMyAdmin等），默认路径建议保持简单（如
C:\xampp）。
启动服务
打开XAMPP控制面板 → 点击“Start”启动 Apache（网页服务器）和 MySQL（数据库，可选），若端口被占用（如80），可修改HTTP端口为其他数字（通过菜单Config → Service and Port Settings）。
（图片来源网络，侵删）
创建项目目录结构
在XAMPP安装根目录下的htdocs文件夹中新建你的网站文件夹（例如my_site），这是Web服务器默认读取的主目录，典型结构如下：
| 层级 | 示例路径 | 用途说明 |
|---|---|---|
| 根目录 | C:\xampp\htdocs\my_site |
存放所有前端/后端代码 |
| 子文件夹 | css/, js/, images/ |
分离样式表、脚本和图片资源 |
| 入口文件 | index.php或index.html |
访问网站时自动加载的首选页面 |
⚠️ 注意：文件名区分大小写，推荐使用小写字母+下划线命名（如
about_us.html）。
编写基础代码（以PHP为例）
假设我们要做一个显示“Hello World!”的动态页面，步骤如下：
- 用文本编辑器（VS Code、Sublime Text等）创建
index.php如下：<?php echo "当前时间：" . date('Y-m-d H:i:s'); ?> <!DOCTYPE html> <html> <head>我的第一个本地网站</title> <style> body { font-family: Arial; text-align: center; margin-top: 50px; } h1 { color: blue; } </style> </head> <body> <h1>欢迎来到我的网站！</h1> <p>这是用XAMPP搭建的本地测试站～</p> </body> </html> - 保存后刷新浏览器（地址栏输入
http://localhost/my_site/），即可看到效果。
如果是纯静态HTML页面（无PHP逻辑），只需将扩展名改为.html并删除PHP标签即可。
（图片来源网络，侵删）
数据库连接（可选）
若需要存储用户数据（如留言板），可通过以下步骤关联MySQL：
- 打开
phpMyAdmin（在XAMPP面板点击其右侧的“Admin”按钮）； - 创建新数据库：输入名称→编码选
utf8mb4_general_ci→创建； - 回到代码中添加连接参数（示例）：
// 定义数据库信息 define('DB_HOST', 'localhost'); define('DB_USER', 'root'); // XAMPP默认用户名是root，密码为空 define('DB_PASS', ''); // 若未设置密码则留空 define('DB_NAME', 'mydb'); // 替换为你创建的数据库名
// 测试连接是否成功 try { $pdo = new PDO("mysql:host=".DB_HOST.";dbname=".DB_NAME, DB_USER, DB_PASS); echo "✅ 数据库连接成功！"; } catch (PDOException $e) { die("❌ 连接失败：" . $e->getMessage()); }
> 📌 提示：首次使用MySQL可能需要重置root密码（在XAMPP面板先停止MySQL服务，再通过批处理文件重置）。
---
五、常见问题排查
| 现象 | 可能原因及解决方法 |
|---------------------|-----------------------------------------------------------------------------------|
| 页面无法加载 | ①检查文件路径是否正确（相对/绝对路径）；②确认Apache已启动；③查看浏览器控制台是否有404错误 |
| PHP代码不解析（显示源代码） | 确保文件扩展名为`.php`；检查Apache配置是否启用了PHP模块（默认已开启） |
| 数据库连接失败 | 核对用户名/密码是否正确；确认MySQL服务已启动；检查防火墙是否阻止了3306端口 |
| CSS/JS无效 | 清除浏览器缓存；确认资源路径是否正确（如`<link rel="stylesheet" href="css/style.css">`） |
---
相关问题与解答
Q1：为什么访问`http://localhost`会跳转到其他页面？
A：这是因为XAMPP默认将`htdocs`设为文档根目录，而某些系统可能有旧的配置残留，解决方法：打开`httpd.conf`（位于`C:\xampp\apache\conf`），找到`DocumentRoot`和`<Directory>`条目，确保它们指向正确的路径（如`"C:/xampp/htdocs"`），重启Apache后生效。
Q2：如何在不同浏览器中测试兼容性？
A：可以手动打开Chrome、Firefox、Edge等主流浏览器，分别访问本地站点；或使用工具如BrowserStack在线测试多版本浏览器，开发时注意避免使用过时的特性（如IE专属语法），优先采用标准API
（图片来源网络，侵删）
