HTML <base> 元素-代码号

HTML <base> 元素详解与使用教程

一、`<base>` 元素概述

<base> 是 HTML5 中的一个重要元素，它用于为文档中的所有相对 URL 定义一个基准地址。这个元素还可以指定页面中所有链接的默认打开方式（在新窗口、当前窗口等）。

通过 JavaScript 的 document.baseURI 属性可以获取文档使用的基准 URL。如果文档中没有 <base> 元素，baseURI 将默认为 document.location.href。

二、语法与基本用法

<base> 是一个空元素，不需要闭合标签。但在 XHTML 中，必须使用自闭合语法 <base/>。

每个页面只能使用一个 <base> 元素，且必须放置在 <head> 部分。建议尽早定义，因为它会影响后续所有相对 URL 的解析。

<!DOCTYPE html>
<html>
  <head>
    <title>代码号 - HTML base 元素教程</title>
    <base href="https://www.ebingou.cn/" target="_blank">
  </head>
  <body>
    <a href="/jiaocheng/">访问代码号教程中心</a>
  </body>
</html>

在上例中，<base> 元素定义了基准 URL 为 "https://www.ebingou.cn/"，相对链接 "/jiaocheng/" 将基于此基准地址解析为 "https://www.ebingou.cn/jiaocheng/"。

三、属性详解

<base> 元素必须包含 href 或 target 属性中的至少一个，也可以同时使用两个属性。

属性	值	说明
href	URL	指定页面中所有相对 URL 的基准地址
target	_blank	在新窗口中打开链接
	_self	在当前窗口中打开链接（默认值）
	_parent	在父框架中打开链接
	_top	在整个窗口中打开链接，取消所有框架

四、实用示例

示例1：设置基准URL

<!DOCTYPE html>
<html>
  <head>
    <title>代码号编程学习平台</title>
    <base href="https://www.ebingou.cn/biancheng/">
  </head>
  <body>
    <h1>前端开发学习路径</h1>
    <ul>
      <li><a href="html-tutorial">HTML教程</a></li>
      <li><a href="css-guide">CSS指南</a></li>
      <li><a href="javascript-basics">JavaScript基础</a></li>
    </ul>
  </body>
</html>

在此示例中，所有相对链接都会自动基于 "https://www.ebingou.cn/biancheng/" 解析，因此 "html-tutorial" 链接将指向 "https://www.ebingou.cn/biancheng/html-tutorial"。

示例2：设置默认打开方式

<!DOCTYPE html>
<html>
  <head>
    <title>代码号资源下载中心</title>
    <base target="_blank">
  </head>
  <body>
    <h1>编程学习资源</h1>
    <p>以下资源将在新标签页中打开：</p>
    <ul>
      <li><a href="https://www.ebingou.cn/yuanma/project1.zip">项目源码一</a></li>
      <li><a href="https://www.ebingou.cn/yuanma/project2.zip">项目源码二</a></li>
      <li><a href="https://www.ebingou.cn/jiaocheng/advanced-html.pdf">高级HTML教程</a></li>
    </ul>
  </body>
</html>

此例中，虽然链接都是绝对URL，但它们的打开方式都受 <base> 元素的 target="_blank" 属性控制，会在新标签页中打开。

示例3：综合应用

<!DOCTYPE html>
<html>
  <head>
    <title>代码号学习平台</title>
    <base href="https://www.ebingou.cn/resources/2025/" target="_blank">
  </head>
  <body>
    <header>
      <img src="/biancheng/images/logo.png" alt="代码号logo" height="50">
      <h1>2025年编程资源</h1>
    </header>
    
    <main>
      <section>
        <h2>前端开发资源</h2>
        <ul>
          <li><a href="html5-cheatsheet.pdf">HTML5速查表</a></li>
          <li><a href="css-frameworks-comparison.docx">CSS框架对比文档</a></li>
          <li><a href="javascript-projects.zip">JavaScript实战项目源码</a></li>
        </ul>
      </section>
      
      <section>
        <h2>后端开发资源</h2>
        <ul>
          <li><a href="nodejs-tutorial.zip">Node.js教程代码</a></li>
          <li><a href="database-design.pptx">数据库设计指南</a></li>
        </ul>
      </section>
    </main>
    
    <footer>
      <p>如有问题，请联系：<a href="mailto:alan@ebingou.cn">alan@ebingou.cn</a></p>
    </footer>
  </body>
</html>

在此示例中，所有相对URL都会基于 "https://www.ebingou.cn/resources/2025/" 解析，并且所有链接都会在新标签页中打开。

五、注意事项

唯一性：每个文档只能有一个 <base> 元素，如果存在多个，只有第一个的 href 和 target 属性会被使用，其余将被忽略。
位置要求：<base> 元素必须位于 <head> 部分，且应尽可能早地定义，较好在 <title> 之后其他元素之前。
JavaScript 影响：使用 <base> 元素后，JavaScript 中的相对路径也会基于基准 URL 进行解析。
锚点链接：<base> 元素不会影响页内锚点链接（如 #section1）的行为。

六、本节课程知识要点

<base> 元素用于设置文档中所有相对 URL 的基准地址
可以同时指定链接的默认打开方式（target属性）
每个页面只能有一个 <base> 元素，且必须位于 <head> 部分
基准URL会影响页面中所有相对路径的解析，包括链接、图片、脚本等
合理使用 <base> 元素可以简化页面中URL的编写和维护

七、浏览器兼容性

<base> 元素在所有现代浏览器中都有很好的支持：

Chrome ✓
Edge ✓
Firefox ✓
Safari ✓
Opera ✓

通过本教程的学习，您应该已经掌握了 <base> 元素的核心概念和实际应用方法。在代码号编程学习平台上，您可以找到更多HTML5元素的实践案例和进阶教程，帮助您提升前端开发技能。

本文标签：

HTML <base> 元素