html的建议是什么<；基地>；标签？

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

事实上，我从来没有注意到它在现代生产网站（或任何网站）上的使用，这让我对它产生了怀疑，尽管它似乎有助于简化我网站上的链接

---

编辑

---

在使用base标签几个星期后，我确实发现使用base标签时有一些主要的缺陷，这使得它比最初出现的要差得多。基本上，对base标记下的

href='#topic'

和

href='

的更改与它们的默认行为非常不兼容，而这种对默认行为的更改很容易使您无法控制的第三方库以意想不到的方式变得非常不可靠，因为它们在逻辑上依赖于默认行为。在处理大型代码库时，这些更改通常是细微的，并且不会立即导致明显的问题。此后，我创建了一个答案，详细说明了我在下面遇到的问题。因此，我的新建议是，在广泛部署

之前，请自己测试链接结果

它可能不是很受欢迎，因为它不知名。我不会害怕使用它，因为所有主流浏览器都支持它

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

---

只是不要在HTML4.01严格页面中使用

target

属性。

我从来没有真正看到过使用它的意义。提供很少的优势，甚至可能使东西更难使用

除非您碰巧有数百或数千个链接，否则所有链接都指向同一子目录。那么它可能会为您节省几个字节的带宽

---

事后，我似乎还记得IE6中的标签存在一些问题。你可以把它们放在身体的任何地方，将网站的不同部分重定向到不同的位置。这在IE7中得到了修复，它打破了许多网站。

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

基本标记的效果分解： 基本标签似乎有一些非直观的效果，我建议在依赖

之前，注意结果并亲自测试它们！由于我是在尝试使用base标记来处理具有不同URL的本地站点之后发现它们的，并且只有在我沮丧地发现了问题的影响之后，我才觉得有必要为其他人创建这些潜在陷阱的摘要

在下面的例子中，我将使用一个基本标记：

，并假设代码所在的页面是

主修： 除非明确说明，否则没有链接、命名锚或空白HREF指向原始子目录： 基本标记以不同方式创建所有内容的链接，包括指向基本标记url的相同页面锚链接，例如：

• 
  变为
  

• 
  变为
  

通过一些工作，您可以通过显式指定这些链接链接到它们所在的页面来修复您可以控制的链接上的这些问题，但是当您向依赖于标准行为的组合中添加第三方库时，很容易造成一团混乱

小调： 需要条件注释的IE6修复程序：需要对IE6进行条件注释，以避免搞砸dom层次结构，即

，正如

BalusC在上面的回答中提到的那样

所以总的来说，主要的问题是，除非你对每个链接都有完全的编辑控制，否则使用起来会很棘手。正如我最初担心的那样，这会使使用变得非常麻烦。现在我必须去重写我对它的所有使用p

使用“碎片”/散列时测试问题的相关链接：




编辑：伊兹：对于所有和我一样对评论感到困惑的人：

我刚刚亲自进行了测试，结果如下：


尾部斜杠与否与此处给出的示例没有任何区别（
#anchor
和
？query
将简单地附加到指定的
）
但是相对链接会有所不同：省略尾随斜杠，
other.html
和
dir/other.html
将从
文档根开始，在给定的示例中，
/other子目录
被（正确地）视为文件，因此被省略


因此，对于相对链接，
BASE
可以很好地处理移动的页面，而锚定和
？查询
需要明确指定文件名（其中
BASE
有一个尾随斜杠，或者最后一个元素与所使用的文件名不对应）

可以将其视为替换文件本身的完整URL（而不是它所在的目录），这样您就可以正确地进行操作。假设本例中使用的文件是
其他子目录/test.html
（移动到新位置后），正确的规范应该是：


–等等，一切都按预期进行：
#anchor
，
？query
，
other.html
，
very/other.html
，
/完全/other.html
在决定是否使用
标记之前，您需要了解它是如何工作的，它可以用来做什么，其影响是什么，最终超过了优点/缺点


标记主要简化了在模板语言中创建相对链接的过程，因为您不需要担心
<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" />

<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" />

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

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

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

<li><a href="{$smarty.server.REQUEST_URI}#tab_1"></li>

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

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

...content...

<script>
var link='',pathname = window.location.href;
$('a').each(function(){
    link = $(this).attr('href');
    if(link[0]=="#"){
        $(this).attr('href', pathname + link);
    }
});
</script>

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

<a href=home>home</a> <a href=faq>faq</a> <a href=etc>etc</a>

..<a href=../p2/home>Portal2home</a> <a href=../p2/faq>p2faq</a> <a href=../p2/etc>p2etc</a>..

<base href=../p2/>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>

<a href=../p1/home>home</a> <a href=../p1/faq>faq</a> <a href=../p1/etc>etc</a>
<!--.. <../p1/> basepath is repeated -->

<base href=../p2>
<a href=home>Portal2-Home</a> <a href=faq>P2FAQ</a> <a href=contact>P2Contact</a>