html <base> 标签有什么建议?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1889076/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:32:26  来源:igfitidea点击:

What are the recommendations for html <base> tag?

htmlcontextpathbase-tag

提问by Kzqai

I've never seen <base>HTML tagactually used anywhere before. Are there pitfalls to its use that means I should avoid it?

我以前从未见过 在任何地方实际使用过的<base>HTML 标签。它的使用是否存在陷阱,这意味着我应该避免它?

The fact that I have never noticed it in use on a modern production site (or any site) makes me leery of it, though it seems like it might have useful applications for simplifying links on my site.

我从未注意到它在现代生产站点(或任何站点)上使用的事实使我对它持怀疑态度,尽管它似乎可能具有用于简化我站点上的链接的有用应用程序。



Edit

编辑

After using the base tag for a few weeks, I did end up finding some majorgotchas with using the base tag that make it much less desirable than it first appeared. Essentially, the changes to href='#topic'and href=''under the base tag are veryincompatible with their default behavior, and this change from the default behavior could easily make third party libraries outside of your control very unreliablein unexpected ways, since they will logically depend on the default behavior. Often the changes are subtle and lead to not-immediately-obvious problems when dealing with a large codebase. I have since created an answer detailing the issues that I experienced below. So test the link results for yourself before you commit to a widespread deployment of <base>, is my new advice!

使用基本标签了几个星期后,我最终找到了一些重大的陷阱与使用基本标签,使得它更希望比它第一次出现。本质上,对base 标签href='#topic'href=''在 base 标签下的更改与其默认行为非常不兼容,并且这种对默认行为的更改很容易使您控制之外的第三方库变得非常不可靠以意想不到的方式,因为它们在逻辑上取决于默认行为。在处理大型代码库时,这些更改通常是微妙的,会导致不立即明显的问题。从那以后,我创建了一个答案,详细说明了我在下面遇到的问题。因此,在您承诺广泛部署 之前,请自行测试链接结果<base>,这是我的新建议!

采纳答案by Kzqai

Breakdown of the effects of the base tag:

基础标签的作用分解:

The base tag appears to have some non-intuitive effects, and I recommend being aware of the outcomes and testing them for yourself before relying on <base>! Since I've discovered them aftertrying to use the base tag to handle local sites with differing urls and only found out the problematic effects after, to my dismay, I feel compelled to create this summary of these potential pitfalls for others.

基本标签似乎有一些非直观的效果,我建议在依赖<base>! 由于我尝试使用 base 标记处理具有不同 url 的本地站点发现了它们,并且在之后才发现有问题的效果,令我沮丧的是,我觉得有必要为其他人创建这些潜在陷阱的摘要。

I'll use a base tag of: <base href="http://www.example.com/other-subdirectory/">as my example in the cases below, and will pretend that the page that the code is on is http://localsite.com/original-subdirectory

我将使用基本标签:<base href="http://www.example.com/other-subdirectory/">作为我在下面案例中的示例,并假装代码所在的页面是http://localsite.com/original-subdirectory

Major:

主要的:

No links or named anchors or blank hrefs will point to the original subdirectory, unless that is made explicit: The base tag makes everythinglink differently, including same-page anchor links to the base tag's url instead, e.g:

除非明确说明,否则任何链接或命名锚点或空白 href 都不会指向原始子目录:基本标签使所有链接都不同,包括指向基本标签 url 的同页锚链接,例如:

  • <a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
    becomes
    <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

  • <a href='?update=1' title='Some title'>A link to this page</a>
    becomes
    <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

  • <a href='#top-of-page' title='Some title'>A link to the top of the page via a named anchor</a>
    变成
    <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A link to an #named-anchor on the completely different base page</a>

  • <a href='?update=1' title='Some title'>A link to this page</a>
    变成
    <a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>A link to the base tag's page instead</a>

With some work, you can fix these problems on links that you have control over, by explicitly specifying that these links link to the page that they are on, but when you add third-party libraries to the mix that rely on the standard behavior, it can easily cause a big mess.

通过一些工作,您可以通过明确指定这些链接链接到它们所在的页面来解决您可以控制的链接上的这些问题,但是当您将第三方库添加到依赖于标准行为的组合时,它很容易造成大混乱。

