阿里云主机折上折
  • 微信号
Current Site：Index > The `<base>` tag sets the base URL.

The `<base>` tag sets the base URL.

Author：Chuan Chen 阅读数：1110人阅读 分类： HTML

The <base> tag is used to specify a base URL for all relative URLs on a page. It typically appears in the <head> section of an HTML document. This tag simplifies the writing of numerous links, especially when dealing with complex directory structures. However, its scope is global, so caution is required when using it.

Basic Syntax of the <base> Tag

The <base> tag is an empty element and does not require a closing tag. Its two main attributes are href and target:

<head>
  <base href="https://example.com/images/" target="_blank">
</head>
  • href: Specifies the base URL, against which all relative URLs will be resolved.
  • target: Defines the default opening behavior for all links that do not explicitly specify a target attribute.

How the href Attribute Works

Once the <base> tag is set, all relative URLs in the document will be resolved relative to it:

<head>
  <base href="https://example.com/resources/">
</head>
<body>
  <!-- Will actually point to https://example.com/resources/images/logo.png -->
  <img src="images/logo.png" alt="Logo">
  
  <!-- Will actually point to https://example.com/resources/css/styles.css -->
  <link rel="stylesheet" href="css/styles.css">
</body>

Even if a relative URL starts with a slash, it will still be resolved relative to the base URL:

<base href="https://example.com/blog/">
<!-- Will actually point to https://example.com/blog/posts/recent -->
<a href="/posts/recent">Recent Posts</a>

Global Control with the target Attribute

The target attribute of <base> can set the default opening behavior for all links on the page:

<head>
  <base target="_blank">
</head>
<body>
  <!-- All links will open in a new tab -->
  <a href="page1.html">Page 1</a>
  <a href="page2.html">Page 2</a>
  
  <!-- Can override the default setting individually -->
  <a href="page3.html" target="_self">Page 3</a>
</body>

Use Cases and Examples

Scenario 1: Unified CDN Resource Management

When website resources are hosted on a CDN, <base> can simplify resource references:

<head>
  <base href="https://cdn.example.com/v2.3/">
</head>
<body>
  <!-- Will actually load https://cdn.example.com/v2.3/js/app.js -->
  <script src="js/app.js"></script>
  
  <!-- Will actually load https://cdn.example.com/v2.3/css/main.css -->
  <link rel="stylesheet" href="css/main.css">
</body>

Scenario 2: Multi-Environment Deployment

Switching between different environments (development/testing/production):

<head>
  <!-- Development environment -->
  <base href="http://dev.example.com/">
  
  <!-- Production environment -->
  <!-- <base href="https://example.com/"> -->
</head>

Scenario 3: Single-Page Application Routing

Using with frontend routing in SPAs:

<head>
  <base href="/app/">
</head>

This ensures all frontend routes are based on the `/app/ path, avoiding conflicts with server routes.

Notes and Edge Cases

  1. Priority: The <base> tag must be placed before other URL-containing elements, typically as the first child of <head>:
<head>
  <!-- Correct placement -->
  <base href="https://example.com/">
  <link rel="stylesheet" href="css/style.css">
</head>
  1. Anchor Links: Base URLs do not affect in-page anchor links:
<base href="https://example.com/">
<!-- Will still jump to #section1 on the current page -->
<a href="#section1">Jump to Section 1</a>
  1. JavaScript Impact: document.baseURI reflects the <base> setting, but window.location is unaffected:
// Assuming <base href="https://api.example.com/">
console.log(document.baseURI); // "https://api.example.com/"
console.log(window.location.href); // Shows the actual page URL
  1. Protocol-Relative URLs: Base URLs can use protocol-relative format:
<base href="//cdn.example.com/">
  1. Multiple <base> Tags: Only one <base> tag is allowed per document; subsequent ones are ignored.

Integration with Frameworks

Usage in React

In React apps, typically set in public/index.html:

<head>
  <base href="%PUBLIC_URL%/">
</head>

Angular's baseHref

Angular CLI projects configure it via build parameters:

ng build --base-href /my-app/

Or in index.html:

<head>
  <base href="/my-app/">
</head>

Browser Compatibility

The <base> tag is fully supported by all modern browsers, including:

  • Chrome 1+
  • Firefox 1+
  • Safari 1+
  • Edge 12+
  • Internet Explorer 3+

Alternatives in Development

In some cases, alternatives to <base> can be used:

  1. Root-Relative Paths:
<!-- Instead of <base> -->
<link rel="stylesheet" href="/static/css/styles.css">
  1. Template Variables:
<link rel="stylesheet" href="{{ BASE_URL }}/css/styles.css">
  1. Dynamic JavaScript Setup:
document.querySelectorAll('a[href^="/"]').forEach(link => {
  link.href = `https://example.com${link.getAttribute('href')}`;
});

Server Configuration Impact

Server redirects may conflict with <base>. For example, when the server redirects all requests to HTTPS:

<!-- May trigger mixed-content warnings -->
<base href="http://example.com/">

Performance Considerations

Proper use of <base> can reduce HTML file size (by avoiding repeated full URLs), but overuse may lead to:

  1. Difficulty tracking actual requested URLs
  2. Complex caching strategies
  3. Additional CDN configuration requirements

Debugging Tips

When <base> causes issues, debug using:

  1. Checking the document.baseURI value
  2. Using browser developer tools to inspect actual requested URLs
  3. Temporarily removing the <base> tag for testing
// Check base URL in console
console.log('Base URI:', document.baseURI);

Security Notes

  1. Open Redirect Risk: Ensure base URLs do not contain user-controllable input.
  2. HTTPS Enforcement: Always use HTTPS for base URLs in production.
  3. Cross-Origin Restrictions: Changing base URLs does not bypass same-origin policies.
<!-- Dangerous example: Could be used for phishing -->
<base href="https://malicious-site.com/">
做个网站！

本站部分内容来自互联网,一切版权均归源网站或源作者所有。

如果侵犯了你的权益请来信告知我们删除。邮箱：cc@cccx.cn

上一篇：