HTML <base> 标签是一个不太常用的标签，它可以为整个 HTML 文档指定一个默认 URL，用于解析相对 URL。那么，当我们在页面中使用 JavaScript 或 CSS 时，<base> 标签是否也会被遵循呢？本文将给出具体答案，并提供一些深度学习和指导意义。
<base> 标签的作用
在介绍如何在脚本和 CSS 中使用 <base> 标签前，先来了解一下它的作用。<base> 标签通常放置在 HTML 文档的头部，例如：
--------- -----
------
------
----- ----------------
-----------------------
----- --------------------------------
-------
------
---- ---- ---
-------
-------其中，href 属性指定了默认 URL，该 URL 将作为相对 URL 的基础进行解析。如果我们在页面中使用了相对路径的链接或资源引用，浏览器会根据 <base> 标签指定的 URL 加上相对路径，得到最终的完整 URL 地址。例如：
-- ----------------------- ------
在这种情况下，如果没有 <base> 标签，浏览器将相对于当前页面的 URL 地址进行解析，而在有了 <base> 标签后，浏览器将相对于指定的默认 URL 进行解析，即 https://www.example.com/about.html。
在脚本中使用 <base> 标签
在 JavaScript 中，我们可以通过访问 document.baseURI 属性来获取 <base> 标签指定的默认 URL。例如：
--------- -----
------
------
----- ----------------
-----------------------
----- --------------------------------
--------
--- ------- - -----------------
--------------------- -- -- ------------------------
---------
-------
------
---- ---- ---
-------
-------在这个例子中，我们使用了 <script> 标签嵌入了一段 JavaScript 代码，并在其中访问了 document.baseURI 属性。该属性返回当前文档的基础 URL，即 <base> 标签指定的默认 URL。
在 CSS 中使用 <base> 标签
在 CSS 中，我们可以使用相对路径引用外部资源，例如：
---- -
----------------- ---------------------------
-在这种情况下，浏览器将相对于 CSS 文件所在的位置进行解析。如果我们希望相对于 <base> 标签指定的默认 URL 进行解析，可以使用 url() 函数，并将相对路径作为参数传入。例如：
--------- -----
------
------
----- ----------------
-----------------------
----- --------------------------------
-------
---- -
----------------- ----------------------------------
-
--------
-------
------
---- ---- ---
-------
-------在这个例子中，我们使用了 url() 函数，并将相对路径 "images/background.jpg" 作为参数传入。由于该函数是在 CSS 中使用的，浏览器将自动相对于 <base> 标签指定的默认 URL 进行解析。
总结
在 JavaScript 和 CSS 中，<base> 标签都会被遵循，用于解析相对路径。通过访问 document.baseURI 属性或使用 url() 函数，我们可以在脚本和 CSS 中使用 <base> 标签指定的默认 URL。
因此，在开发 Web
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/27782