HTML <base> 标签用于为 HTML 文档中包含的所有相对链接指定基本 URI 或 URL。

一个文档只能指定一个 <base> 元素,并且它必须放置在 <head> 元素内。我们还可以使用 target 属性指定其他链接应该如何打开(在同一窗口中、在新窗口中等)。

语法

<base href="http://www.javatiku.cn">

在 HTML 中,<base> 元素没有闭合标签,但在 XHTML 中需要使用结束标签 </base>

以下是关于 <base> 标签的一些规范:

显示None
开始标签/结束标签只有开始标签
用途锚点和链接

示例

在相同窗口中打开(默认情况下)

<!DOCTYPE html>
<html>
<head>
  <title>Base tag</title>
  <style>
    a {
      text-decoration: none;
      color: black;
    }
    a:hover {
      color: green;
      font-size: 18px;
    }
  </style>
  <base href="http://www.javatiku.cn">
</head>
<body>
  <h2 style="color: red; font-size: 30px; font-style: italic;">Web开发教程列表</h2>
  <a href="/html-tutorial">HTML教程</a><br>
  <a href="/css-tutorial">CSS教程</a><br>
  <a href="/bootstrap-tutorial">Bootstrap教程</a><br>
  <a href="/javascript-tutorial">JavaScript教程</a><br>
  <a href="/jquery-tutorial">jQuery教程</a>
</body>
</html>

输出
uTools_1686104729730.png

在上面的示例中,我们使用的基本 URL 是 "http://www.javatiku.cn",其他相对链接将以该 URL 作为起始 URL。这里的斜杠(/)定义了当前文档的根 URL。

在新窗口中打开(使用 <base> 标签中的 target="_blank"):

<!DOCTYPE html>
<html>
<head>
  <title>Base tag</title>
  <style>
    a {
      text-decoration: none;
      color: black;
    }
    a:hover {
      color: green;
      font-size: 18px;
    }
  </style>
  <base href="http://www.javatiku.cn" target="_blank">
</head>
<body>
  <h2 style="color: red; font-size: 30px; font-style: italic;">Web开发教程列表</h2>
  <a href="/html-tutorial">HTML教程</a><br>
  <a href="/css-tutorial">CSS教程</a><br>
  <a href="/bootstrap-tutorial">Bootstrap教程</a><br>
  <a href="/javascript-tutorial">JavaScript教程</a><br>
  <a href="/jquery-tutorial">jQuery教程</a>
</body>
</html>

输出
uTools_1686104839396.png

在上面的示例中,我们只在 <base> 标签中使用了 target="_blank",但它适用于整个文档中的链接。

属性

标签特定属性:

属性定义
hrefURL指定所有相对链接的基本 URL。
target
_blank在新窗口中打开相对链接。
_self在当前窗口中打开相对链接。
_parent在父级框架中打开相对链接。
_top在整个页面的完整宽度中打开链接。

全局属性

<base> 标签支持 HTML 中的所有全局属性。

事件属性

<base> 标签不支持 HTML 中的事件属性。

支持的浏览器

元素chrome browser Chromeie browser IEfirefox browser Firefoxopera browser Operasafari browser Safari
<base>YesYesYesYesYes

标签: html, HTML教程, HTML技术, HTML学习, HTML学习教程, HTML下载, HTML语言, HTML开发, HTML入门教程, HTML进阶教程, HTML高级教程, HTML面试题, HTML笔试题, HTML编程思想