在HTML页面中，当页面内存在大量相对路径的资源引用或者链接时，逐个调整路径会非常繁琐，此时可以通过base标签统一设定基础URL，让所有相对路径都基于这个基准地址进行解析。base标签是HTML文档的头部标签，用于指定文档中所有相对URL的基准地址，配置后会对页面内的链接、图片、脚本、样式表等资源的相对路径解析产生影响。
base标签的基本语法
base标签需要放在<head>标签内部，并且一个HTML文档中最多只能存在一个base标签，它的核心属性有两个：href和target。
- href：指定基础URL的地址，所有相对路径都会基于这个地址进行拼接。
- target：可选属性，指定页面内所有超链接的默认打开方式，比如
_blank表示新窗口打开，_self表示当前窗口打开。
基础的配置示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>base标签示例</title>
<!-- 设置基础URL为指定地址 -->
<base href="https://ipipp.com/resources/" target="_blank">
</head>
<body>
<!-- 实际解析后的地址为 https://ipipp.com/resources/logo.png -->
<img src="logo.png" alt="logo">
<!-- 实际解析后的地址为 https://ipipp.com/resources/page/about.html -->
<a href="page/about.html">关于我们</a>
</body>
</html>base标签的作用范围
配置base标签后，以下类型的相对路径都会基于设定的基础URL进行解析：
- 超链接
<a>标签的href属性 - 图片
<img>标签的src属性 - 样式表
<link>标签的href属性 - 脚本
<script>标签的src属性 - 表单
<form>标签的action属性
需要注意的是，如果资源引用使用的是绝对路径（以http://、https://或者/开头），则不会受base标签设定的基础URL影响。
配置base标签的注意事项
1. 位置要求
base标签必须放在<head>标签内，并且尽量放在其他可能引用相对路径的标签之前，避免出现部分资源已经解析完成才加载base标签的情况。
2. 路径拼接规则
基础URL的结尾是否有斜杠会影响路径拼接的结果，假设基础URL设置为https://ipipp.com/resources，那么相对路径logo.png会被解析为https://ipipp.com/logo.png；如果基础URL设置为https://ipipp.com/resources/，那么相对路径logo.png会被解析为https://ipipp.com/resources/logo.png，这个细节需要特别注意。
3. 唯一性要求
一个HTML文档中只能有一个base标签，如果配置了多个base标签，只有第一个会生效，后续的base标签会被浏览器忽略。
4. 对历史链接的影响
如果页面中已经有基于旧路径的相对链接，配置base标签后这些链接的解析地址会发生变化，上线前需要全面测试，避免出现资源加载失败或者链接跳转错误的问题。
常见使用场景
base标签常见使用场景包括：
- 项目静态资源统一放在CDN的某个目录下，通过base标签统一指定CDN基础地址，简化资源引用路径。
- 多页面项目的子目录页面较多，统一设置基础URL避免每个相对路径都写冗长的上层目录前缀。
- 需要统一设置页面内所有超链接的打开方式时，通过base的target属性统一配置，不需要逐个给
<a>标签加target属性。
下面是一个统一设置静态资源CDN基础地址的示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CDN资源示例</title>
<!-- 静态资源CDN基础地址 -->
<base href="https://cdn.ipipp.com/static/">
<!-- 实际加载地址为 https://cdn.ipipp.com/static/css/style.css -->
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- 实际加载地址为 https://cdn.ipipp.com/static/js/main.js -->
<script src="js/main.js"></script>
</body>
</html>