我尝试让页面返回上级和主页，一开始我想的比较复杂，记录下当前页面地址，传递给要打开的页面。要打开的页面就用这个地址转化为自己的相对路径然后跳转。

后来我问了AI才知道有更简单靠谱的办法

方法 1：使用 history.back()（直接返回上一页）

<button onclick="goBack()">返回上一页</button>

<script>
  function goBack() {
    window.history.back(); // 等同于浏览器后退按钮
  }
</script>

特点：

• 和浏览器自带的 后退按钮 效果完全一致。
• 如果用户是直接打开当前页（无历史记录），则无效果。

方法 2：使用 history.go(-1)（灵活控制步数）

<button onclick="history.go(-1)">返回</button>

说明：

• -1 表示后退一步，-2 后退两步，以此类推。

方法 3：通过 document.referrer 跳转（精确控制）

如果希望 直接跳转到来源页的 URL（而不是依赖浏览器历史记录）：

<button onclick="goToReferrer()">返回来源页</button>

<script>
  function goToReferrer() {
    const referrer = document.referrer; // 获取来源页 URL
    if (referrer) {
      window.location.href = referrer; // 跳转
    } else {
      alert("无来源页面");
    }
  }
</script>

适用场景：

• 需要明确知道用户是从哪个页面跳转过来的。
• document.referrer 可能为空（如直接输入网址、从书签打开、隐私模式）。

另外，返回主页也有办法

方法 1：使用 / 根路径（推荐）

直接使用 / 代表服务器根目录，默认会加载 index.html（无需显式写文件名）：

<!-- HTML 方式 -->
<a href="/">
  <button>返回主页</button>
</a>

<!-- JavaScript 方式 -->
<button onclick="window.location.href = '/'">返回主页</button>

特点：

• / 会自动指向服务器的根目录（如 https://example.com/）。
• 兼容所有服务器（Apache/Nginx 等默认会解析 / 为 index.html）。

方法 2：显式指定 /index.html

如果服务器配置需要完整文件名：

<a href="/index.html">
  <button>返回主页</button>
</a>

<!-- 或 JS 跳转 -->
<button onclick="window.location.href = '/index.html'">返回主页</button>

常见问题

Q：为什么用 / 而不是 index.html？

• / 更简洁，且符合服务器默认配置（如 https://example.com/ 实际返回 index.html）。
• 避免因路径层级问题导致 404（如子页面 example.com/sub/page 用 index.html 会错误指向 example.com/sub/index.html）。

Q：本地测试时 / 无效？

• 本地文件系统（file:/// 协议）不支持根路径解析，需通过 HTTP 服务器（如 Live Server）测试。

选择 方法1（href="/"） 是最可靠的方式！

如果写成返回主页的js函数就是

    function goToHome() {
        window.location.href = "/"; // 直接跳转
    }

同样的原理，如果访问服务根目录的资源，不需要使用相对路径那么麻烦，而是直接用这种形式。

<img src="/resource/defaulticon.png">

可以方便获得到任何目录下的内容。但是也需要使用web服务器运行的时候测试。本地本件系统不支持。