HTML5项目中修改文件格式或者调整目录结构后，链接失效是非常常见的问题，核心原因通常是相对路径的引用没有适配新的文件位置。相对路径的解析逻辑是基于当前HTML文件所在的目录层级，当文件位置、目录结构发生变化时，旧的路径配置就会无法匹配实际的资源位置，最终出现链接失效的情况。
HTML5相对路径的基本解析规则
相对路径不需要从根目录开始写全路径，而是以当前HTML文件为基准来定位目标资源，常见的路径表示方式有以下几种：
./表示当前文件所在的目录，通常可以省略不写../表示当前文件所在目录的上一级目录，每多一个../就向上跳一级- 直接写文件名或者子目录名，默认是在当前目录或者当前目录的子目录下查找资源
比如当前HTML文件路径是/project/pages/index.html，要引用/project/assets/logo.png，相对路径就可以写成../assets/logo.png，如果写成./assets/logo.png就会去/project/pages/assets/目录下查找，自然找不到资源。
链接失效的常见场景
1. 文件格式修改后路径未同步
比如原本是index.html引用style.css，后来把style.css改名为main.css，但是HTML里的引用路径还是style.css，就会导致样式文件加载失败。
2. 目录结构调整后路径层级错误
原本HTML文件在根目录，后来移动到了pages子目录，但是引用资源的路径还是./assets/xxx，此时实际路径变成了pages/assets/xxx，和真实资源位置不匹配。
3. 引用路径多了或者少了斜杠
比如在HTML里写/assets/logo.png，这种写法是绝对路径，会从网站根目录开始查找，如果项目不是部署在根目录，就会出现路径错误。而相对路径不需要开头加斜杠。
相对路径修正的具体办法
1. 先确认当前文件和目标资源的实际位置
第一步先明确当前HTML文件的完整路径，再确认要引用的资源（比如CSS、JS、图片、其他HTML页面）的完整路径，再计算两者的相对关系。
可以通过浏览器的开发者工具查看资源加载的报错信息，比如报错显示GET http://localhost/project/pages/assets/logo.png 404 (Not Found)，就说明当前请求的路径是/project/pages/assets/logo.png，如果实际资源在/project/assets/logo.png，就需要把路径改成../assets/logo.png。
2. 修正资源引用的路径写法
根据计算出的相对关系修改路径，以下是不同场景的修正示例：
| 当前HTML路径 | 目标资源路径 | 错误路径 | 正确相对路径 |
|---|---|---|---|
| /project/index.html | /project/css/style.css | css/style.css（正确） | css/style.css 或 ./css/style.css |
| /project/pages/about.html | /project/css/style.css | css/style.css | ../css/style.css |
| /project/pages/user/profile.html | /project/images/avatar.png | ../images/avatar.png | ../../images/avatar.png |
3. 用代码验证路径是否正确
可以在HTML中先写一个简单的图片引用测试路径是否生效，比如要测试../assets/logo.png是否正确，可以添加以下代码：
<!-- 测试路径是否正确的图片引用 --> <img src="../assets/logo.png" alt="测试图片" />
如果图片能正常显示，说明路径正确，再把这个路径用到CSS、JS或者其他资源的引用中即可。
4. 批量修正项目中的路径
如果项目中大量链接失效，可以借助编辑器的批量替换功能，比如VS Code可以使用全局替换，把错误的公共路径部分统一替换成正确的路径。比如所有错误的路径都多了pages/，就可以把src="pages/批量替换成src="。
如果是动态生成的路径，比如用JS拼接的相对路径，需要检查拼接逻辑是否正确，以下是一个正确的路径拼接示例：
// 当前页面路径是 /project/pages/index.html，要引用 /project/js/main.js const currentDir = './'; // 当前目录是 pages/ const targetPath = '../js/main.js'; // 上一级目录的js文件夹下的main.js const fullPath = currentDir + targetPath; console.log(fullPath); // 输出 ../js/main.js，符合预期
避免路径问题的建议
为了减少后续调整目录或者修改格式后出现路径问题，建议在项目初期就统一路径规范，比如所有资源都放在固定的assets目录下，HTML文件尽量放在根目录或者统一的pages目录，避免频繁修改文件位置。如果必须调整目录，调整之后第一时间检查所有资源引用的路径，避免出现大面积的链接失效问题。