一尘不染

html <base>标签有哪些建议?

html

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

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

编辑
在使用基本标签几周之后,我确实发现使用基本标签会引起一些重大麻烦,这使它比最初出现的要难得多。从本质上讲,变化href=’#topic’和href=’‘基本标签下是非常有它们的默认行为不兼容,并可以从默认行为,这种变化很容易使第三方库的控制之外非常不可靠 因为它们在逻辑上将取决于默认行为,因此它们以意想不到的方式运行。所做的更改通常很细微,在处理大型代码库时会导致不那么明显的问题。此后,我创建了一个答案,详细说明了我在下面遇到的问题。因此,在您承诺广泛部署之前,请先亲自测试链接结果,这是我的新建议!


阅读 706

收藏
2020-05-13

共1个答案

一尘不染

在决定是否使用该<base>标签之前,您需要了解它的工作原理,它的用途以及所含的含义,最后胜过其优点/缺点。

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

您可以例如

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

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

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

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

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

如果您不关心W3验证程序,或者已经使用HTML5,则可以自行关闭它,每个Web浏览器都支持它:

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

关闭<base>标签也立即修复了疯狂 IE6的在WinXP SP3来请求<script>与相对URI资源src无限循环。

当您在<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来解决问题。

至于使用命名/哈希片段锚点()<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>

其中${uri}基本上转化为$_SERVER['REQUEST_URI']PHP,${pageContext.request.requestURI}JSP中,并#{request.requestURI}JSF。应该指出的是,像JSF这样的MVC框架具有标记,可以减少所有这些样板并消除对的需求<base>

2020-05-13