一、url
1、絕對URL(absolute URL)
顯示文件的完整路徑,這意味着絕對URL本身所在的位置與被引用的實際文件的位置五關。
2、相對URL(relative URL)
以包含URL本身的文件夾的位置為參考點,描述目標文件夾的位置。
如果目標文件與當前頁面(也就是包含URL的頁面)在同一個目錄,那么這個文件的相對URL僅僅是文件名和擴展名,如果目標文件在當前目錄的子目錄中,那么它的相對URL是子目錄名,后面是斜杠,然后是目標文件的文件名和擴展名。
一般來說,對於同一服務器上的文件,應該總是使用相對URL,他們更容易輸入,而且在將頁面從本地系統轉移到服務器上時更加方便,只要每個文件的相對位置保持不變,鏈接幾句仍然是有效的。
3、舉例說明
-
“.”:代表目前所在的目錄,相對路徑。
-
“..”:代表上一層的目錄,相對路徑。
-
“../../”:代表的是上一層目錄的上一層目錄,相對路徑。
-
“/”:代表根目錄,絕對路徑。
-
“D:/aaa/”:代表根目錄,絕對路徑。
關於url的特性很清晰,用於資源定位,主要是文件定位,發生混淆的一般是href和src.
二、href
(Hypertext Reference)超文本引用,指向網絡資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的鏈接。
三、src
(Source)資源,引用資源替代當前元素,在img、script、iframe中使用。
表示從互聯網上得到的資源的位置和訪問方法,是互聯網上標准資源的地址。互聯網上每一個文件都有一個唯一的URL,它包含的信息指出文件的位置以及瀏覽器應該怎么處理它。
四、href與src區別
使用href:a、link
使用src:img、script
href和src有區別的,且不能相互替換的。一般來說,在可替換的元素上使用src,然而把href用於在涉及的文檔和外部資源之間建立一個關系。
href (Hypertext Reference)指定網絡資源的位置,從而在當前元素或者當前文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關系。瀏覽器明白當前資源是一個樣式表,頁面解析不會暫停(由於瀏覽器需要樣式規則去畫或者渲染頁面,渲染過程可能會被被暫停)。這與把css文件內容寫在<style>標簽里不相同,因此建議使用link標簽而不是@import來吧樣式表導入到html文檔里。
src (Source)屬性僅僅嵌入當前資源到當前文檔元素定義的位置。在瀏覽器下載,編譯,執行這個文件之前頁面的加載和處理會被暫停。這個過程與把js文件放到<script>標簽里類似。這也是建議把JS文件放到底部加載的原因。當然,img標簽頁與此類似。瀏覽器暫停加載直到提取和加載圖像。
差異一般表現在如下方面:
請求資源類型不同
(1)href 指向網絡資源所在位置,建立和當前元素(錨點)或當前文檔(鏈接)之間的聯系。
(2)在請求 src 資源時會將其指向的資源下載並應用到文檔中,比如 JavaScript 腳本,img 圖片;
作用結果不同
(1)href 用於在當前文檔和引用資源之間確立聯系;
(2)src 用於替換當前內容;
瀏覽器解析方式不同
(1)若在文檔中添加 ,瀏覽器會識別該文檔為 CSS 文件,就會並行下載資源並且不會停止對當前文檔的處理。這也是為什么建議使用 link 方式加載 CSS,而不是使用 @import 方式。
(2)當瀏覽器解析到 ,會暫停其他資源的下載和處理,直到將該資源加載、編譯、執行完畢,圖片和框架等也如此,類似於將所指向資源應用到當前內容。這也是為什么建議把 js 腳本放在底部而不是頭部的原因。
五、總結
src指向的內容會嵌入到文檔中當前標簽所在的位置。常用的有:img、script、iframe。
href是Hypertext Reference的縮寫,表示超文本引用。用來建立當前元素和文檔之間的鏈接。常用的有:link、a。
總結: src用於替換當前元素(比如:引入一張圖片);href用於在當前文檔和引用資源之間建立聯系。