Minor:

次要的:

IE6 fix that requires conditional comments: Requires conditional comments for ie6 to avoid screwing up the dom hierarchy, i.e. <base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]-->as BalusCmentions in his answer above.

需要条件注释的 IE6 修复:需要 ie6 的条件注释以避免搞砸 dom 层次结构,即<base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]-->BalusC上面他的回答中所述。

So overall, the major problem makes use tricky unless you have full editing control over every link, and as I originally feared, that makes it more trouble than it's worth. Now I have to go off and rewrite all my uses of it! :p

所以总的来说,除非您对每个链接都拥有完全的编辑控制权,否则主要问题会使使用变得棘手,正如我最初担心的那样,这会带来更多的麻烦而不是它的价值。现在我必须去重写我对它的所有用途!:p

Related links of testing for issues when using "fragments"/hashes:

使用“片段”/哈希时测试问题的相关链接:

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/

http://www.w3.org/People/mimasa/test/base/results

http://www.w3.org/People/mimasa/test/base/results



Edit by Izzy:For all of you running into the same confusion as me concerning the comments:

Izzy 编辑:对于你们所有人都和我一样在评论中遇到的困惑:

I've just tested it out myself, with the following results:

我刚刚自己测试了一下,结果如下:

  • trailing slash or not, makes no difference to the examples given here (#anchorand ?querywould simply be appended to the specified <BASE>).
  • It however makes a difference for relative links: omitting the trailing slash, other.htmland dir/other.htmlwould start at the DOCUMENT_ROOTwith the given example, /other-subdirectorybeing (correctly) treated as file and thus omitted.
  • 尾部斜杠与否,与此处给出的示例没有区别(#anchor并且?query将简单地附加到指定的<BASE>)。
  • 然而,它对相对链接有所不同:省略尾部斜杠,other.html并且dir/other.html将从DOCUMENT_ROOT给定的示例开始,/other-subdirectory被(正确)视为文件,因此被省略。

So for relative links, BASEworks fine with the moved page – while anchors and ?querieswould need the file name be specified explicitly (with BASEhaving a trailing slash, or the last element not corresponding to the name of the file it's used in).

因此,对于相对链接,BASE在移动的页面上可以正常工作——而锚点则?queries需要明确指定文件名(带有BASE尾部斜杠,或者最后一个元素与它所使用的文件名不对应)。

Think of it as <BASE>replacing the full URL to the file itself(and notthe directory it resides in), and you'll get things right. Assuming the file used in this example was other-subdirectory/test.html(after it moved to the new location), the correct specification should have been:

将其视为<BASE>替换文件本身(而不是文件所在的目录)的完整 URL,您就会得到正确的结果。假设这个例子中使用的文件是other-subdirectory/test.html(在它移动到新位置之后),正确的规范应该是:

<base href="http://www.example.com/other-subdirectory/test.html">

<base href="http://www.example.com/other-subdirectory/test.html">

– et voila, everythingworks as expected: #anchor, ?query, other.html, very/other.html, /completely/other.html.

– 瞧,一切都按预期进行:#anchor, ?query, other.html, very/other.html, /completely/other.html.

回答by BalusC

Before deciding whether to use the <base>tag or not, you need to understand how it works, what it can be used for and what the implications are and finally outweigh the advantages/disadvantages.

在决定是否使用<base>标签之前,您需要了解它是如何工作的,它可以用来做什么以及它的含义是什么,并最终超过优点/缺点。



The <base>tag mainly eases creating relative links in templating languages as you don't need to worry about the current context in everylink.

<base>标签主要简化了在模板语言中创建相关链接的过程,因为您无需担心每个链接中的当前上下文。

You can do for example

你可以做例如

<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />

instead of

代替

<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />

Please note that the <base href>value ends with a slash, otherwise it will be interpreted relative to the last path.

请注意,该<base href>值以斜杠结尾,否则将相对于最后一个路径进行解释。



As to browser compatibility, this causes only problems in IE. The <base>tag is in HTML specified as nothaving an end tag </base>, so it's legit to just use <base>without an end tag. However IE6 thinks otherwise and the entire content afterthe <base>tag is in such case placed as childof the <base>element in the HTML DOM tree. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selectors like html>body, until you discover in the HTML DOM inspector that there should be a base(and head) in between.

至于浏览器兼容性,这只会导致 IE 出现问题。该<base>标签在 HTML 中指定为没有结束标签</base>,因此在<base>没有结束标签的情况下使用是合法的。但是IE6认为否则,整个内容<base>标签是放置在这样的情况下孩子的的<base>在HTML DOM树元素。这可能会导致在 Javascript/jQuery/CSS 中乍一看无法解释的问题,即元素在特定选择器中完全无法访问,例如html>body,直到您在 HTML DOM 检查器中发现之间应该有base(和head)。

A common IE6 fix is using an IE conditional comment to include the end tag:

一个常见的 IE6 修复是使用 IE 条件注释来包含结束标记:

<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->

If you don't care about the W3 Validator, or when you're on HTML5 already, then you can just self-close it, every webbrowser supports it anyway:

如果您不关心 W3 验证器,或者当您已经在使用 HTML5 时,那么您可以自行关闭它,无论如何每个网络浏览器都支持它:

<base href="http://example.com/en/" />

Closing the <base>tag also instantly fixes the insanityof IE6 on WinXP SP3 to request <script>resources with an relative URI in srcin an infinite loop.

关闭<base>标签还立即修复了WinXP SP3 上的 IE6 在无限循环中使用相对 URI请求资源的疯狂问题。<script>src

Another potential IE problem will manifest when you use a relative URI in the <base>tag, such as <base href="//example.com/somefolder/">or <base href="/somefolder/">. This will fail in IE6/7/8. This is however not exactly browser's fault; using relative URIs in the <base>tag is namely at its own wrong. The HTML4 specificationstated that it should be an absolute URI, thus starting with the http://or https://scheme. This has been dropped in HTML5 specification. So if you use HTML5 and target HTML5 compatible browsers only, then you should be all fine by using a relative URI in the <base>tag.

当您在<base>标记中使用相对 URI (例如<base href="//example.com/somefolder/">或 )时,另一个潜在的 IE 问题将显现出来<base href="/somefolder/">。这将在 IE6/7/8 中失败。然而,这并不完全是浏览器的错。在<base>标签中使用相对 URI本身就是错误的。所述HTML4说明书指出,它应为绝对URI,从而开始与所述http://https://方案。这已在HTML5 规范中删除。因此,如果您使用 HTML5 并且仅针对 HTML5 兼容浏览器,那么通过在<base>标记中使用相对 URI 应该没问题。



As to using named/hash fragment anchors like <a href="#anchor">, query string anchors like <a href="?foo=bar">and path fragment anchors like <a href=";foo=bar">, with the <base>tag you're basically declaring allrelative links relative to it, includingthose kind of anchors. None of the relative links are relative to the current request URI anymore (as would happen without the <base>tag). This may in first place be confusing for starters. To construct those anchors the right way, you basically need to include the URI,

至于使用命名/哈希片段锚,如<a href="#anchor">查询字符串锚<a href="?foo=bar">和路径片段锚,如<a href=";foo=bar">使用<base>标签,您基本上是在声明与其相关的所有相关链接,包括那些类型的锚。所有的相对链接都不再与当前的请求 URI 相关(就像没有<base>标签的情况一样)。首先,这可能会让初学者感到困惑。要以正确的方式构建这些锚点,您基本上需要包含 URI,

<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>

where ${uri}basically translates to $_SERVER['REQUEST_URI']in PHP, ${pageContext.request.requestURI}in JSP, and #{request.requestURI}in JSF. Noted should be that MVC frameworks like JSF have tags reducing all this boilerplate and removing the need for <base>. See also a.o. What URL to use to link / navigate to other JSF pages.

where${uri}基本上可以转换为$_SERVER['REQUEST_URI']PHP、${pageContext.request.requestURI}JSP 和#{request.requestURI}JSF。应该注意的是,像 JSF 这样的 MVC 框架具有标签,减少了所有这些样板文件并消除了对<base>. 另请参阅 ao使用什么 URL 链接/导航到其他 JSF 页面

回答by Summer

Well, wait a minute. I don't think the base tag deserves this bad reputation.

嗯,等一下。我不认为基本标签应该得到这样的坏名声。

The nice thing about the base tag is that it enables you to do complex URL rewrites with less hassle.

基本标签的好处在于它使您能够更轻松地进行复杂的 URL 重写。

Here's an example. You decide to move http://example.com/product/category/thisproductto http://example.com/product/thisproduct. You change your .htaccess file to rewrite the first URL to the second URL.

这是一个例子。您决定将http://example.com/product/category/thisproduct移至http://example.com/product/thisproduct。您更改 .htaccess 文件以将第一个 URL 重写为第二个 URL。

With the base tag in place, you do your .htaccess rewrite and that's it. No problem. But without the base tag, all of your relative links will break.

有了 base 标签,你就可以重写 .htaccess 了,就是这样。没问题。但是如果没有基本标签,您所有的相关链接都会中断。

URL rewrites are often necessary, because tweaking them can help your site's architecture and search engine visibility. True, you'll need workarounds for the "#" and '' problems that folks mentioned. But the base tag deserves a place in the toolkit.

URL 重写通常是必要的,因为调整它们可以帮助您网站的架构和搜索引擎的可见性。确实,您需要解决人们提到的“#”和“'”问题。但基础标签在工具包中值得一席之地。

回答by Izzy

To decide whether it should be used or not, you should be aware of what it does and whether it's needed. This is already partly outlined in this answer, which I also contributed to. But to make it easier to understand and follow, a second explanation here. First we need to understand:

要决定是否应该使用它,您应该了解它的作用以及是否需要它。这已经在这个答案中部分概述,我也做出了贡献。但为了更容易理解和遵循,这里有第二个解释。首先我们需要明白:

How are links processed by the browser without <BASE>being used?

浏览器如何处理未<BASE>使用的链接?

For some examples, let's assume we have these URLs:

对于一些示例,假设我们有以下 URL:

A) http://www.example.com/index.html
B) http://www.example.com/
C) http://www.example.com/page.html
D) http://www.example.com/subdir/page.html

