HTML <base> href 属性

HTML <base> 标签

定义和用法

href 属性规定页面上所有相对 URL 的基准 URL。

说明

base 元素可用来设置一个基准的 URL，让 HTML 文档中的相对链接在此基础上进行解析。

相对链接省略了 URL 中的协议、主机和端口部分，需要根据别的 URL（要么是 base 中指定的 URL，要么是当前文档的 URL）得出其完整形式。

href 属性指定了解析文档此后部分中的相对 URL 要用到的基准 URL。

实例

例子 1

为页面上所有相对 URL 规定基准 URL：

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.w3school.com.cn/i/photo/">
</head>
<body>

<h1>base href 属性</h1>

<img src="flower.png" width="60" height="60" alt="tullip">

</body>
</html>

亲自试一试

例子解释

此例将基准 URL 设置为 https://www.w3school.com.cn/i/photo/。其中 www.w3school.com.cn 是主机的域名，而 /i/photo/ 是服务器上包含照片文件的目录。

在文档的后面部分有一个引用图片的 img 元素，它使用了 flower.png 这个相对 URL。浏览器加载图片时，会把基准 URL 和相对 URL 拼接成完整的 URL：

https://www.w3school.com.cn/i/photo/flower.png

例子 2

为页面上所有相对 URL 规定基准 URL：

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.w3school.com.cn/html/">
</head>
<body>

<h1>base href 属性</h1>

<a href="html_basic.asp">HTML 基础</a>

</body>
</html>

亲自试一试

例子解释

此例将基准 URL 设置为 https://www.w3school.com.cn/html/。其中 www.w3school.com.cn 是主机的域名，而 /html/ 是服务器上包含照片文件的目录。

在文档的后面部分有一个用来生成链接的 a 元素，它使用了 html_basic.asp 这个相对 URL。用户点击这个超链接时，浏览器就会把基准 URL 和相对 URL 拼接成完整的 URL：

https://www.w3school.com.cn/html/html_basic.asp

提示

如果不用 base 元素，或不用其 href 属性设置一个基准 URL，那么浏览器会将当前文档的 URL 认定为所有相对 URL 的解析基准。

例如，假设浏览器从 https://www.w3school.com.cn/js/index.asp 这个 URL 载入一个文档，该文档中有一个超链接使用了 html_basic.asp 这个相对 URL，那么点击这个超链接时浏览器将尝试从 https://www.w3school.com.cn/js/html_basic.asp 这个绝对 URL 加载第二个文档。

语法

<base href="URL">

属性值

值 描述
URL 充当基准 URL 的绝对 URL（比如“http://www.example.com/”）。

浏览器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持

HTML <base> 标签