RL 信息

JavaScript 提供了許多方法來檢索和更改顯示在瀏覽器地址欄中的當前 URL，所有這些方法都使用Location對象，它是對象的一個?屬性Window。

您可以創建一個具有當前URL的新對象，如下所示：

let loc = window.location;
let url = loc.href;

Location 屬性

Location 接口不繼承任何屬性，但是實現了那些來自 URLUtils 的屬性。

Location.href包含整個URL的一個DOMStringLocation.protocol包含URL對應協議的一個DOMString，最后有一個":"。

Location.host包含了域名的一個DOMString，可能在該串最后帶有一個":"并跟上URL的端口號。

Location.hostname包含URL域名的一個DOMString。

Location.port包含端口號的一個DOMString。

Location.pathname包含URL中路徑部分的一個DOMString，開頭有一個“/"。Location.search 包含URL參數的一個DOMString，開頭有一個“?”。

Location.hash包含塊標識符的DOMString，開頭有一個“#”。

Location.username包含URL中域名前的用戶名的一個DOMString。

Location.password包含URL域名前的密碼的一個 DOMString。

Location.origin只讀包含頁面來源的域名的標準形式DOMString。

方法

Location沒有繼承任何方法，但實現了來自URLUtils的方法。

Location.assign()加載給定URL的內容資源到這個Location對象所關聯的對象上。

Location.reload()重新加載來自當前 URL的資源。他有一個特殊的可選參數，類型為 Boolean，該參數為true時會導致該方法引發的刷新一定會從服務器上加載數據。如果是 false或沒有制定這個參數，瀏覽器可能從緩存當中加載頁面。

Location.replace()用給定的URL替換掉當前的資源。與 assign() 方法不同的是用 replace()替換的新頁面不會被保存在會話的歷史 History中，這意味著用戶將不能用后退按鈕轉到該頁面。

Location.toString()返回一個DOMString，包含整個URL。 它和讀取URLUtils.href的效果相同。但是用它是不能夠修改Location的值的。

般我們日常在上網的時候，會在瀏覽器的地址欄里輸入一個網站的 "網址"，點擊下回車，就會跳到你想去的網站，就類似這樣

但其實，叫做 "網址" 并不是特別的準確，確切地說，應該叫做 URL

到底啥是URL

那到底啥是 URL 呢？ 不就是一個網址嗎？

URL 是英文 Uniform Resource Locator 的縮寫，即統一資源定位器，是因特網上用于指定信息位置的表示方法，通過它就能找到網上的某個你要的資源

URL的組成

雖然我們平時使用瀏覽器的時候，只要輸入baidu.com或者qq.com就能正常上網了，但其實我們輸入的只是整個URL中的一小部分

來，我先看看一個相對完整的URL的整體結構是怎么樣的

這里大致分了幾個部分，我們一個個來看，它們具體是干什么的

協議

圖中http://這部分就是協議部分，即指定了URL是以什么協議發送網絡請求的

常見的協議如：http://、https://、ftp://、file://，比如: http://就是超文本傳輸協議，平時上網大多用這個協議，https://是以安全為目標的HTTP協議。

地址

圖中localhost就是地址部分，用來確定URL所要訪問的服務器的網絡地址（也就是網址）。在URL中，地址可以用三個形式來表示：域名、主機名、IP地址

域名

我們平時輸入的www.baidu.com、www.qq.com就是域名，域名也分一級域名、二級域名、以及頂級域名。

• 頂級域名：在域名的尾巴部分，.com這種就是頂級域名，頂級域名一般都代表網站屬于某種機構或組織。像.com(商業機構)、.org(非盈利組織)、
  .gov(政府機構)這類就是常見的頂級域名，除此之外，還有些代表國家的頂級域名，如：.cn（中國）、.us(美國)、.jp(日本)等等
