信息发布→ 登录 注册 退出

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

发布时间:2025-11-18

点击量:
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文件的位置:

  • CSS与HTML在同一目录:
  • CSS在css子目录中:
  • HTML在子目录,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。路径问题最常见,细心核对即可解决。

标签:# html  # windows  # apache  # 浏览器  # 工具  # html文件  # win  # href  # css  # 不正确  # 或以  # 相对于  # 不被  # 如果不是  # 不存在  # 并在  # 就能  # 是因为  # 放在  # http  
在线客服
服务热线

服务热线

4008888355

微信咨询
二维码
返回顶部
×二维码

截屏,微信识别二维码

打开微信

微信号已复制,请打开微信添加咨询详情!