HTML相对路径失效求助：链接、CSS及图标仅绝对路径可用

问题分析 #

直接通过file://协议打开本地index.html时，相对路径（如Articles/every_ethic_without_dead_end_is_utilitarian.html）被浏览器解析为系统根目录下的路径（即file:///Articles/...），而非index.html所在文件夹的子目录，导致文件找不到。这是因为直接打开本地文件时，浏览器的工作目录不一定与HTML文件所在目录一致。

解决办法 #

方法1：明确相对路径的起始位置 #

在链接路径前加上./，明确表示路径相对于当前HTML文件所在目录：

<a href="./Articles/every_ethic_without_dead_end_is_utilitarian.html">点击访问文章</a>

修改后，浏览器会正确从index.html所在文件夹出发，定位到Articles子目录下的目标文件。

方法2：使用本地HTTP服务器运行（推荐） #

直接打开本地文件的file://协议和线上的HTTP协议解析逻辑有差异，用本地服务器运行静态文件可以完全模拟线上环境，避免路径解析问题：

• Python 3：在网站根目录打开终端，执行命令：

  python -m http.server 8000
  

  然后在浏览器访问 http://localhost:8000/index.html
• Node.js（需先安装）：全局安装http-server工具：

  npm install -g http-server
  

  进入网站根目录后运行：

  http-server
  

  按照终端提示的地址访问即可。

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