如何使用 HTML“base”标签 2022-12-09 15:28:01

html 中的标签<base>是一个相对鲜为人知的元素，但它可以让您做两件事：

将您选择的任何 URL 设置为所有相对 URL 的基础。
设置默认链接目标。

如何使用 HTML“base”标签第1张

基础知识

该<base>元素在该部分中定义<head>，每个文档只能使用一次。你应该尽早把它放在你的头部，这样你就可以从那时起使用它。它的两个可能的属性是href和target。您可以单独使用这些属性中的任何一个，也可以同时使用这两个属性。

、和href元素的属性中使用的相对 URL将引用元素中定义的基本 URL ，在（例如）元素的属性中找到的 URL也是如此。<a><area><link><base>src<img>

示例 1：资源加载快捷方式

假设您有一个站点，该站点将其所有图像和 css 存储在名为assets的文件夹中。<base>你可以这样定义你的标签：

Markup

1    <head>    
2        <base href="https://www.weixiaolive.com/assets/">    
3    </head>

这将允许您像这样加载任何图像或 CSS：

Markup

1    <head>    
2        <base href="https://www.weixiaolive.com/assets/">    
3        <link rel="stylesheet" href="style.css">    
4    </head>    
5    <body>    
6        <img src="image01.png" />    
7    </body>

到的链接style.css将解析为https://www.weixiaolive.com/assets/style.css并image01.png从中加载https://www.weixiaolive.com/assets/image01.png。

示例 2：内部页面 URL

如果您有一个顶级域可以重定向到类似的东西https://www.weixiaolive.com/app/ ，并且所有内部链接都需要包含 app/在它们的 URL 中，该怎么办？

您可以像这样设置您的基本 URL：

Markup

<base href="https://www.weixiaolive.com/app/">

从那里，无论何时你想从一个内部页面链接到另一个内部页面，你都可以简单地使用：

Markup

<a href="anotherpage.html">link</a>

此链接将解析为https://www.weixiaolive.com/app/anotherpage.html.

示例 3：默认链接目标

您还可以使用<base>为页面上的所有链接设置默认目标。如果你要使用：

Markup

<base target="_blank">

...任何未明确设置其目标的链接都将在新窗口中打开。target您可以在有或没有伴随属性的情况下使用该属性href。

此功能可能对通过 iframe 加载的内容很有用，因为您可以自动将其中的所有链接定位到父框架。

缺点

虽然<base>url 可以很方便，但它的缺点集中在这样一个事实，即在定义它之后一旦你坚持使用它。您只能以单一方式使用它，然后它会影响所有 URL。无论您不想在什么地方使用<base>标签中设置的默认值，您都必须专门覆盖它们。

如果您像我们上面那样使用它来解析您的assets文件夹，并且您稍后想要从您站点的一个页面链接到另一个页面，您将无法使用<a href="page.html">Page</a>.

这是因为如果使用基本 URL，https://www.weixiaolive.com/assets/您的访问者将被发送到https://www.weixiaolive.com/assets/page.html.

因此，您将不得不改用绝对<base>URL来覆盖您的标签设置，即.<a href="https://www.weixiaolive.com/page.html">Page</a>

页内锚点

使用时，<base>您还可能会遇到链接到页内锚点的问题。

通常，诸如的链接<a href="#top">Back to Top</a>会使您保持在同一页面上，但会跳到带有的元素的位置id="top"，例如，它会解析为https://www.weixiaolive.com/app/article.html#top。

但是，如果您使用的是<base>带有属性的标签，href您将被发送到基本 URL 并附#top加到末尾，例如https://www.weixiaolive.com/app/#top.

同样，在这种情况下，您必须<base>通过指定您希望链接相对于的页面来覆盖标签中设置的默认值，例如<a href="article.html#top">Back to Top</a>。

<base> 最有效的地方

该<base>标记最适用于您知道您将能够完全控制所有 URL 的使用的情况，即您知道您将能够根据需要覆盖默认设置。如果您正在为 CMS 创建一个主题，其中有许多未知变量，最好将其排除在外<base>。

但是，如果您正在构建一个静态 HTML 站点，这<base>可能会非常有帮助。如果您使用handlebars之类的模板语言，情况更是如此，它可以让您放置快捷方式，例如<a href="{url}#top">Back to Top</a>，因此如果您需要覆盖默认设置，它仍然快速而简单。

如果您很清楚项目的内容，并且 URL 和链接的使用完全在您的控制之下，您可能会发现该标签可以为您<base>节省大量时间。

下载地址：本地下载

标签：