html <base> 有哪些推荐?标签?

问题描述

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

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

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

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.

使用 base 标签几周后，我确实发现了一些使用 base 标签的主要 问题，使其比最初出现的更不受欢迎.本质上，对基本标记下的 href='#topic' 和 href='' 的更改与它们的默认行为非常不兼容，并且这种对默认行为的更改很容易以意想不到的方式使第三方库在您的控制之外非常不可靠，因为它们在逻辑上将依赖于默认行为.在处理大型代码库时，这些更改通常是微妙的，会导致并非立即显而易见的问题.从那以后，我创建了一个答案，详细说明了我在下面遇到的问题.因此，在您承诺广泛部署 之前，请自行测试链接结果，这是我的新建议！

After using the base tag for a few weeks, I did end up finding some major gotchas 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 very incompatible with their default behavior, and this change from the default behavior could easily make third party libraries outside of your control very unreliable in 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 标签似乎有一些不直观的效果，我建议在依赖 <base> 之前先了解结果并亲自测试它们！由于我在尝试使用 base 标记处理具有不同 url 的本地站点之后发现它们，并且在之后才发现有问题的效果，令我沮丧的是，我觉得有必要创建这些潜力的摘要他人的陷阱.

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 after trying 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 href="http://www.example.com/other-subdirectory/"> 作为我在以下情况下的示例，并假装代码所在的页面是 http://localsite.com/original-subdirectory

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

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

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

• 通过命名锚点链接到页面顶部
  成为
  <a href='http://www.example.com/other-subdirectory/#top-of-page' title='Some title'>A 链接到完全不同的 #named-anchor基本页面

成为
<a href='http://www.example.com/other-subdirectory/?update=1' title='Some title'>改为指向基本标签页面的链接</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.

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

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 BalusC mentions in his answer above.

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

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

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

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/基础/结果

由 Izzy 你们所有人都和我一样对评论感到困惑:

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

我自己刚刚测试过，结果如下:

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

• 尾部斜杠与否，与此处给出的示例没有区别(#anchor 和 ?query 将简单地附加到指定的 ;).
• 然而，相对链接有所不同:省略尾部斜杠，other.html 和 dir/other.html 将从 DOCUMENT_ROOT 开始code> 对于给定的示例，/other-subdirectory 被(正确)视为文件，因此被省略.

• trailing slash or not, makes no difference to the examples given here (#anchor and ?query would simply be appended to the specified <BASE>).
• It however makes a difference for relative links: omitting the trailing slash, other.html and dir/other.html would start at the DOCUMENT_ROOT with the given example, /other-subdirectory being (correctly) treated as file and thus omitted.

所以对于相对链接，BASE 可以很好地处理移动的页面——而锚点和 ?queries 需要明确指定文件名(使用 BASE 有一个尾部斜杠，或者最后一个元素与其使用的文件名不对应).

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

把它想象成替换文件本身的完整URL(而不是它所在的目录)，你就会把事情做好.假设本例中使用的文件是 other-subdirectory/test.html(在它移动到新位置之后)，正确的规范应该是:

Think of it as <BASE> replacing the full URL to the file itself (and not the 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 href="http://www.example.com/other-subdirectory/test.html">

– 瞧，一切都按预期工作:#anchor、?query、other.html、very/other.html, /completely/other.html.

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

这篇关于html <base> 有哪些推荐?标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！