HTML base标签：设置页面链接与资源路径

版权申诉

181 浏览量更新于2024-08-11 收藏 368KB DOCX 举报

"HTML中的base标签中文WORD版" 在HTML中，`base`标签是一个非常实用但不常用的功能，它提供了设置页面所有链接基础路径和默认目标窗口的能力。这个标签通常放在`<head>`标签内，并且应当是`<head>`内的第一个`<link>`或`<a>`标签，以确保其作用于整个文档。首先，`base`标签用于设定文档的基本URL，这在处理页面中多个相对路径时特别有用。当在`<base>`标签中设置`href`属性时，它将作为所有相对URL的基础，包括图片、脚本、样式表以及其他任何引用资源的路径。例如，如果`<base>`的`href`设置为"http://static.cnblogs.com/"，那么页面中的相对路径如"./images/logo_gray.gif"会被解析为"http://static.cnblogs.com/images/logo_gray.gif"。这样，无论页面本身位于哪个子目录，所有相对路径都会基于设定的基础URL，简化了资源路径的管理。其次，`base`标签还可以通过设置`target`属性来定义所有链接默认打开的方式。默认情况下，点击链接会在当前窗口或标签页中打开新的页面。但如果`<base>`标签的`target`属性设置为`_blank`，则页面中的所有链接（除非个别链接明确指定了其他`target`）都会在新窗口或新标签页中打开。例如： ```html <base target="_blank"/> <a href="http://www.cnblogs.com">这个页面会在新窗口打开</a> <a href="http://justany.cnblogs.com">这个页面也会在新窗口打开</a> ``` 在这个例子中，两个链接都将不在当前窗口打开，而是分别在新的窗口或标签页中打开。然而，需要注意的是，`base`标签在某些情况下可能存在兼容性问题。例如，动态插入`base`标签可能导致在Firefox和Internet Explorer中出现意料之外的行为。这是因为浏览器可能在`<head>`标签解析完成之前就开始处理页面中的链接。在上述提到的BUG场景下，动态写入`base`标签会导致页面内的相对路径解析错误： ```html <html> <head> <script> document.write('<base href="http://localhost/"/>'); </script> </head> <body> <img src="..."/> </body> </html> ``` 在这种情况下，由于`base`标签被动态插入，浏览器可能在解析到`<img>`标签时并未识别到`base`标签，导致图片加载失败。为了避免此类问题，最佳实践是在文档静态地包含`base`标签，或者在文档完全加载后再进行动态修改。总结来说，HTML的`base`标签是一个强大的工具，它可以统一页面中所有相对URL的基础路径，以及设定链接的默认打开方式。正确理解和使用`base`标签能简化页面开发，提高代码的可维护性和一致性，但也需要注意潜在的兼容性问题，尤其是在动态操作`base`标签时。

HTML 中的 base 标签

在 requireJS 中，有一个属性叫 baseURL，通过设置 baseURL，

我们可以将需要加载的文件路径写成相对于项目的，而不是相对于当

前页面的。

例如：假设我们的项目目录是/myproject/，里面有两个页面，一个是/myproject/

one.html，另一个是/myproject/html/other.html，他们都要加载/myproject/js/

some.js。如果我们将 baseURL 设置成/myproject/，则我们在加载该 js 的时候，这两个页

面都可以使用相对于项目的路径./js/some，而不是因为页面的路径不同而使用不同的相对路径。

但是如果不使用 requireJS，我们能不能实现类似于 baseURL 的功

能呢？



base 标签

其实，HTML 中有一个 base 标签，可以产生类似的功能。举个例子：

<html>

<head>

</head>

<body>

</body>

</html>

我们会发现，我们用相对路径./images/logo_gray.gif 加载的图片，

却变成了 http://static.cnblogs.com/images/logo_gray.gif 的图

片。

下载后可阅读完整内容，剩余3页未读，立即下载

悠闲饭团

粉丝: 193
资源: 3398

HTML base标签：设置页面链接与资源路径

js 导出table为excel/csv/png/txt/doc文件(支持中文)

freemarker生成doc方案.pdf（内附代码下载地址）

ZendFramework中文文档

fckconfig.js中文注释

FckEditor V2.6 fckconfig.js详细中文注释

Django的富文本框中tiny_mce需要的js文件

分词技术大公开：中文NLP的原理与实用操作手册

深度应用NLP技术：Python数据挖掘中的文本分析

情感分析深度解析：如何挖掘评论中的情绪宝藏

实践使用自然语言处理（NLP）中的深度学习模型

最新资源