index.html无法访问其他文件夹下HTML文件的路径问题咨询

问题原因 #

1. 路径匹配规则差异
   你最初使用的<a href="/products.html">是根绝对路径，路径开头的/代表直接从静态服务的根目录开始匹配资源，当时products.html和index.html都在client目录（也就是你的静态服务根目录）下，所以可以正常匹配到。
   调整结构后你使用的./html/product_categories/products.html是相对路径，./代表相对于当前页面的URL路径，如果你的页面URL存在多级路径（比如访问index.html时地址是http://xxx/client/而非http://xxx/），相对路径拼接后就会指向错误的地址，触发404。
2. 静态服务根目录配置错误
   如果你调整文件结构后，启动静态服务时的根目录从client改成了项目根目录project_name，那此时client文件夹本身是服务根目录下的一级目录，你写的路径缺少了/client/前缀，自然找不到资源。
3. 拼写或大小写不匹配
   部分系统（如Linux、类Unix系统）对文件路径大小写敏感，如果你写的路径和实际文件夹/文件名的大小写、单复数拼写不一致，也会返回404。

解决方案 #

• 优先使用根绝对路径写法，直接从服务根目录匹配资源，不受当前页面路径影响，修改跳转标签为：
  <a href="/html/product_categories/products.html"></a>
• 确认静态服务的启动根目录为client文件夹：如果用VSCode Live Server，右键点击client文件夹选择「Open with Live Server」启动，不要在项目根目录直接启动。
• 逐字符核对路径拼写、大小写、单复数，确保和本地磁盘的实际文件结构完全一致。
• 如果使用了前端构建工具（Vite/Webpack等），检查配置中的静态资源包含规则，确保新增的html目录会被完整拷贝到构建输出目录中。

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