Windows XAMPP中HTML如何正确引用CSS避免404

404错误通常由路径配置不当引起，确保HTML和CSS文件置于C:\xampp\htdocs\your-project\下，通过http://localhost/your-project/访问，使用正确相对路径或以/开头的绝对路径引用CSS，并在浏览器开发者工具中检查网络请求以确认路径与MIME类型，避免使用反斜杠或本地磁盘路径。

在Windows环境下使用XAMPP运行本地网站时，HTML文件引用CSS出现404错误，通常是因为路径配置不正确。只要确保路径写法准确、服务器正常运行，就能顺利加载CSS文件。

确认文件存放位置正确

将HTML和CSS文件放在XAMPP的web根目录下，通常是：

• C:\xampp\htdocs\your-project\
• 例如：把 index.html 和 style.css 都放在这里，或分目录管理

确保Apache已启动，通过浏览器访问 http://localhost/your-project/index.html 而不是直接打开HTML文件（file://）

使用正确的相对路径引用CSS

在HTML中通过link标签引入CSS，路径要相对于HTML文件的位置：

立即学习“前端免费学习笔记（深入）”；

小绿鲸英文文献阅读器

英文文献阅读器，专注提高SCI阅读效率

352

查看详情

• CSS与HTML在同一目录：
  <link rel="stylesheet" href="style.css">
• CSS在css子目录中：
  <link rel="stylesheet" href="css/style.css">
• HTML在子目录，CSS在上级目录：
  <link rel="stylesheet" href="../style.css">

避免使用绝对路径或错误斜杠

不要写成Windows风格的反斜杠或本地磁盘路径：

• ❌ href="C:\xampp\htdocs\css\style.css"（绝对路径，危险且无效）
• ❌ href="css\style.css"（反斜杠在HTML中不被识别）
• ✅ href="/your-project/css/style.css"（以/开头，从localhost根开始）

如果项目在根目录下，可使用 / 开头的路径；否则建议统一用相对路径更安全。

检查浏览器开发者工具中的网络请求

按F12打开开发者工具，切换到Network选项卡，刷新页面，查看CSS文件是否显示404：

• 看到红色404？说明路径写错或文件不存在
• 点击该请求，看“Request URL”具体指向哪里，据此调整路径
• 确认MIME类型是否为text/css，如果不是可能是服务器配置问题

基本上就这些。只要文件在htdocs里，路径写对，用localhost访问，就不会出现404。路径问题最常见，细心核对即可解决。

以上就是Windows XAMPP中HTML如何正确引用CSS避免404的详细内容，更多请关注php中文网其它相关文章！