本文讲解如何通过修正 html 中的相对路径为绝对路径，确保网站各页面的“home”链接始终指向根目录下的 index.html，避免因当前路径不同导致的 404 或空白页问题。
本文讲解如何通过修正 html 中的相对路径为绝对路径，确保网站各页面的“home”链接始终指向根目录下的 index.html，避免因当前路径不同导致的 404 或空白页问题。
在多页面静态网站中，“Home”导航项看似简单，却极易因路径写法不当引发跳转失败——例如点击后显示空白页、加载错误资源，或跳转至不存在的子路径（如 /blog/index.html）。根本原因在于 href="index.html" 是相对路径：浏览器会将其解析为“相对于当前 URL 的路径”。若用户正访问 https://yoursite.com/pages/About.html，点击该链接将尝试加载 https://yoursite.com/pages/index.html（而非期望的根目录下 index.html），而该路径通常并不存在，最终导致 404 或空白响应。
✅ 正确做法是使用根相对路径（root-relative URL）：将 href="index.html" 改为 href="/index.html"。开头的 / 表示从网站根目录开始解析，无论当前位于哪个子路径，点击后均精准跳转至 https://yoursite.com/index.html。
同时，请注意修复 HTML 结构错误：您的代码中存在重复的 开标签（ 后又出现 ），这违反 HTML5 规范，可能导致浏览器解析异常或样式/脚本加载失败。应仅保留一个且带 lang 属性的 标签。
修正后的导航片段如下：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parcle Games</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="banner">
<div class="navbar">
<img src="background.png" class="logo" alt="Parcle Games Logo">
<ul>
<li><a href="/index.html" data-after="Home">Home</a></li>
<li><a href="/pages/Project.html" data-after="Projects">Projects</a></li>
<li><a href="/pages/About.html" data-after="About">About</a></li>
<li><a href="/pages/Contact.html" data-after="Contact">Contact</a></li>
</ul>
</div>
</div>
</body>
</html>⚠️ 注意事项：
- 所有导航链接（尤其是
Home）建议统一采用/开头的根相对路径，保证全站一致性； - 确保
index.html确实位于 Web 服务器的根目录下（如 Nginx 的root或 Apache 的DocumentRoot指向的目录）； - 若部署在子路径（如 GitHub Pages 的
username.github.io/repo/），则需改用相对路径或动态前缀（本文场景默认标准根部署）； - 始终验证 HTML 结构有效性（可使用 W3C Markup Validation Service），避免因语法错误干扰功能。
遵循以上规范，即可彻底解决“Home 按钮失效”问题，提升网站健壮性与用户体验。