• 一級域名：像qq.com就是一級域名，看上去十分簡潔，在頂級域名.com前只有一個單詞短語
• 二級域名：而mail.qq.com和v.qq.com這種前面加了mail.、v.等字符串的就叫二級域名

不過，域名也只是一串文字，計算機和路由器并不能直接認出它，還需要通過DNS服務器找到域名對應的IP地址，再通過底層的TCP/IP協議路由到對應的機器上去 （這些內容不是本文的重點暫時略過，先挖個坑再說）

主機名

主機名就是某臺計算機的名字，在一個局域網內，可以通過主機名找到你要訪問的計算機。主機名和域名一樣，計算機和路由器不認它，需要通過HOSTS文件這樣的技術找到主機名和IP地址的關聯關系，最后還是翻譯成IP地址再繼續發送網絡請求

圖中的localhost也是主機名，但是一種比較特殊的主機名，是給 回環地址的一個標準主機名，就是代表本機自己的地址。

IP地址

在URL中也可以直接用IP地址來代替域名或主機名，如192.168.0.1，關于IP地址的相關知識點放到以后再講（繼續挖坑）

端口號

圖中在冒號:后面的那串數字8080就是端口號，一臺服務器上可以開多個端口號，往往一個網絡服務程序就對應一個端口號

比如，我在機器 A 上，開了兩個服務程序，分別是 Tomcat和SSH，讓它們分別關聯端口8080和22，那URL中如果端口號是8080就是會訪問到Tomcat程序，22就會連接SSH服務。

但可能有小伙伴會有疑問：誒，我平時上百度看到的URL是http://www.baidu.com沒看到有端口號啊

其實是有的，端口號是80，只是它被隱藏起來了，我們看不到而已，而這個80端口也就是URL的默認端口號

但不是所有URL的默認端口號都是80，如果協議是http://，默認端口號為80，但若是https://協議，默認端口號就是443了

虛擬目錄

從第一個斜杠/開始，到最后一個斜杠/結束的那部分，也就是圖中/app/user/那部分即為虛擬目錄

它就類似我們電腦中文件目錄的格式，第一個/為根目錄，每多一個/就多進入一層目錄

文件名

從域名后開始算起的最后一個斜杠/開始，到?為止，沒有?則到#為止，或者?和#都沒有就是到整個URL結束為止的那部分就為文件名

說起來很繞吧，其實就是圖中 info.do 這部分，它一般包含文件名和擴展名('.'后面那部分)，用來指代一個URL所訪問的具體文件或資源，它可以是圖片、html文件、css文件，也可以是js文件、字體文件等等，它也可以不是某種文件，而是服務端后臺執行的某段程序。

甚至可以省略不寫虛擬目錄和文件名，因為它們本來就不是必須的，就如http://www.baidu.com這樣的URL就沒有文件名，但服務器會在缺省的情況下給你定位到某個特定的文件或程序上去。

查詢參數

從?后到#結束，即圖中的?uid=101&ty=2為查詢參數

查詢參數，也稱為URL參數、查詢字符串，英文名為 Query，它是用來向服務端以字符串的形式傳遞參數和少數數據用的

其參數形式一般都以多個鍵值對的形式進行表示，如 a=1、b=2就是兩個鍵值對，鍵為"a"和"b"，值為對應的"1"和"2", 多個鍵值對應&連起來：a=1&b=2

URL編碼

但參數要傳遞的某些值往往帶有特殊字符，這些字符和URL標準的格式沖突，比如要傳a&b這樣字符串，和查詢參數鍵值對的連接符&沖突了，若不加以區分就會產生歧義

而最簡單的辦法，就是對參數值進行編碼，稱為 URL Encoding，通過編碼，a&b變成了a%26b，就不再包含會沖突的特殊字符

