HTML中base标签

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30109365/article/details/82182508

当每个字节都很重要时,您可以使用HTML < base>标记为页面上的所有相对URL 指定默认值href和target属性。像虚拟快捷方式。

对于具有平面目录结构的较小站点,这不会有太大帮助; 但对于具有深度嵌套目录的站点,< base>标记可能会从您的网页中减少很多额外的重量,并且还有助于保持URL更清洁和更短。

因此,如果您对性能进行微优化,< base>标签可以帮助您。

基本标签的好处

以下是使用< base>标记的一些好处:

  • 减少页面重量
  • 节省带宽
  • 更短的网址
  • 清洁标记
  • 在离线查看页面时提供帮助
  • 使迁移更容易(更改一个链接而不是多个链接)
  • 可以更轻松地重定向所有相对URL
即使有这些巨大的好处,也不是很多页面都利用了基本标签。这可能是因为标签被误解和/或不为人所知,或者可能是因为潜在的缺点。

基本标签的潜在缺点

在下一个项目中使用基本标记之前,请考虑以下可能的缺点:

  • 透明 URL 重写可能会导致问题
  • 可能会导致一些非常旧的浏览器出现问题

以下是基本标记和浏览器支持的测试和结果。因此,除非您需要支持最古老的浏览器,否则真正的浏览器支持不是问题。

这只留下一个你需要注意的真正问题; 如果您的网站使用任何类型的透明重写(提示:这与URL重定向不同),那么base除非您知道自己在做什么,否则最好避免使用标记。

示例:指定默认URL

这项技术实际上非常简单。让我们看一个使用< base>标记指定默认URL 的示例,该URL将应用于页面上的所有相对URL,包括所有src和href属性。这意味着基本标记适用于图像,超链接,iframe,表单,脚本,样式以及使用src或href引用URL的任何其他标记。

例如,假设您将所有图像嵌套在某处,例如:

http://example.com/here/is/my/deeply/nested/set/of/images/example.jpg

..我们知道可以写成相对路径:

/here/is/my/deeply/nested/set/of/images/example.jpg

这在尺寸方面要好一些,但它仍然会添加一些字节,特别是如果页面上包含多个图像。例如,对于整个图像库,使用每个图像的整个路径实际上将包含额外的重量。幸运的是,通过< base>标记指定默认URL,我们可以做得更好。为此,我们将以下代码添加到我们网页的head部分:

<head>
    <base href="http://example.com/here/is/my/deeply/nested/set/of/images/">
</head>

有了这个,我们可以排除所有图像文件的整个路径。所以不要为图片库这样做:

<img src="/here/is/my/deeply/nested/set/of/images/example-01.jpg" alt="">
<img src="/here/is/my/deeply/nested/set/of/images/example-01.jpg" alt="">
<img src="/here/is/my/deeply/nested/set/of/images/example-03.jpg" alt="">
.
.
.

..我们可以这样做:

<img src="example-01.jpg" alt="">
<img src="example-01.jpg" alt="">
<img src="example-03.jpg" alt="">
.
.
.

根据图像的数量(或您正在使用的任何文件),< base>标签可以真正帮助减少页面重量并保持标记清洁和易于管理。

示例:指定默认目标

该< base>标签也可用于指定默认target为任何支持的元件(例如,链接,表格,内置页框,等)属性。例如:

<head>
    <base target="_blank" href="http://example.com/your/default/path/">
</head>

有了这个,我们可以target在链接上排除属性。因此,不要为页面上的每个链接写这个:

<a target="_blank" href="somewhere.html">Example Link</a>

..我们可以这样做:

<a href="somewhere.html">Example Link</a>

这进一步降低了整体页面重量。当然,它不会带来巨大的节省,但在优化性能时每一点都有帮助。

从默认基值中排除URL

如果您想要包含位于与< base>标签指定的位置不同的位置的链接或图像,该怎么办?简单。Base仅适用于与基本URL相关的URL。例如,假设我们在页面上引用了以下URL:

http://example.com/something/somewhere/
/something/somewhere/
something/somewhere/

如果没有< base>标记,这些URL将按面值处理。现在让我们通过< base>以下方式添加默认URL :

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

有了这个,我们之前的示例URL更改为:

http://example.com/something/somewhere/
/something/somewhere/
http://example.com/default/directory/something/somewhere/

请注意基值是如何不应用于第一个和第二个URL的?它仅适用于第三个URL。因此,要从基本标记中排除任何URL,我们可以简单地使用绝对URL,或使用以正斜杠开头的URL /。这些URL都不会受基本标记的影响。一旦你了解它的工作原理,它就是一个非常优雅的解决方案。

浏览器支持

< base>所有主流浏览器都支持该标记,包括:

  • Chrome
  • 火狐 Firefox
  • 欧朋 Opera
  • 苹果浏览器 Safari
  • IE浏览器 Internet Explorer

其他

以下是有关< base>标记的一些有用说明:

  • 您必须使用片段标识符的绝对URL,例如 #foobar
  • 您必须对查询字符串URL使用绝对URL,例如 ?foo=bar
  • 始终在基本URL上包含尾部斜杠(所以它是一个目录,而不是一个文件)
  • 基本标记必须包含在该< head>部分中
  • 每个网页只能有一个基本标记
  • 基本标记必须指定href属性,target属性或两者
  • 将基本标记放在head部分中的任何其他标记之前,以便将其用于脚本URL,样式URL等

猜你喜欢

转载自blog.csdn.net/qq_30109365/article/details/82182508