对html <base>标签有什么建议?
我从来没有见过<base>
HTML标签实际上在任何地方使用过。 它的使用有缺陷意味着我应该避免它?
我从来没有注意到它在现代生产网站(或任何网站)上使用的事实让我感到不快,尽管它似乎可能有用于简化我网站上链接的有用应用程序。
编辑
在使用基本标签几周后,我最终发现了一些使用基本标签的重要陷阱,使它比首次出现时更不理想。 实质上,base标记下href='#topic'
和href=''
的更改与其默认行为非常不兼容,而且这种默认行为的更改很容易让您的控制之外的第三方库以非常不可靠的方式非常不可靠 ,因为它们在逻辑上取决于默认行为。 处理大型代码库时,这些更改通常很微妙,并且会导致不明显的问题。 我从那以后创建了一个答案,详细说明了我所经历的问题。 因此,在您承诺广泛部署<base>
之前,请自行测试链接结果,这是我的新建议!
在决定是否使用<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" />
请注意, <base href>
值以斜线结尾,否则将相对于最后一个路径进行解释。
至于浏览器兼容性,这只会导致IE中的问题。 <base>
标记在HTML中被指定为没有结束标记</base>
,因此仅使用<base>
而没有结束标记是合法的。 然而,IE6认为,并且<base>
标签之后的整个内容在这种情况下被放置为HTML DOM树中的<base>
元素的子元素。 这可能会导致第一眼看到Javascript / jQuery / CSS中的无法解释的问题,即元素在特定的选择器(如html>body
完全无法访问,直到您在HTML DOM检查器中发现中间应该有一个base
(和head
)为止。
一个常见的IE6修补程序正在使用IE条件注释来包含结束标记:
<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->
如果您不关心W3 Validator,或者您已经使用HTML5,那么您可以自行关闭它,每个webbrowser都支持它:
<base href="http://example.com/en/" />
关闭<base>
标记也立即修复了WinXP SP3上IE6的错误,在无限循环中用src
中的相对URI请求<script>
资源。
当您在<base>
标记中使用相对URI时,例如<base href="//example.com/somefolder/">
或<base href="/somefolder/">
将会显示另一个潜在的IE问题。 这将在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}
基本上转换为PHP中的$_SERVER['REQUEST_URI']
,JSP中的${pageContext.request.requestURI}
以及JSF中的#{request.requestURI}
。 值得注意的是,像JSF这样的MVC框架标签可以减少所有这些样板,并且不需要<base>
。 另请参阅ao用于链接/导航到其他JSF页面的URL。
基本标签效果的细分:
基本标签似乎有一些非直观效果,我建议您在依赖<base>
之前了解结果并自行测试它们! 由于我在尝试使用基本标记处理具有不同URL的本地网站后才发现它们,并且仅在发现后面的问题影响之后才发现它们,令我沮丧的是,我不得不为其他人创建这些潜在陷阱的摘要。
我将在下面的例子中使用基本标签: <base href="http://www.example.com/other-subdirectory/">
作为我的例子,并假装代码所在的页面是http://localsite.com/original-subdirectory
重大的:
没有链接或命名锚点或空白hrefs将指向原始子目录,除非明确指出:基本标记使所有链接以不同方式链接,包括与基本标记的url相同的页面链接,例如:
<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>
通过一些工作,您可以在您控制的链接上修复这些问题,方法是明确指定这些链接链接到它们所在的页面,但是当您将第三方库添加到依赖标准行为的组合中时,它很容易造成大混乱。
次要:
需要条件注释的IE6修订:需要ie6的条件注释以避免搞乱dom层级,即<base href="http://www.example.com/"><!--[if lte IE 6]></base><![endif]-->
因为BalusC
在上面的回答中提到了。
总的来说,主要问题使用起来很棘手,除非你对每一个链接都有完整的编辑控制权,正如我最初所担心的那样,这使得它比它的价值更麻烦。 现在我不得不重新写下它的所有用法! :p
在使用“片段”/散列时测试问题的相关链接:
http://www.w3.org/People/mimasa/test/base/
http://www.w3.org/People/mimasa/test/base/results
Izzy编辑:对于你们所有人,我都和我一样对这些评论产生了同样的困惑:
我刚刚测试了一下,结果如下:
#anchor
和?query
将简单地附加到指定的<BASE>
)。 other.html
和dir/other.html
将从DOCUMENT_ROOT
开始,具有给定示例[根据哪个浏览器?], /other-subdirectory
被(正确)视为文件并因此省略[根据哪个浏览器?]。 因此,对于相对链接, BASE
可以在移动的页面上正常工作 - 而锚点和?queries
需要明确指定文件名( BASE
具有尾部斜线,或者最后一个元素与其所用文件的名称不对应) 。
把它看作是<BASE>
把完整的URL替换成文件本身(而不是它驻留的目录),你就会得到正确的结果。 假设这个例子中使用的文件是other-subdirectory/test.html
(在它移动到新位置之后), 正确的规范应该是:
<base href="http://www.example.com/other-subdirectory/test.html
”>
- 等#anchor
,一切都按预期工作: #anchor
, ?query
, other.html
, very/other.html
, very/other.html
/completely/other.html
very/other.html
。
好吧,等一下。 我不认为基地标签值得这个坏名声。
基本标签的好处在于它使您能够以较少的麻烦执行复杂的URL重写。
这是一个例子。 您决定将http://example.com/product/category/thisproduct移至http://example.com/product/thisproduct。 您可以更改.htaccess文件以将第一个URL重写为第二个URL。
使用基本标签后,您可以进行.htaccess重写,就是这样。 没问题。 但是如果没有base标签,所有的相关链接都会中断。
URL重写通常是必要的,因为调整它们可以帮助您的网站的架构和搜索引擎可见性。 诚然,你需要解决人们提到的“#”和“'问题。 但基本标签值得在工具包中占有一席之地。
链接地址: http://www.djcxy.com/p/89131.html