跳至正文

了解URL結構 🔗

您每天使用網際網路時都會看到URL，但可能不太了解每個部分的含義。理解URL的結構會讓Web開發變得容易得多！讓我們一步步來了解。

用日常生活比喻URL？​

讓我們把URL比作郵政地址。

郵政地址的故事 📬​

台灣 台北市 信義區 信義路123號 ABC大樓 5樓 501室
 ↓    ↓      ↓       ↓           ↓      ↓    ↓
國家  城市   區      街道       建築物   樓層  房間號

URL也類似：

https://www.example.com:443/products/shoes?color=red&size=10#reviews
  ↓        ↓              ↓       ↓          ↓                ↓
協定     域名            埠號    路徑      查詢字串        雜湊

URL的定義​

URL (Uniform Resource Locator)

  • 表示網際網路上資源（頁面、圖像、檔案等）位置的地址
  • 也稱為"Web地址"或"連結"

一眼看懂URL完整結構​

https://user:pass@www.example.com:443/products/shoes?color=red&size=10#reviews
└──┬─┘ └────┬────┘└───────┬───────┘└┬┘└──────┬──────┘└────────┬────────┘└──┬──┘
協定      認證資訊      域名      埠號    路徑      查詢字串    雜湊/片段

讓我們逐一詳細了解！

1. 協定 (Protocol) 🔐​

連接網站的方法

https://example.com
└──┬─┘
協定

主要協定​

HTTP (HyperText Transfer Protocol)​

http://example.com
  • 普通網站連接方法
  • 無安全性 ⚠️
  • 資料未加密
  • 現在幾乎不使用

HTTPS (HTTP Secure)​

https://example.com
  • 安全的網站連接方法 🔒
  • 資料已加密
  • 現代網站標準
  • 顯示鎖圖示 🔒

其他協定​

ftp://example.com      # 檔案傳輸
mailto:user@email.com  # 發送電子郵件
file:///C:/folder      # 本機檔案
提示

始終使用HTTPS！ 特別是在登入、支付、輸入個人資訊時，一定要確認是HTTPS。

2. 域名 (Domain) 🌐​

網站的名稱

https://www.example.com
       └──────┬──────┘
           域名

域名結構​

www.example.com
└┬┘ └──┬──┘└┬┘
子域   名稱  TLD
名        (頂級域名)

頂級域名 (TLD - Top Level Domain)​

.com  →  商業（最常見）
.net  →  網路
.org  →  組織/非營利
.edu  →  教育機構
.gov  →  政府
.io   →  IT/新創公司（流行）
.tw   →  台灣

子域名 (Subdomain)​

www.example.com      →  網站
blog.example.com     →  部落格
api.example.com      →  API伺服器
admin.example.com    →  管理頁面

實際示例​

https://blog.example.tw
         └┬┘ └──┬──┘└┬┘
        子域  主域名  TLD
        名

3. 埠號 (Port) 🚪​

從伺服器的哪個門進入

https://example.com:443
                   └┬┘
                   埠號

預設埠號​

通常省略（自動添加）：

http://example.com       →  http://example.com:80 (自動)
https://example.com      →  https://example.com:443 (自動)

常見埠號​

埠號用途
80HTTP (Web)
443HTTPS (安全Web)
21FTP (檔案傳輸)
22SSH (遠端連接)
3000開發伺服器 (Node.js)
3306MySQL資料庫
5432PostgreSQL
8080備用HTTP

開發中？​

http://localhost:3000      # React開發伺服器
http://localhost:8080      # Spring Boot
http://127.0.0.1:5000      # Flask/Python

4. 路徑 (Path) 📂​

網站中的特定頁面或資料夾

https://example.com/products/shoes/nike
                   └────────┬────────┘
                          路徑

路徑結構​

/products/shoes/nike
    └┬┘    └┬┘  └┬┘
   類別    詳細  品牌

可以想像成實際的資料夾結構：

網站
├── products/
│   ├── shoes/
│   │   ├── nike/
│   │   └── adidas/
│   └── clothes/
└── about/

實際示例​

https://github.com/facebook/react
                  └──────┬──────┘
                      路徑
                  /使用者/儲存庫

5. 查詢字串 (Query String) 🔍​

附加資訊或搜尋條件

https://example.com/search?q=javascript&sort=popular&page=2
                          └──────────────┬──────────────┘
                                   查詢字串

結構​

?key1=value1&key2=value2&key3=value3
└┬┘ └──┬──┘ └──┬──┘     └──┬──┘
開始  第一個   分隔符    第三個
     (鍵=值)    (&)      (鍵=值)

實際使用示例​

搜尋​

https://google.com/search?q=javascript
                          └─────┬────┘
                            搜尋詞: javascript

過濾​