A) http://www.example.com/index.html
B) http://www.example.com/
C) http://www.example.com/page.html
D)http://www.example.com/subdir/page.html

A+B both result in the very same file (index.html) be sent to the browser, C of course sends page.html, and D sends /subdir/page.html.

A+B 都导致相同的文件 ( index.html) 被发送到浏览器, C 当然发送page.html, D 发送/subdir/page.html

Let's further assume, both pages contain a set of links:

让我们进一步假设,两个页面都包含一组链接:

1) fully qualified absolute links (http://www...)
2) local absolute links (/some/dir/page.html)
3) relative links including file names (dir/page.html), and
4) relative links with "segments" only (#anchor, ?foo=bar).

1) 完全限定的绝对链接 ( http://www...)
2) 本地绝对链接 ( /some/dir/page.html)
3) 包括文件名的相对链接 ( dir/page.html),以及
4) 仅包含“段”的相对链接 ( #anchor, ?foo=bar)。

The browser receives the page, and renders the HTML. If it finds some URL, it needs to know where to point it to. That's always clear for Link 1), which is taken as-is. All others depend on the URL of the rendered page:

浏览器接收页面,并呈现 HTML。如果它找到某个 URL,它需要知道将它指向哪里。这对于链接 1) 来说总是很清楚的,它是按原样使用的。所有其他人都依赖于呈现页面的 URL:

