HTML链接在VS Code预览正常，本地直接打开失效问题求助

我制作了一个HTML网站，在VS Code的预览中所有HTML链接均正常工作，但直接从文件夹打开主页HTML文件时，链接失效，浏览器提示无法找到目标文件。

代码片段： #

<header id="top">  
    <video autoplay loop muted plays-inline class="back-video">
        <source src="bg vid 2.mp4" type="video/mp4">
    </video>
    <div style="padding: 10%;">
    <div style="text-align: center;">
    <img class="logo" src="Logo Transparent.png"/>
    </div>
    <h1 class="title">Chingu K-Pop Merch</h1>   
    <nav style="text-align: center;">
        <a class="button" href="index.html"><i class="fa-solid fa-house"></i> Main Page</a>
        <div class="products-dropdown">
            <button class="button" type="button"><i class="fa-solid fa-box"></i> Products</button>
            <div class ="products-content">
                <a href="All Products.html">All Products</a>
                <a href="/Boy Groups/Kpop_Boy_Group.html">All Boy Groups</a>
                <a href="/Girl Groups/Kpop_Girl_Group.html">All Girl Groups</a>
                <a href="/Soloists/SOLOISTS.html">All Solo Artists</a>
                <div style="height: 20px; background-color: white; color: #B6E5D8;">~~~~~~~~~~~~~~</div>
                <a href="/Boy Groups/svt/Seventeen_Kpop_Boy_Group.html">SEVENTEEN</a>
                <a href="/Boy Groups/bts/BTS_Kpop_Boy_Group.html">BTS</a>
                <a href="/Boy Groups/exo/exo.html">EXO</a>
                <div style="height: 20px; background-color: white;color: #B6E5D8;">~~~~~~~~~~~~~~</div>
                <a href="/Girl Groups/ITZY and BP/ITZY.html">ITZY</a>
                <a href="/Girl Groups/ITZY and BP/BLACKPINK.html">BLACKPINK</a>
                <a href="/Girl Groups/twice/twice.html">TWICE</a>
                <div style="height: 20px; background-color: white;color: #B6E5D8;">~~~~~~~~~~~~~~</div>
                <a href="/Soloists/IU.html">IU</a> 
                <a href="/Soloists/CHUNGHA.html">CHUNGHA</a>
            </div>
        </div>
        <a class="button" href="/About The Developers Page HTML/Developers_AboutUs.html"><i class="fa-solid fa-address-card"></i> About Us</a>
        <a class="button" href="/Contact Us Page HTML/Contact_Us.html"><i class="fa-solid fa-phone"></i> Contact Us</a>
    </nav>
    </div>
</header>

问题原因： #

核心问题是绝对路径与相对路径的解析差异：

• 你使用的链接路径以/开头（例如/Boy Groups/Kpop_Boy_Group.html），属于绝对路径。
• VS Code预览会启动本地服务器，此时网站根目录就是你的项目文件夹，绝对路径能正确指向项目内的文件。
• 直接打开HTML文件时，浏览器采用file://协议，此时/会指向电脑的根目录（如C盘、D盘根目录），而非你的项目文件夹，导致无法找到目标文件。

解决方案： #

将所有以/开头的绝对路径修改为相对路径（去掉开头的/），让路径基于当前HTML文件的位置进行解析：
示例修改：

• 把 /Boy Groups/Kpop_Boy_Group.html 改为 Boy Groups/Kpop_Boy_Group.html
• 把 /About The Developers Page HTML/Developers_AboutUs.html 改为 About The Developers Page HTML/Developers_AboutUs.html

额外建议：尽量将文件名和文件夹名中的空格替换为下划线（如Boy Groups改为Boy_Groups），避免部分浏览器解析路径时出现异常。

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