https://shop.com/products?category=shoes&color=red&size=10
                          └────────────┬────────────────┘
                         類別:shoes, 顏色:red, 尺寸:10

分頁​

https://blog.com/posts?page=2&limit=20
                      └──────┬──────┘
                      第2頁, 每頁20個

注意事項​

中文或特殊字元需要編碼：

原始: ?q=你好
編碼: ?q=%E4%BD%A0%E5%A5%BD
提示

可以使用URL Encoder輕鬆編碼！

6. 雜湊/片段 (Hash/Fragment) #️⃣​

頁面內的特定位置

https://example.com/docs#installation
                         └─────┬────┘
                             雜湊

用途​

1. 頁面內導航​

<a href="#section1">跳轉到第1部分</a>

<h2 id="section1">第1部分</h2>

2. SPA (Single Page Application)​

https://app.com/#/home
https://app.com/#/profile
https://app.com/#/settings

特點​

  • 不發送到伺服器
  • 僅在瀏覽器中使用
  • 無需重新整理頁面即可導航

實踐示例​

示例 1：購物網站 🛍️​

https://shop.example.com/products/electronics/laptops?brand=apple&price=1000-2000&sort=price#reviews

協定: https
域名: shop.example.com
路徑: /products/electronics/laptops
查詢字串:
  - brand=apple (僅Apple產品)
  - price=1000-2000 (價格範圍)
  - sort=price (按價格排序)
雜湊: #reviews (跳轉到評論部分)

示例 2：搜尋引擎 🔍​

https://www.google.com/search?q=web+development&hl=zh-TW&page=1

協定: https
子域名: www
域名: google.com
路徑: /search
查詢字串:
  - q=web+development (搜尋詞)
  - hl=zh-TW (繁體中文)
  - page=1 (第一頁)

示例 3：YouTube影片 🎥​

https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=30s

協定: https
域名: www.youtube.com
路徑: /watch
查詢字串:
  - v=dQw4w9WgXcQ (影片ID)
  - t=30s (從30秒開始播放)

使用URL解析工具​

URL Params Parser​

在URL Params Parser中：

  • 貼上URL即可自動分析各部分
  • 顯示查詢字串參數清單
  • 自動處理編碼/解碼

常見問題 (FAQ)​

Q1：可以省略www嗎？​

A：可以！現在的趨勢是省略www。

https://example.com  ✅
https://www.example.com  ✅ (同一個網站)

Q2：URL有長度限制嗎？​

A：技術上2000字元左右是安全的。但越短越好！

Q3：URL區分大小寫嗎？​

A：取決於部分！

域名：不區分大小寫
Example.com = example.com ✅

路徑：區分大小寫（取決於伺服器配置）
/About ≠ /about ⚠️

Q4：可以使用特殊字元嗎？​

A：只有一部分可以，大多數需要編碼！

安全字元：A-Z a-z 0-9 - _ . ~
需要編碼：空格、中文、?, &, #, %, / 等

良好的URL編寫技巧 💡​

1. 簡短明確​

❌ https://example.com/p?id=12345&cat=3&subcategory=5
✅ https://example.com/products/shoes/nike-air

2. 使用有意義的詞​

❌ /page1.php
✅ /about-us

❌ /item?id=123
✅ /products/laptop-dell-xps

3. 使用小寫​

❌ /Products/SHOES
✅ /products/shoes

4. 使用連字符(-) (不用底線)​

❌ /web_development
✅ /web-development

5. 刪除不必要的詞​

❌ /and-the-product-is-shoes
✅ /products/shoes

URL調試​

URL不工作時要檢查的事項：

檢查清單​

  1. ✅ 有協定嗎？ (https://)
  2. ✅ 域名拼字正確嗎？
  3. ✅ 路徑存在嗎？
  4. ✅ 查詢字串格式正確嗎？ (?key=value&key2=value2)
  5. ✅ 特殊字元已編碼嗎？

使用工具​

下一步 🚀​

如果你理解了URL結構：

  1. ✅ 理解HTTP請求/回應 - URL如何交換資料
  2. ✅ URL Encoder - 練習URL編碼/解碼
  3. ✅ URL Params Parser - URL分析工具
  4. ✅ API Tester - 使用URL請求API
  5. ✅ 什麼是編碼？ - 詳細了解URL編碼

總結​

URL是網際網路的地址！ 🏠

要記住的要點：

  • 協定：https://（有安全性）vs http://（無安全性）
  • 域名：網站名稱（example.com）
  • 埠號：通常省略（443, 80）
  • 路徑：頁面位置（/products/shoes）
  • 查詢字串：附加資訊（?color=red&size=10）
  • 雜湊：頁面內位置（#section1）

理解URL結構會讓Web開發變得容易得多！ 🎉

現在當你看到網站地址時，你能理解各部分的含義了嗎？