url、href、src的區別
- url(uniform resource locator) 統一資源定位符
url是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示,是互聯網上標准資源的地址。互聯網上的每個文件都有一個唯一的URL,它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。
> 是互聯網上標准資源的地址,≈“地址”,不是屬性。
url語法規則:
scheme://host.domain:port/path/filename
- scheme - 定義因特網服務的類型,最常見的類型是 http
- host - 定義域主機(http的默認主機是www)
- domain - 定義因特網域名,比如 w3school.com.cn
- port - 定義主機上的端口號(http的默認端口號是80)
- path - 定義服務器上的路徑(如果省略,則文檔必須位於網站的根目錄中)
- filename - 定義文檔/資源的名稱
- href(hypertext reference) 超文本引用
href 指向網絡資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的聯系。href 屬性的值可以是任何有效文檔的相對或絕對URL,包括片段標識符和JavaScript代碼段。若在文檔中添加 ,瀏覽器會識別該文檔為 CSS 文件,就會並行下載資源並且不會停止對當前文檔的處理。
> href用來建立與網絡資源的聯系,讓當前標簽能夠鏈接到目標地址。
常見於:
//相對地址
<link rel="stylesheet" type="text/css" href="theme.css"/>
* href 規定被鏈接文檔的位置。
* rel 規定當前文檔與被鏈接文檔之間的關系。
//絕對地址
<a href="http://www.w3school.com.cn">W3School</a>
//錨
<a href="#" onclick="return false"></a>
* href 規定鏈接指向的頁面的 URL。
- src(source) 嵌入當前資源到當前文檔元素定義的位置
src指向外部資源的位置,在請求src 資源時會將其指向的資源下載並應用到當前文檔元素定義的位置(替換當前內容)。在瀏覽器下載,編譯,執行這個文件之前頁面的加載和處理會被暫停。
> src用來替換當前元素
常見於:
<script type="text/javascript" src="js/tools.js"></script>
* src 規定外部腳本文件的 URL。
<img src="/i/eg_tulip.jpg" alt="上海鮮花港 - 郁金香" />
* src 規定顯示圖像的 URL。
絕對路徑和相對路徑
這些路徑可以是本地路徑,也可以是網絡路徑。結合本地的絕對路徑和相對路徑理解網絡路徑。
相對路徑-以引用文件之網頁所在位置為參考基礎,而建立出的目錄路徑。因此,當保存於不同目錄的網頁引用同一個文件時,所使用的路徑將不相同,故稱之為相對。
絕對路徑-以Web站點根目錄為參考基礎的目錄路徑。之所以稱為絕對,意指當所有網頁引用同一個文件時,所使用的路徑都是一樣的。
絕對路徑
<a href="http://www.w3school.com.cn">W3School</a>
<a href="d:/www/html/1.htm">W3School</a>
相對路徑
<link rel="stylesheet" type="text/css" href="theme.css"/>
以下為建立路徑所使用的幾個特殊符號,及其所代表的意義。
“.”–代表目前所在的目錄。
“..”–代表上一層目錄。
“/”–代表根目錄。
<a href="index.html">鏈接index網頁</a>//鏈接同一目錄下的文件
<a href="../ccc.html">鏈接ccc網頁</a>//鏈接上一目錄的文件
<a href=”../../ccc.html”>鏈接ccc網頁</a>//鏈接上2層目錄的文件
<a href="adminwang/bbb.html">鏈接bbb網頁</a>
絕對路徑
<a href="/adminwang/bbb.html">鏈接bbb網頁</a>
相對路徑,最終也會轉換成絕對路徑。這個相對基於該文檔的當前路徑。
文檔的絕對路徑
http://www.w3school.com.cn/aaa/bbbb/index.html
上面路徑最后會被解析成
http://www.w3school.com.cn/aaa/bbbb/index.html
http://www.w3school.com.cn/aaa/ccc.html
http://www.w3school.com.cn/ccc.html
http://www.w3school.com.cn/bbb.html