URL     | Link | Result
--------+------+--------------------------
A,B,C,D |    2 | http://www.example.com/some/dir/page.html
A,B,C   |    3 | http://www.example.com/dir/page.html
D       |    3 | http://www.example.com/subdir/dir/page.html
A       |    4 | http://www.example.com/index.html#anchor
B       |    4 | http://www.example.com/#anchor
C       |    4 | http://www.example.com/page.html#anchor
D       |    4 | http://www.example.com/subdir/page.html#anchor

Now what changes with<BASE>being used?

现在什么样的变化<BASE>被使用?

<BASE>is supposed to replace the URL as it appears to the browser. So it renders all links as if the user had called up the URL specified in <BASE>. Which explains some of the confusion in several of the other answers:

<BASE>应该替换在浏览器中显示的 URL 。因此,它呈现所有链接,就好像用户调用了<BASE>. 这解释了其他几个答案中的一些混乱:

  • again, nothing changes for "fully qualified absolute links" ("type 1")
  • for local absolute links, the targeted servermight change (if the one specified in <BASE>differs from the one being called initially from the user)
  • relative URLs become critical here, so you've got to take special care how you set <BASE>:
    • better avoid setting it to a directory. Doing so, links of "type 3" might continue to work, but it most certainly breaks those of "type 4" (except for "case B")
    • set it to the fully qualified file nameproduces, in most cases, the desired results.
  • 同样,“完全限定的绝对链接”(“类型 1”)没有任何变化
  • 对于本地绝对链接,目标服务器可能会更改(如果 中指定的服务器<BASE>与用户最初调用的服务器不同)
  • 相对 URL 在这里变得至关重要,因此您必须特别注意您的设置方式<BASE>
    • 最好避免将其设置为目录。这样做,“类型 3”的链接可能会继续工作,但它肯定会破坏“类型 4”的链接(“案例 B”除外)
    • 在大多数情况下,将其设置为完全限定的文件名会产生所需的结果。

