重新認識HTML系列003——base標籤詳解
HTML-base標籤詳解
屬性說明
href
文件中說此屬性是“用於文件中相對URL地址的基礎URL”，不好理解，我們來做幾個實驗。
實驗一
base-href-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base-href實驗1：不設定base標籤</title>
</head>
<body>
<a href=""> 效果如下：
現在我們來依次點選這三個連結，結果如下：
第一個連結點選後當前頁面重新整理，相當於跳轉到了當前頁面自身
第二個連結點選後 在當前標籤頁
打開了我們所設定的絕對路徑指向的頁面（百度）第三個連結點選後在當前標籤頁 打開了該頁面同目錄下的test頁面，如圖：
好，請記下這幾個結果，我們進行第二個試驗：
實驗二
base-href-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base-href實驗1：不設定base標籤</title>
<base href="/">
</head>
<body 這次我們在上一個頁面的基礎上，在<head> 標籤內增加了<base>標籤，併為其href 屬性賦值為根路徑符號/ ,現在再點選一下頁面上的三個連結，結果如下：
- 第一個連結，點選後跳轉到了伺服器根目錄 下
- 第二個連結，點選後依然在當前標籤頁跳轉到了我們指定的絕對路徑指向的頁面，即百度首頁。
- 第三個連結，點選後瀏覽器在當前標籤頁跳轉到了根目錄 下的test頁面
好的，這下我們明白了，也就是說，<base> 標籤的href屬性，實際上就是為頁面中所有的元素的href屬性設定了基礎值（對元素href為絕對路徑的元素不起作用）,當這些元素進行跳轉時，都會基於當前目錄加上這個預設的URL（相對路徑的情況下）再加上自己的href屬性值來跳轉。
為了驗證我們的想法，我們再做第三個實驗和第四個實驗：
實驗三
base-href-3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base-href實驗1：不設定base標籤</title>
<base href="localhost/test">
</head>
<body>
<a href="">這是一個href屬性為空的連結</a>
<br>
<a href="http://www.baidu.com">這是一個href屬性設為絕對路徑(http://www.baidu.com)的連結</a>
<br>
<a href="test.html">這是一個href屬性設定為相對路徑（test.html）的連結</a>
</body>
</html>這次，我們將<base>標籤的href屬性設定為了一個相對路徑，再點選下面三個連結，結果如下：
- 第一個連結，點選後跳轉到了當前目錄下的
localhost/test, - 第二個連結，點選後依然跳轉到了絕對路徑指向的頁面（百度）
- 第三個連結，點選後跳轉到了當前目錄下的localhost目錄下的test.html頁面
也許你會好奇，為什麼第三個連結不是跳轉到localhost目錄下的test目錄下的test.html呢？
細心如你，肯定會發現，我們在設定<base>標籤的href屬性時，設定的是相對路徑，而這個相對路徑最後沒有使用代表目錄的符號反斜槓/, 所以這裡瀏覽器沒有將localhost/test中的test識別為目錄，而是識別為一個檔案了，所以它就會預設去尋找該檔案同目錄下的test.html檔案去了。
不信，你可以把base標籤的href 屬性設定為localhost/abc.html，那麼第一個連結將跳轉到當前目錄下的localhost目錄下的abc.html頁面, 而第三個連結將跳轉到當前目錄下的localhost目錄下的test.html下。
好了，我們繼續第四個試驗：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base-href實驗4：base標籤href屬性為絕對路徑</title>
<base href="http://localhost/test/">
</head>
<body>
<a href="">這是一個href屬性為空的連結</a>
<br>
<a href="http://www.baidu.com">這是一個href屬性設為絕對路徑(http://www.baidu.com)的連結</a>
<br>
<a href="test.html">這是一個href屬性設定為相對路徑（test.html）的連結</a>
</body>
</html> 這次我們為<base>標籤的href屬性設定了一個絕對路徑，再看點選連結的結果：
- 第一個連結，跳轉到了我們所設定的
<base>標籤的href屬性的絕對路徑所指向的地址（http://localhost/test/）； - 第二個連結，依然是在當前頁跳轉到了其所設定的絕對路徑所指向的頁面（百度）
實驗三與實驗四證明了我們再實驗二中所作的總結。現在，對於<base>標籤的href屬性，應該有了一個感性的認識的，對於在什麼場景下使用它，也一定是心中有數了吧，哈哈！
target
根據文件，此屬性其實就是規定了頁面中新開啟視窗的方式的預設值。
我們繼續做實驗
實驗五
base-target-1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base-target實驗1：為頁面增加子視窗（框架）</title>
<base href="http://localhost/test/">
</head>
<body>
<a href="">這是一個href屬性為空的連結</a>
<br>
<a href="http://www.baidu.com">這是一個href屬性設為絕對路徑(http://www.baidu.com)的連結</a>
<br>
<a href="test.html">這是一個href屬性設定為相對路徑（test.html）的連結</a>
<br>
<iframe src="./frame.html" width="600" height="400"></iframe>
</body>
</html>為了驗證target屬性，我們再實驗四的頁面基礎上，又在頁面中增加了一個子視窗（框架）iframe，此框架中顯示與當前頁面同級目錄下的frame.html 頁面，
frame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架頁面</title>
</head>
<body>
<h3>這是一個框架內的頁面</h3>
<a href="">這是一個框架內的連結</a>
</body>
</html>此時，有意思的事情發生了：
奇怪，為什麼呢，我們進入控制檯看看：
當我們把滑鼠放置到iframe標籤上時，此時控制檯顯示其絕對路徑為http://localhost/test/frame.html
原來，iframe標籤的src與a標籤的href屬性一樣，受<base>標籤的href屬性影響，所以定址錯誤了。
我們修改後繼續：
base-target-2.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>base-target實驗1：base標籤target屬性為''-修正iframe的src</title>
<base href="http://localhost/test/" target="">
</head>
<body>
<a href="">這是一個href屬性為空的連結</a>
<br>
<a href="http://www.baidu.com">這是一個href屬性設為絕對路徑(http://www.baidu.com)的連結</a>
<br>
<a href="test.html">這是一個href屬性設定為相對路徑（test.html）的連結</a>
<br>
<iframe src="http://localhost:63342/html5css3/high-html/base/frame.html" width="600" height="400"></iframe>
</body>
</html>
此時，頁面正常如下：
現在，當前頁面的<base>標籤的target屬性值為空，我們來看看點選頁面中的三個連結和框架內的一個連結時的結果：
- 點選第一個連結，在 當前頁面 跳轉到了
http://localhost/test/這個我們在<base>標籤的href屬性中指定的地址； - 點選第二個連結，在 當前頁面 跳轉到了我們在該元素
href屬性所設定的絕對路徑所指向的頁面（百度首頁） - 點選第三個連結，在 當前頁面 跳轉到了
http://localhost/test/test.html這個地址。 - 點選框架內的連結，框架內頁面進行了重新整理。
這時，我們發現：實際上，我們在父頁面設定的<base>標籤的href屬性並不會影響到框架內的頁面，因為如果影響到的話，應該會和第一個連結一樣，跳轉到http://localhost/test/這個地址去，可實驗結果表明並沒有。
接下來，我們把當前頁面的<base>標籤的target屬性的值由空改為_self，然後點選頁面內的所有連結，發現與為空時的結果相同。
現在，由於target屬性的值（_parent,_top）涉及到子視窗、父視窗、頂級視窗這些概念，我們要改造一下我們的框架頁面frame.html:
frame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>框架頁面</title>
<base href="http://localhost/frametest/" target="_self">
</head>
<body>
<h3>這是一個框架內的頁面</h3>
<a href="">這是一個框架內的連結</a>
<br>
<iframe src="http://localhost:63342/html5css3/high-html/base/subiframe.html" width="500" height="200"></iframe>
</body>
</html>我們做了三件事：
- 為框架頁面添加了
<base>標籤，併為其target賦值為_self（由上面的實驗可知，當值為self與值為空時，其實是等同的。） - 為其
<base>標籤的href屬性設定了值http://localhost/frametest/ - 在該框架頁內又嵌套了一個框架頁，指向同目錄下的
subiframe.html頁面（src地址的設定原因同實驗五的第一個說明）,並且同樣為它設定了<base>標籤。
subframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>子框架的子框架</title>
<base href="http://localhost/subframetest/" target="_self">
</head>
<body>
<h3>這是子框架的子框架</h3>
<a href="">這是子框架的子框架裡的連結</a>
</body>
</html>現在，然我們看看效果：
現在，我們接著進行實驗：
實驗六
我們知道，<base>標籤的target屬性隻影響當前頁面內連結的開啟方式 ，所以接下來我們先實驗當前頁面裡的連結開啟方式。
我們將當前頁面的<base>標籤的target屬性改為_blank，再點選當前頁面的三個連結，發現連結都在新的標籤頁打開了。
然後當我們將當前頁面的<base>的target屬性分別改為_parent和_top 時，發現所有連結還是在當前頁面開啟。其原因是，當前頁面本身不是任何頁面的子孫頁面（視窗），所以它自己的父級和頂級視窗就是它自己。
為了驗證以上說法，我們接著進行實驗：
現在，我們將frame.html與subframe裡的<base>的target屬性的值設定的是_self，根據前面的實驗我們知道，其等同於設定為空或不設定。
現在分別點選子框架（frame.html）與孫子框架（subframe.html）裡的連結，發現都是在其所在的框架視窗內跳轉：
點選子框架裡的連結結果：
點選孫子框架內的連結結果：
注：由於子框架與孫子框架內base標籤的href屬性所設定的路徑，伺服器上並不存在，所以均顯示的是拒絕請求的提示
實驗七
現在，我們將frame.html與subframe裡的<base>的target屬性的值都設定為_parent，然後分別點選這兩個框架頁面內的連結，結果如下：
- 點選子框架內的連結時，連結在它的父視窗內（也就是當前頁面）開啟
- 點選孫子框架內的連結時，連結在它的父視窗內（也就是子框架）開啟
然後，我們將frame.html與subframe裡的<base>的target屬性的值都設定為_top，然後分別點選這兩個框架頁面內的連結，結果如下：
- 點選子框架內的連結時，連結在它的頂級視窗內（也就是當前頁面）開啟
- 點選孫子框架內的連結時，連結在它的頂級視窗內（也就是當前頁面）開啟
最後，我們將frame.html與subframe裡的<base>的target屬性的值都設定為`_blank，然後分別點選這兩個框架頁面內的連結，結果如下：
- 點選子框架內的連結時，連結在新標籤頁內開啟
- 點選孫子框架內的連結時，連結在新標籤頁內開啟
至此，我們關於HTML的 標籤的實驗和講解就全部做完了，對其基本特性和使用場景也有了一個清晰的認識，本節完。
PS:此屬性所有版本瀏覽器均支援