url、href、src 詳解

發現自己居然沒把url、href、src關係及使用搞清楚,今天就理一下。主要包括:url、src、href定義以及使用區別。順便試下在segmentfault來一發。
URL(Uniform Resource Locator)
統一資源定位符是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔的表示,是互聯網上標準資源的地址。互聯網上的每個文件都有一個唯一的URL,它包含的信息指出文件的位置以及瀏覽器應該怎麼處理它。
結構
基本URL包含模式(或稱協議)、服務器名稱(或IP地址)、路徑和文件名,如“協議://授權/路徑?查詢”。完整的、帶有授權部分的普通統一資源標誌符語法看上去如下:協議://用戶名:密碼@子域名.域名.頂級域名:端口號/目錄/文件名.文件後綴?參數=值#標誌
第一部分:
模式/協議(scheme):它告訴瀏覽器如何處理將要打開的文件。最常用的模式是超文本傳輸協議(Hypertext Transfer Protocol,縮寫爲HTTP),這個協議可以用來訪問網絡。1其他協議如下:
http——超文本傳輸協議資源
https——用安全套接字層傳送的超文本傳輸協議
ftp——文件傳輸協議
mailto——電子郵件地址
ldap——輕型目錄訪問協議搜索
file——當地電腦或網上分享的文件
news——Usenet新聞組
gopher——Gopher協議
telnet——Telnet協議
第二部分:
文件所在的服務器的名稱或IP地址,後面是到達這個文件的路徑和文件本身的名稱。服務器的名稱或IP地址後面有時還跟一個冒號和一個端口號。它也可以包含接觸服務器必須的用戶名稱和密碼。路徑部分包含等級結構的路徑定義,一般來說不同部分之間以斜線(/)分隔。詢問部分一般用來傳送對服務器上的數據庫進行動態詢問時所需要的參數。
分類
1、絕對URL
絕對URL(absolute URL)顯示文件的完整路徑,這意味着絕對URL本身所在的位置與被引用的實際文件的位置無關。
2、相對URL
相對URL(relative URL)以包含URL本身的文件夾的位置爲參考點,描述目標文件夾的位置。如果目標文件與當前頁面(也就是包含URL的頁面)在同一個目錄,那麼這個文件的相對URL僅僅是文件名和擴展名,如果目標文件在當前目錄的子目錄中,那麼它的相對URL是子目錄名,後面是斜槓,然後是目標文件的文件名和擴展名。
如果要引用文件層次結構中更高層目錄中的文件,那麼使用兩個句點和一條斜槓。可以組合和重複使用兩個句點和一條斜槓,從而引用當前文件所在的硬盤上的任何文件,一般來說,對於同一服務器上的文件,應該總是使用相對URL,它們更容易輸入,而且在將頁面從本地系統轉移到服務器上時更方便,只要每個文件的相對位置保持不變,鏈接就仍然是有效地。
以下爲建立路徑所使用的幾個特殊符號,及其所代表的意義。
.:代表目前所在的目錄,相對路徑。 如:<a href="./abc">文本</a>或<img src="./abc" />
..:代表上一層目錄,相對路徑。 如:<a href="../abc">文本</a>或<img src="../abc" />
../../:代表的是上一層目錄的上一層目錄,相對路徑。 如:<img src="../../abc" />
/:代表根目錄,絕對路徑。 如:<a href="/abc">文本</a>或<img src="/abc" />
D:/abc/:代表根目錄,絕對路徑。
在使用相對路徑時,我們用符號“.”來表示當前目錄,用符號“..”來表示當前目錄的父目錄。
重點:href 和 src 的定義與區別
href和src是有區別的,而且是不能相互替換的。我們在可替換的元素上使用src,然而把href用於在涉及的文檔和外部資源之間建立一個關係。
href (Hypertext Reference)指定網絡資源的位置,從而在當前元素或者當前文檔和由當前屬性定義的需要的錨點或資源之間定義一個鏈接或者關係。當我們寫下:
<link href="style.css" rel="stylesheet" />
瀏覽器明白當前資源是一個樣式表,頁面解析不會暫停(由於瀏覽器需要樣式規則去畫或者渲染頁面,渲染過程可能會被被暫停)。這與把css文件內容寫在<style>標籤裏不相同,因此建議使用link標籤而不是@import來吧樣式表導入到html文檔裏。
src (Source)屬性僅僅 嵌入當前資源到當前文檔元素定義的位置。當瀏覽器找到
<script src="script.js"></script>
在瀏覽器下載,編譯,執行這個文件之前頁面的加載和處理會被暫停。這個過程與把js文件放到<script>標籤裏類似。這也是建議把JS文件放到底部加載的原因。當然,img標籤頁與此類似。瀏覽器暫停加載直到提取和加載圖像。
與img類似的有更多:replaced elements。
參考:
http://stackoverflow.com/questions/3395359/difference-between-src-and-...

http://reference.sitepoint.com/css/replacedelements

Google

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章