而有些參數即便有特殊字符，也不會被編碼，除非自行強制編碼，比如URL中參數值是另外一串URL，就可以寫成 http://localhost/do?url=http://www.baidu.com
這種特殊情況不會有歧義，因為計算機系統認得出參數是另一串URL，就會按URL的形式來解析，但當子URL又包含子參數和多子鍵值對的時候也難免會分不清參數到底是兒子的還是父親的，這時還是強制編碼的好

列表參數

URL的參數是一個個鍵值對，即一個key對應一個value，那如果是一個key要傳遞多個值，也就是一個列表咋辦？也好辦

URL的參數名是可以重復的，比如a=1&a=2&a=3,這里穿了3個參數名都為a的查詢參數，是完全可以的，可以利用這種特性，按順序將 1、2、3作為參數a的列表值

為了表示更清楚點，一般都會在列表參數名后面加上一對方括號[]，如：a[]=1&a[]=2&a[]=3

但是，對于URL參數的寫法和格式的標準，也沒有特別嚴格的規定，以上幾種形式一般都會支持

錨

圖中#后面那部分字符串，#abc就是錨部分

錨，英文稱做Reference，通常也是用來傳遞參數等信息，但與查詢參數的本質區別就是這部分內容不會被傳遞到服務器端

錨一般用于頁面，比如在瀏覽網頁的時候，按個按鈕突然幫你定位到頁首或頁面中的某個位子去了，這就是錨

現在隨著前后端分離技術，尤其是 vue、reactjs 等前端框架的興起，錨作為前端javascript程序處理的參數載體也越來越重要了

結語

URL看似已經習以為常、非常簡單的東西，背后往往也隱藏著很多技術細節和知識點，甚至這短短一篇文章也沒辦法窮盡

其實URL的內容還有不少，比如<用戶名>@<密碼>這種用戶驗證信息在URL中的傳遞，由于篇幅的關系還沒有講到

所以我講分幾篇文章來講解HTTP協議的其中幾個重要部分，如果這一系列文章對你有幫助，別忘了關注哦~

何打開HTML文件？一文教你多種方法！HTML文件是網頁開發的基礎，它可以包含文本、圖像、音頻、視頻等多種多媒體元素。那么，我們該如何打開這樣的文件呢？下面來介紹幾種常見的方法。第一種方法是使用瀏覽器打開。這是最常見的方式，只需要幾個簡單的步驟就能完成。首先，我們可以使用Chrome瀏覽器。打開Chrome瀏覽器，然后在地址欄中輸入HTML文件的URL，或者直接將HTML文件拖拽到瀏覽器窗口中，HTML文件就會在瀏覽器中打開了。同樣的，使用Firefox瀏覽器和Safari瀏覽器也是類似的操作，只需要在地址欄中輸入URL或者拖拽HTML文件到瀏覽器窗口中即可。第二種方法是使用編輯器打開。如果你習慣使用Sublime Text或者Atom這樣的編輯器，也可以通過它們來打開HTML文件。

只需要在菜單欄中選擇“文件”->“打開”，然后在彈出的文件瀏覽器窗口中找到你的HTML文件，點擊打開即可。第三種方法是使用命令行工具打開。如果你熟悉命令行操作，可以使用命令行工具來打開HTML文件。在Windows系統中，打開命令提示符，使用cd命令切換到HTML文件所在的目錄，然后在命令提示符中輸入"type filename.html"（其中filename.html是你的HTML文件名），HTML文件的內容將會在命令提示符中顯示。在macOS系統中，打開終端，使用cd命令切換到HTML文件所在的目錄，然后在終端中輸入"cat filename.html"（其中filename.html是你的HTML文件名），HTML文件的內容將會在終端中顯示。通過以上幾種方式，你可以輕松地打開HTML文件。

無論是使用瀏覽器、編輯器還是命令行工具，都能夠幫助你查看和編輯HTML文件，更好地進行網頁開發工作。參考資料：- [How to Open HTML Files](https://www.wikihow.com/Open-HTML-Files)- [How to Open HTML Files](https://www.techwalla.com/articles/how-to-open-html-files)