html获取网站根目录

使用绝对路径

原理：以 开头的路径直接从网站根目录开始查找资源，不受当前页面位置影响。
适用场景：静态资源（CSS、JS、图片）引用、链接跳转。
示例：

<link rel="stylesheet" href="/css/style.css">  
<script src="/js/app.js"></script>  
<a href="/index.html">返回首页</a> 

动态生成根路径（JavaScript）

原理：通过 location.origin 或 location.pathname 结合当前路径计算根目录。
适用场景：需要动态适配不同部署环境（如二级目录或子域名）。
示例：

<script>
  // 方法1：直接获取协议+域名
  const rootUrl = location.origin; // https://example.com
  console.log(rootUrl);
  // 方法2：通过当前路径重组
  const currentPath = location.pathname; // /subdir/page.html
  const rootPath = currentPath.substring(0, currentPath.indexOf('/', 1)); // /subdir
  console.log(rootPath);
</script>

服务器端配置（如 <base>

原理：通过 <base> 标签声明全局基准路径，覆盖所有相对路径的起始点。
适用场景：单页应用（SPA）或需要统一路径基准的项目。
示例：

<base href="https://example.com/">  
<link rel="stylesheet" href="css/style.css"> <!-实际指向 https://example.com/css/style.css --> 

---

方法对比表

方法	优点	缺点
绝对路径	简单直接，无需计算	部署到非根目录时需手动修改
JavaScript 动态生成	适配性强，可处理复杂环境	依赖浏览器支持，增加代码复杂度
<base>	统一管理路径，方便维护	影响全局链接，可能导致意外错误

---

常见问题与解答

问题1：如果网站部署在二级目录（如 https://example.com/app/），如何确保资源路径正确？
解答：

• 方案1：修改所有资源路径为相对于根目录的绝对路径（如 /app/css/style.css）。
• 方案2：使用 <base> 标签声明基准路径：

  <base href="https://example.com/app/">  
  <link rel="stylesheet" href="css/style.css"> <!-实际指向 /app/css/style.css --> 

• 方案3：通过 JavaScript 动态拼接路径：

  const resourcePath = '/app/' + 'css/style.css'; // 结果为 /app/css/style.css

---

问题2：如何在 HTML 中安全地引用跨协议的资源（如从 HTTP 页面引用 HTTPS 资源）？
解答：

• 协议相对路径：省略 http(s)://，让浏览器自动匹配当前页面的协议。

  <link rel="stylesheet" href="//cdn.example.com/css/style.css"> 

• 注意事项：
  • 如果页面本身是 HTTPS，引用 HTTP 资源会导致浏览器阻止加载。
  • 建议所有资源均使用 HTTPS，避免混合内容