url/href/src區別

1. URL

? 統一資源定位符 （ Uniform Resource Locator）是對可以從互聯網上得到的資源的位置和訪問方法的一種簡潔表示，是互聯網上標準資源的地址；互聯網上的每個檔案都有一個唯一的 URL ,它包含的資訊指出檔案的位置以及瀏覽器應該怎么處理它

結構

基本的 URL 包含模式（或稱協議）、服務器名稱（或 IP 地址）、路徑和檔案名；

如 “ 協議:// 授權 / 路徑 ? 查詢 ”

完整的、帶授權部分的普通統一資源識別符號語法看上去如下：

協議:// 用戶名: 密碼@子域名.域名.頂級域名: 埠號/目錄/檔案名.檔案后綴?引數 = 值#標志
1. 模式/協議（scheme）:它告訴瀏覽器如何處理將要打開的檔案
  
  最常用的模式是超文本傳輸協議（ Hypertext Transfer Protocol , HTTP ）
  
  其它協議：
  - https ————用安全套接字層傳送的超文本傳輸協議
  - ftp ———— 檔案傳輸協議
  - mailto ————電子郵件地址
  - ldap ————輕型目錄訪問協議搜索
  - file ————當地電腦或網上分享的檔案
  - gopher ———— Gopher 協議
  - telnet ———— Telnet 協議
2. 檔案所在的服務器的名稱或者 IP 地址，其有時還跟一個冒號和一個埠號，它也可以包含接觸服務器必須的用戶名稱和密碼；
  
  路徑部分包含等級結構的路徑定義，一般來說不同部分之間以斜杠( / ) 分隔；
  
  詢問部分一般用來傳送對服務器上的資料庫進行動態詢問時所需要的引數
分類
1. 絕地 URL
  
  絕對 URL （ absolute URL ） 顯示檔案的完整路徑，這意味著絕對 URL 本身所在的位置與被參考的實際檔案位置無關
2. 相對 URL
  
  相對 URL （ relative URL ） 以包含 URL 本身的檔案夾的位置為參考點，描述目標檔案夾的位置；
  
  如果目標檔案與當前頁面（即包含 URL 的頁面）在同一目錄，那么這個檔案的相對 URL 僅僅是檔案名和擴展名；
  
  如果目標檔案在當前目錄的子目錄中，那么它的相對 URL 是子目錄名 + / + 目標檔案的檔案名和擴展名；
  
  一般來說，對于同一服務器上的檔案，應該總是使用相對 URL ，它們更容易輸入，而且在將也頁面從本地系統轉到服務器上時更方便，只要每個檔案的相對位置保持不變，鏈接就仍然有效
附：建立路徑常用幾個特殊符號及其含義
```
 1. '.'
 # 代表當前所在目錄，相對路徑
 
 2. '..'
 # 代表上一層目錄，相對路徑 父目錄
 
 3. '../../'
 # 代表上一層目錄的上一層目錄，相對路徑  爺爺級
 
 4. '/'
 # 代表根目錄，絕對路徑
 
 5. 'C:/abc/'
 # 代表根目錄，絕對路徑
```

2. href

href （ Hypertext Reference ）超文本參考

指定超鏈接目標的 URL；href 屬性值可以是任何有效檔案的相對或絕對 URL ，包括片段識別符號和JavaScript 代碼段

用法分類

# 1. 內部連接
<a href = 'https://www.cnblogs.com/newcheer/archive/2021/01/12/#/url'>name</a>

# 2. 錨記
<a name = "object-name">name</a><a href="https://www.cnblogs.com/newcheer/archive/2021/01/12/#object-name">name</a>

# 3. 外部鏈接(建立一個以name為表象的網址鏈接)
<a href="https://www.cnblogs.com/newcheer/archive/2021/01/12/URL">name</a>  

# 4. 鏈接說明文字
<a href ="https://www.cnblogs.com/" title="鏈接說明">鏈接說明</a>

# 5. 特效鏈接（特效鏈接的目的不是跳轉到其他位置，而是為了實作基本頁面特效）
# 例如：JavaScript腳本
<a href = "javascript:alert('夜深了早點休息吧！')">點擊我！</a>
<a href ="javascript:;">回到頂部</a>

#6. 外部CSS參考
<link type ="text/css" rel="stylesheet" href="https://www.cnblogs.com/newcheer/archive/2021/01/css/test.css"/>
# 瀏覽器明白當前資源是一個樣式表，頁面決議不會暫停(由于瀏覽器需要樣式規則去渲染頁面，渲染程序中可能會被暫停) 
# 這與把css檔案內容寫在<style>標簽不同，因此建議用link標簽而不是@import來把樣式表匯入html檔案里

3. src

src （ source ） 源

僅嵌入當前資源到當前檔案元素定義的位置，當瀏覽器找到

<script src = "https://www.cnblogs.com/newcheer/archive/2021/01/12/script.js"></script>

在瀏覽器下載、編譯、執行這個檔案之前頁面的加載和處理會被暫停，這個程序與把 js 檔案放到<script>標簽類似，這也是建議把 js 檔案放到底部加載的原因；當然，img 標簽頁與此類似，瀏覽器暫停加載知道提取和加載影像

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/248022.html

標籤：其他

上一篇：在微信小程式開發中使用Typescript

下一篇：有哪些適合個人開發的微信小程式