当前位置：首页 > 前端开发 > 正文

如何在HTML中获取相对地址？

admin
前端开发
2025-06-18
3468

在HTML中获取相对地址可通过JavaScript的 window.location对象实现，如 location.pathname提取路径部分，或使用` 标签设置基准URL后，通过document.baseURI`获取解析后的绝对路径。

什么是相对地址？

相对地址指基于当前页面路径的简写路径，而非完整的绝对URL。

当前页面URL：https://example.com/blog/post.html
相对地址 images/logo.png 会解析为 https://example.com/blog/images/logo.png
相对地址 ../contact.html 会解析为 https://example.com/contact.html

为什么需要获取相对地址？

灵活性：代码在开发环境与生产环境迁移时无需修改路径。
可维护性：避免硬编码完整URL，减少错误。
SEO友好：相对路径利于搜索引擎理解网站结构。

HTML中获取相对地址的3种方法

方法1：使用 `<base>` 标签统一基准路径

在 <head> 中定义基准URL，页面内所有相对路径均基于此地址：

<head>
  <base href="https://example.com/blog/">
</head>
<body>
  <!-- 以下路径自动解析为 https://example.com/blog/about.html -->
  <a href="about.html">关于我们</a>
</body>

适用场景：整站路径结构统一时。

方法2：JavaScript动态获取

通过JavaScript的 window.location 对象拼接相对路径：

如何在HTML中获取相对地址？第1张

// 获取当前页面的目录路径（不含文件名）
const basePath = window.location.href.split('/').slice(0, -1).join('/') + '/';
// 示例：生成 images/logo.png 的绝对路径
const relativePath = 'images/logo.png';
const fullUrl = new URL(relativePath, basePath).href; 
console.log(fullUrl); // 输出 https://example.com/blog/images/logo.png

优势：精准控制路径逻辑，适合动态页面。

方法3：服务端生成（推荐）

在服务器端代码（如PHP、Node.js）中预计算路径，输出到HTML：

<?php
$baseUrl = "https://" . $_SERVER['HTTP_HOST'] . '/blog/';
?>
<a href="<?php echo $baseUrl; ?>about.html">关于我们</a>

优点：

避免客户端依赖,提升页面加载可靠性。
更符合E-A-T原则（服务器端处理更权威）。

关键注意事项

路径符号含义：
- ：当前目录（可省略）
- ：上级目录
- ：根目录（如 /contact.html 解析为 https://example.com/contact.html）
避免路径错误：
- 确保相对路径的起点与当前页面位置匹配。
- 使用开发者工具（F12）检查网络请求中的路径解析结果。
SEO最佳实践：
- 优先使用相对路径,保持内链结构清晰。
- 确保所有相对地址可访问（返回200状态码），避免死链。