佛山建站:指定文档基本URL与HTML <基础>元素

2019.09.07 佛山建站

174

网站是由一系列链接,指向页面和源图像和样式表。 有两种方法 指定URL链接到这些资源 :要么使用绝对路径或相对路径。

绝对路径是指特定的目的地,通常这是开始的域名(连同HTTP) www.domain.com/destination/source.jpg。 相对路径是相反的:链接的目的地取决于根位置或在大多数情况下,你的网站的域名。

一个典型的相对路径下面看起来像这样:

1
<img src=“/资产/ img / image.png” alt="">

例如,如果你的网站域名是 hongkiat.com 图片路径的决心 hongkiat.com/assets/img/image.png 。 你应该明白这一点如果你发展网站一段时间。

但你可能没有听说过 <基础> 元素。 这个HTML标签HTML4以来已经存在,但很少是在野外见过它的实现。 W3C描述这个 元素 为:

“基本元素允许作者指定 文档基本URL 为了解决相对url,的名字 默认的浏览环境 以下超链接的目的。”

这 <基础> 元素基本上决定相对路径的基URL网页。 而不是取决于你的网站的根位置或域,您可以点到别的地方,也许像URL资源驻留在CDN(内容分发网络)。 让我们佛山建站看看实际上是如何运作的。

使用基本元素

的 <基础> 是定义在一边 < meta > 和 <链接> 内标签 <头> 。 鉴于下面的示例,我们将基本URL设置为谷歌。


1
<基地 href=“http://hongkiat.maxcdn.com/assets/”>

该规范将影响文档中的所有路径,包括内指定 href 属性和 src 的图像。 假设我们有一个样式表、图片和链接的文档集这样的相对路径,例如:

1
2
3.
<链接 rel=“样式表” href=“路径/ main.css”>
<一个 href=“路径/页面/期/”< / >锚点链接一个>
<img src=“路径/ image.jpg”>

即使在我们的web页面 demo.hongkiat.com 相对路径引用 hongkiat.maxcdn.com 后,在指定的基本路径<基础> 标签。 试着悬停链接,浏览器将显示您的路径正是前往。

佛山建站

所有相对路径最终将:

1
2
3.
<链接 rel=“样式表” href=“http://hongkiat.maxcdn.com/assets/path/main.css”>
<一个 href=“http://hongkiat.maxcdn.com/assets/path/page/sub-page/”< / >锚点链接一个>
<img src=“http://hongkiat.maxcdn.com/assets/path/image.jpg”>

设置默认的链接目标

除了定义基本URL <基础> 标签也可以通过设置默认链接目标 目标 属性。 说你想要的所有文档中的链接打开 在浏览器的新选项卡 ,设置 目标 与 平等自愿 ,就像这样。

1
<基地 href=“http://hongkiat.maxcdn.com/assets/” 目标=“平等”>

限制

的 <基础> 标签,然而,在某些情况下一些说明:

首先, <基础> 浏览器支持是伟大的; 它在IE6工作。 但是,IE6认为它需要一个结束标记 < /基础> 。 这可能导致一个层次问题的文档,如果关闭标签仍然模棱两可。 一个简单快速的解决这个问题的方法是通过添加 < /基础> 关闭评论, < ! ——(如果lte IE 6) > < /基础> < ! (endif) - - > 。

佛山建站如果您使用的是 # 会同 <基础> 链接到部分在文档中,您可能会遇到一个问题在Internet Explorer 9。 而不是跳引用部分,Internet Explorer 9将重新加载页面。

此外,一个空白 href 将导致基URL,而不是链接到页面所在当前目录(这是默认浏览器行为),这可能会导致意想不到的引用问题。

总结

的 <基础> 是一个方便的HTML特性,它可以简化web文档中的链接引用。 使用标记体谅地尽量减少缺陷。 按照以下参考下面更多 <基础> 标签:

  • 绝对和相对的url ——MSDN

  • HTML基本元素 ——W3C


最新案例

寒枫总监

来电咨询

400-6065-301

微信咨询

寒枫总监

TOP