靜態內容
伺服器直接把現成檔案回傳，例如 index.html、圖片、CSS。
從輸入網址到看到網頁：Web 服務的生命週期
你在網址列輸入的是一個短短的 URL，但背後發生的事情遠比你看到的多。 伺服器並不是收到網址就「直接把畫面送過來」，而是要經過查詢、連線、請求、回應與瀏覽器解析等多個步驟。
Why：理解流程比背名詞更重要
如果只背 HTTP、HTML、CSS 的定義，很容易在遇到錯誤時不知道問題出在哪一層。 但一旦你知道完整流程，就能快速判斷：究竟是 DNS 找不到、伺服器沒開、路由錯誤、資源不存在， 還是瀏覽器拿到資料卻渲染失敗。
How：從 URL 到畫面的完整流程
sequenceDiagram
participant User as 使用者
participant Browser as Browser
participant DNS as DNS
participant Server as Web Server
User->>Browser: 輸入 https://example.com
Browser->>DNS: 查詢網域對應的 IP
DNS-->>Browser: 回覆 203.0.113.15
Browser->>Server: 建立 TCP/TLS 連線
Browser->>Server: 傳送 HTTP Request
Server-->>Browser: 回傳 HTML
Browser->>Server: 再請求 CSS / JS / 圖片
Server-->>Browser: 回傳各種資源
Browser->>User: 組合並顯示頁面
| 步驟 | 發生了什麼事 | 常見問題 |
|---|---|---|
| 1. 輸入網址 | 瀏覽器解析 URL，知道協定、主機、路徑 | 網址拼錯、協定不正確 |
| 2. DNS 查詢 | 將網域名稱轉成 IP 位址 | 找不到網域、DNS 設定錯誤 |
| 3. 建立連線 | TCP 三向交握，若是 HTTPS 再加上 TLS | port 未開、TLS 憑證問題 |
| 4. 傳送 Request | 瀏覽器用 HTTP 發送請求 | 路由錯誤、Header 不完整 |
| 5. 接收 Response | 伺服器回傳 HTML 或其他資源 | 404、500、MIME 錯誤 |
| 6. 瀏覽器渲染 | 解析 HTML、載入 CSS、執行 JS | CSS / JS 路徑錯誤、腳本失敗 |
靜態內容 vs 動態內容
動態內容
伺服器根據資料庫、時間、使用者身份，現場產生回應，例如儀表板、登入後畫面。
優點
靜態頁快、簡單；動態頁可客製化、可讀寫資料。
教學提示
不要把「看起來像一個頁面」與「背後只發一個請求」畫上等號。現代網站通常會載入很多資源。
Example 1：請求靜態 HTML 檔案
瀏覽器向伺服器要求首頁
這組範例展示最經典的靜態頁面請求：伺服器把現成的 HTML 檔案回傳給瀏覽器。
GET /index.html HTTP/1.1
Host: example.com
User-Agent: Browser Demo
Accept: text/html
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 284
<!doctype html>
<html>
<body>
<h1>Hello Web</h1>
</body>
</html>Hello Web
瀏覽器收到 HTML 後開始解析，之後可能還會繼續請求 CSS、JavaScript 與圖片。
GET /index.html表示要取得某個資源。- 伺服器若找到檔案，就回傳
200 OK與對應內容。 - 如果 HTML 中還有
<link>、<script>或<img>，瀏覽器會再發出新的請求。
Example 2：伺服器動態產生回應
同一個路徑，不一定回傳固定檔案
很多網站頁面是由伺服器依據資料即時組裝後再回傳，而不是讀取現成 HTML 檔案。
GET /time HTTP/1.1
Host: school.local
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
<h1>現在時間</h1>
<p>2026-03-15 13:10:42</p>現在時間
2026-03-15 13:10:42
每次重新整理，內容都可能不同。
- 路徑雖然看起來像頁面，但內容其實是伺服器現場產生的。
- 這類頁面常來自模板引擎、資料庫查詢或 API 整合。
- 這也是為什麼學會 Web server 與框架後，可以做登入系統、後台、儀表板。
Practice：本章練習
練習 1
請寫出瀏覽器打開首頁後，除了 HTML 之外，還可能再請求哪些資源？
練習 2
請比較靜態首頁與動態首頁在伺服器端的差異。
Summary：本章結論
- 一個網頁的出現，背後至少經過網址解析、DNS、連線、HTTP 請求與瀏覽器渲染。
- 同一個頁面可能伴隨多個資源請求。
- 靜態內容是現成檔案，動態內容則是伺服器根據條件即時生成。