HTML文件、图片、链接的正确路径写法 相对路径特殊URL失效问题求解

以/开头的根相对路径完全符合HTML官方规范，在你当前的部署场景下，是解决路径错乱问题的标准可行方案，可以放心使用。

路径错乱的成因 #

你之前采用的是基于当前URL的相对路径写法，这类写法的浏览器解析逻辑为：提取当前URL中最后一个斜杠之前的片段，作为基础路径拼接后续的相对地址。
当你访问example.com/test.php/这类地址时，浏览器会判定当前的虚拟目录路径为/test.php/，进而将：

• 资源引用js/scripts.js错误解析为example.com/test.php/js/scripts.js
• 页面链接otherFile.php错误跳转至example.com/test.php/otherFile.php
  这就是资源加载失败、链接跳转错位的根本原因，属于相对路径解析规则触发的正常行为，和PHP程序逻辑本身无关。

根相对路径的特性与注意事项 #

• 以/开头的路径属于站点根相对路径，浏览器解析时会直接从域名绑定的站点根目录开始拼接路径，完全不受当前访问URL的路径层级影响。无论当前访问的是带尾斜杠的PHP地址、多层嵌套的虚拟路径，/js/scripts.js永远会被解析为example.com/js/scripts.js，从根源上避免路径错位。
• 这种写法无浏览器兼容性问题，包括老旧IE在内的所有主流浏览器都完整支持，是单域名根目录部署场景下最稳妥的路径编写规范。
• 唯一的适用边界：如果未来网站需要迁移到非根路径下访问，比如通过example.com/mysite/这类子路径提供服务，以/开头的路径会直接指向域名根目录，引发新的路径错位。这种场景下才需要额外适配（比如通过PHP全局常量拼接站点基础路径前缀，或配置<base>标签统一设置基础路径）。按照你当前网站部署在/var/www根目录的结构，完全不存在这个限制。
• 你之前编写的带GET参数的同页跳转链接href="?parameter=test"不需要修改，这类纯查询字符串写法本身是合法HTML语法，无论当前URL路径是什么，浏览器都会自动将参数拼接到当前页面路径后，不会出现错位问题。

路径修改参考 #

可以按照以下标准统一调整路径写法，无需额外开发：

• JS引用：替换为<script src="/js/scripts.js"></script>
• CSS引用：替换为<link rel="stylesheet" href="/styles/main.css">
• 图片引用：替换为<img src="/images/img.jpg">
• 跨页面跳转链接：替换为<a href="/otherFile.php">
• 同页带参跳转：保留原有href="?parameter=test"写法即可

内容的提问来源于stack exchange，提问作者kanohn