html 中的标签<base>是一个相对鲜为人知的元素，但它可以让您做两件事：
将您选择的任何 URL 设置为所有相对 URL 的基础。
设置默认链接目标。
基础知识
该<base>元素在该部分中定义<head>，每个文档只能使用一次。你应该尽早把它放在你的头部，这样你就可以从那时起使用它。它的两个可能的属性是href和target。您可以单独使用这些属性中的任何一个，也可以同时使用这两个属性。
、 和href元素的属性中使用的相对 URL将引用元素中定义的基本 URL ，在（例如）元素的属性中找到的 URL也是如此。<a><area><link><base>src<img>
示例 1：资源加载快捷方式
假设您有一个站点，该站点将其所有图像和 css 存储在名为assets的文件夹中。<base>你可以这样定义你的标签：
1 <head> 2 <base href="https://www.weixiaolive.com/assets/"> 3 </head>
这将允许您像这样加载任何图像或 CSS：
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：
<base href="https://www.weixiaolive.com/app/">
从那里，无论何时你想从一个内部页面链接到另一个内部页面，你都可以简单地使用：
<a href="anotherpage.html">link</a>
此链接将解析为https://www.weixiaolive.com/app/anotherpage.html.
示例 3：默认链接目标
您还可以使用<base>为页面上的所有链接设置默认目标。如果你要使用：
<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>节省大量时间。
- 示例 1：资源加载快捷方式
- 示例 2：内部页面 URL
- 示例 3：默认链接目标
- 页内锚点
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
发表评论