What is URL?

因為習慣用Notion作筆記，最近開始計畫將過去上課的筆記和一些自己整理的資料寫到Medium裡。

回到今天的主題，What is URL?

URL(Universal Resource Locator), it is used to identify a resource uniquely with the help of its location in a network of computers.

簡單來說，就是我們俗稱的網址，也就是這個網頁在網際網路上獨特的位置編碼，我們可以透過輸入url，向指定server發送request，server在收到request後，會回傳（respond）資料(HTML, CSS, Javascript)給我們，瀏覽器(browser)會利用這些資料建構出我們需要的網站。

URL由幾個部分構成:

• Scheme 傳輸協定
• Authority (Server位置，包含Domain Name 與Port)
• Path to file(檔案、子網頁路徑）
• Parameters（其他設定值，像是指定打開網頁後直接跳到某影片時間）
• Anchor（直接跳到網頁某頁段）

見此範例:

來源:What is a URL?

1. Scheme(Protocol) — 傳輸協定

The first part of the URL is the scheme, which indicates the protocol that the browser must use to request the resource (a protocol is a set method for exchanging or transferring data around a computer network).

傳輸協定，規範網際網路間如何交換、傳送資料(request & respond)，通常為http或https。

與Domain Name用 :// 分開。

2. Authority — 網頁名稱

包含了Domain Name 以及Port兩者：

a. Domain Name 網域名稱

The domain indicates which Web server is being requested. Usually this is a domain name, but an IP address may also be used (but this is rare as it is much less convenient)

Domain Name就是我要發送request的server的位置。

而除了使用Domain Name，也可以直接將其替換為IP位址(IP好比身分證字號，為一連串無意義的數字；而Domain Name則好比姓名，識別度較高）

Domain Name與Port之間以:隔開

b. Port

The port indicates the technical “gate” used to access the resources on the web server. It is usually omitted if the web server uses the standard ports of the HTTP protocol (80 for HTTP and 443 for HTTPS) to grant access to its resources. Otherwise it is mandatory.

可以理解爲「通關密語」，而此密語則是依據傳輸協定(protocal)而定義(80 for HTTP and 443 for HTTPS)，因此通常會省略（因為大家幾乎都一樣）。

3. Path to file — 指定檔案路徑

/path/to/myfile.html is the path to the resource on the Web server.

若要得到server api內不同資料，可以透過/go/get/certain/file.html的方式去拿到api內不同資料，/代表前往的意思。

與Parameters之間以?隔開

4. Parameters — 設定值

?key1=value1&key2=value2 are extra parameters provided to the Web server. Those parameters are a list of key/value pairs separated with the & symbol. The Web server can use those parameters to do extra stuff before returning the resource. Each Web server has its own rules regarding parameters, and the only reliable way to know if a specific Web server is handling parameters is by asking the Web server owner.

幾個重點：

• 透過設定key=value來產生特殊功能
• 每個網頁的parameter設定都不太一樣，要知道這些設定的內容，只有像該網站主人詢問才有辦法知道
• 設定與設定之間以&來隔開

這樣可能還是很難懂，直接舉 Youtube影片當例子 —

https://www.youtube.com/watch?v=WzedDxXnPCs&t=136s

仔細看可以發現「?v=WzedDxXnPCs&t=136s」就是youtube網站的parameters，而t=136s這個param可以讓使用者在打開這網頁時，直接跳到影片裡的這個時間。

5. Anchor

#SomewhereInTheDocument is an anchor to another part of the resource itself. An anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. On an HTML document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. It is worth noting that the part after the #, also known as the fragment identifier, is never sent to the server with the request.

終於來到最後一項，關於anchor的幾個重點

• 前綴為#，其實就是代表html內的id
• 因此，在html內的id設定後，在url內設定#id，則會跳到該頁段
• 因為只是跳到同一頁面某頁段，因此並不會向server發出新request

舉例說明，express官方的網站 —

http://expressjs.com/zh-tw/api.html#req.fresh

按下enter後，會跳到在html內id設定為req.fresh的頁段。

到這裡算是整理完url的資料了，終於完成我第一篇關於網頁的文章拉，太棒了！之後想要嘗試看看把在codewars的練習也寫成文章，不知道效果好不好。

參考資料:

1.What is a URL?