An example explains it best

一个例子解释得最好

Say you want to "prettify" some URL using mod_rewrite:

假设您想使用以下命令“美化”一些 URL mod_rewrite

  • real file: <DOCUMENT_ROOT>/some/dir/file.php?lang=en
  • real URL: http://www.example.com/some/dir/file.php?lang=en
  • user-friendly URL: http://www.example.com/en/file
  • 真实档案: <DOCUMENT_ROOT>/some/dir/file.php?lang=en
  • 真实网址: http://www.example.com/some/dir/file.php?lang=en
  • 用户友好的网址: http://www.example.com/en/file

Let's assume mod_rewriteis used to transparentlyrewrite the user-friendly URL to the real one (no external re-direct, so the "user-friendly" one stays in the browsers address bar, while the real-one is loaded). What to do now?

假设mod_rewrite用于透明地将用户友好的 URL 重写为真实 URL(没有外部重定向,因此“用户友好”的 URL 留在浏览器地址栏中,而真实的 URL 已加载)。现在做什么?

  • no <BASE>specified: breaks all relative links (as they would be based on http://www.example.com/en/filenow)
  • <BASE HREF='http://www.example.com/some/dir>: Absolutely wrong. dirwould be considered the filepart of the specified URL, so still, all relative links are broken.
  • <BASE HREF='http://www.example.com/some/dir/>: Better already. But relative links of "type 4" are still broken (except for "case B").
  • <BASE HREF='http://www.example.com/some/dir/file.php>: Exactly. Everything should be working with this one.
  • <BASE>指定:断开所有相关链接(因为它们将基于http://www.example.com/en/file现在)
  • <BASE HREF='http://www.example.com/some/dir>: 完全错误。dir将被视为指定 URL的文件部分,因此,所有相关链接都已断开。
  • <BASE HREF='http://www.example.com/some/dir/>: 已经好多了。但是“类型 4”的相关链接仍然断开(“案例 B”除外)。
  • <BASE HREF='http://www.example.com/some/dir/file.php>: 确切地。一切都应该与这个一起工作。

A last note

最后一点

Keep in mind this applies to allURLs in your document:

请记住,这适用于文档中的所有URL:

  • <A HREF=
  • <IMG SRC=
  • <SCRIPT SRC=
  • <A HREF=
  • <IMG SRC=
  • <SCRIPT SRC=

回答by Amr Mostafa

Drupal initially relied on the <base>tag, and later on took the decision to not use due to problems with HTTP crawlers & caches.

Drupal 最初依赖于<base>标签,后来由于 HTTP 爬虫和缓存问题而决定不使用。

I generally don't like to post links. But this one is really worth sharing as it could benefit those looking for the details of a real-world experience with the <base>tag:

我通常不喜欢发布链接。但这确实值得分享,因为它可以使那些寻找<base>标签真实体验细节的人受益:

http://drupal.org/node/13148

http://drupal.org/node/13148

回答by Erik

It makes pages easier for offline viewing; you can put the fully qualified URL in the base tag and then your remote resources will load properly.

它使页面更易于离线查看;您可以将完全限定的 URL 放在基本标记中,然后您的远程资源将正确加载。

回答by Ben S

It's probably not very popular because it's not well known. I wouldn't be afraid of using it since all major browsers support it.

它可能不是很受欢迎,因为它不是众所周知的。我不会害怕使用它,因为所有主要浏览器都支持它。

If your site uses AJAX you'll want to make sure all of your pages have it set correctly or you could end up with links that cannot be resolved.

如果您的站点使用 AJAX,您需要确保所有页面都正确设置,否则最终可能会出现无法解析的链接。

Just don't use the targetattribute in an HTML 4.01 Strict page.

只是不要target在 HTML 4.01 Strict 页面中使用该属性。

回答by Tristan

The hash "#" currently works for jump links in conjunction with the base element, but only in the latest versions of Google Chrome and Firefox, NOT IE9.

散列“#”目前适用于与基本元素结合的跳转链接,但仅适用于最新版本的 Google Chrome 和 Firefox,不适用于 IE9。

IE9 appears to cause the page to be reloaded, without jumping anywhere. If you are using jump links on the outside of an iframe, while directing the frame to load the jump links on a separate page within the frame, you will instead get a second copy of the jump link page loaded inside the frame.

IE9 似乎会导致页面重新加载,而不会跳转到任何地方。如果您在 iframe 的外部使用跳转链接,同时指示框架在框架内的单独页面上加载跳转链接,您将获得在框架内加载的跳转链接页面的第二个副本。

回答by Sebastian

In the case of SVG images inlined in the page there is another important issue that arises when the basetag is used:

在页面中内联 SVG 图像的情况下,base使用标签时会出现另一个重要问题:

Since with the basetag (as noted above already) you effectively loose the ability to use relative hash URLs like in

由于使用base标签(如上所述),您实际上失去了使用相对哈希 URL 的能力,例如

<a href="#foo">

<a href="#foo">

because they will be resolved against the base URL rather than the current document's location and thus are not relative anymore. So you will have to add the path of the current document to these kinds of links like in

因为它们将根据基本 URL 而不是当前文档的位置进行解析,因此不再是相对的。因此,您必须将当前文档的路径添加到这些类型的链接中,例如

<a href="/path/to/this/page/name.html#foo">

<a href="/path/to/this/page/name.html#foo">

So one of the seemingly positive aspects of the basetag (which is to move the long URL prefixes away from the anchor tag and get nicer, shorter anchors) completely backfires for local hash URLs.

因此,该base标签看似积极的方面之一(将长 URL 前缀从锚标签移开,并获得更好、更短的锚)对于本地哈希 URL 完全适得其反。

This is especially annoying when inlining SVG in your page, be it static SVG or dynamically generated SVG because in SVG there can be a lot of such referencesand they will all break as soon as a basetag is used, on most, but not all user agent implementations (Chrome at least still works in these scenarios at the time of writing).

这在您的页面中内联 SVG 时尤其烦人,无论是静态 SVG 还是动态生成的 SVG,因为在SVG 中可能有很多这样的引用,并且一旦使用base标签,它们就会全部中断,对大多数用户而言,但不是所有用户代理实现(在撰写本文时,Chrome 至少在这些场景中仍然有效)。

If you are using a templating system or another tool-chain that processes/generates your pages, I would always try to get rid of the basetag, because as I see it, it brings more problems to the table than it solves.

如果您正在使用模板系统或其他处理/生成页面的工具链,我总是会尝试摆脱base标签,因为在我看来,它带来的问题比解决的问题要多。

回答by Kirill Zotov

Also, you should remember that if you run your web server at non-standard port you need to include port number at base href too:

此外,您应该记住,如果您在非标准端口上运行 Web 服务器,则还需要在 base href 中包含端口号:

<base href="//localhost:1234" />  // from base url
<base href="../" />  // for one step above