在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 对象拼接相对路径：
// 获取当前页面的目录路径（不含文件名）
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状态码），避免死链。
| 方法 | 适用场景 | 推荐指数 |
|---|---|---|
<base>
| ||
| JavaScript | 需动态计算的路径（如SPA应用） | |
| 服务端生成 | 动态网站（PHP/Python/Node等） |
核心建议： 型网站，优先通过服务端生成路径，确保路径准确性和代码可维护性；若需客户端处理，使用JavaScript的 URL() 构造函数是可靠选择。
引用说明： 参考MDN Web文档中关于URL处理及W3C标准中路径规范，并结合了Google搜索中心关于SEO友好URL的最佳实践。
原创文章，发布者：酷盾叔，转转请注明出处：https://www.kd.cn/ask/29022.html
