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.codew3c.com/i/photo/">
</head>
<body>
<h1>base href 屬性</h1>
<img src="flower.png" width="60" height="60" alt="tullip">
</body>
</html>

親自試一試

例子解釋

此例將基準 URL 設置為 https://www.codew3c.com/i/photo/。其中 www.codew3c.com 是主機的域名，而 /i/photo/ 是服務器上包含照片文件的目錄。

在文檔的后面部分有一個引用圖片的 img 元素，它使用了 flower.png 這個相對 URL。瀏覽器加載圖片時，會把基準 URL 和相對 URL 拼接成完整的 URL：

https://www.codew3c.com/i/photo/flower.png

例子 2

為頁面上所有相對 URL 規定基準 URL：

<!DOCTYPE html>
<html>
<head>
  <base href="https://www.codew3c.com/html/">
</head>
<body>
<h1>base href 屬性</h1>
<a href="html_basic.asp">HTML 基礎</a>
</body>
</html>

親自試一試

例子解釋

此例將基準 URL 設置為 https://www.codew3c.com/html/。其中 www.codew3c.com 是主機的域名，而 /html/ 是服務器上包含照片文件的目錄。

在文檔的后面部分有一個用來生成鏈接的 a 元素，它使用了 html_basic.asp 這個相對 URL。用戶點擊這個超鏈接時，瀏覽器就會把基準 URL 和相對 URL 拼接成完整的 URL：

https://www.codew3c.com/html/html_basic.asp

提示

如果不用 base 元素，或不用其 href 屬性設置一個基準 URL，那么瀏覽器會將當前文檔的 URL 認定為所有相對 URL 的解析基準。

例如，假設瀏覽器從 https://www.codew3c.com/js/index.asp 這個 URL 載入一個文檔，該文檔中有一個超鏈接使用了 html_basic.asp 這個相對 URL，那么點擊這個超鏈接時瀏覽器將嘗試從 https://www.codew3c.com/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> 標簽