定义和用法
<base>标签用于指定文档中所有相对 URL 的基础 URL。
<base>标签必须位于<head>部分，并且一个文档中只能有一个<base>元素。
<base>只会对后续的相对 URL 有效，所以元数据中，包年相对 URL的数据都要放在<base>标签的后面。
<base>元素的基本语法：
<head>
<base href="https://www.kaicz.com/" target="_blank">
</head>那么，没有设置<base>标签的文档，浏览器是如何确定相对链接的基础 URL 的呢？
- 使用当前文档的 URL 作为基础 URL
- 遵循标准 URL 解析规则
使用实例
接下来用多种实例演示带<base>标签与不带<base>标签的用法，来深化您对<base>的理解。
1. 带<base>标签时，直接调用自带的基础 URL
<head>
<base href="https://www.kaicz.com/html/" target="_blank">
</head>
<body>
<a href="html-css.html">HTML CSS</a><br>
<!-- 解析为: https://www.kaicz.com/html/html-css.html -->
<a href="html-audio.html">HTML 音频（Audio）</a>
<!-- 解析为: https://www.kaicz.com/html/html-audio.html -->
</body>2. 不带<base>标签时，相对于当前文档路径的 URL 作为基础 URL
实例代码
复制
<!-- 当前URL: https://www.kaicz.com/html/html-tutorial.html -->
<a href="html-intro.html">HTML 简介</a>
<!-- 解析为: https://www.kaicz.com/html/html-intro.html -->3. 不带<base>标签时，子目录引用（前导斜杠）作为基础 URL
实例代码
复制
<!-- 当前URL: https://www.kaicz.com/html/html-tutorial.html -->
<a href="/html/html-intro.html">HTML 简介</a>
<!-- 解析为: https://www.kaicz.com/html/html-intro.html -->- 前导斜杠
/表示从网站根目录开始
4. 不带<base>标签时，上级目录引用（../）作为基础 URL
实例代码
复制
<!-- 当前URL: https://www.kaicz.com/html/html-tutorial.html -->
<a href=\"../html-intro.html\">HTML 简介</a>
<!-- 解析为: https://example.com/html-intro.html -->
<a href=\"../../index.html\">首页</a>
<!-- 解析为: https://www.kaicz.com/index.html -->- 每个
../表示向上一级目录
5. 不带<base>标签时，协议相对路径（已弃用）作为基础 URL
实例代码
复制
<!-- 当前URL: https://www.kaicz.com/html/html-tutorial.html -->
<a href="//www.kaicz.com/html-intro.html">HTML 简介</a>
<!-- 解析为: https://www.kaicz.com/html-intro.html -->- 现代开发中不推荐使用，应明确指定
https://
全局属性
<base>标签还支持 HTML 中的全局属性。
事件属性
<base>标签不支持 HTML 中的任何事件属性。
默认的 CSS 设置
无
注意事项
- 唯一性：一个文档只能有一个
<base>标签 - 位置：应该放在
<head>部分的其他元素之前（除了<title>和<meta>） - 优先级：单个链接的 target 属性会覆盖
<base>的设置 - 锚点：
<base>不会影响页面内锚点链接（如#section1）
浏览器支持
<base>标签被所有现代浏览器支持。
 |
 |
 |
 |
 |
| 支持 | 支持 | 支持 | 支持 | 支持 |
评论区 0
发表评论
教程介绍
HTML 参考手册涵盖 HTML 元素、属性、事件等详细解析，助您快速检索 HTML 使用方法 。
50
章节
61
阅读
0
评论
反馈提交成功
感谢您的反馈，我们将尽快处理您的反馈