[Vibe Coding 基礎教學] 網頁運作原理解析：從輸入網址到看到畫面

你有沒有想過，當你在瀏覽器輸入一個網址，按下 Enter 後，畫面是怎麼跑出來的？為什麼你用 AI 做出來的小工具，直接雙擊 HTML 檔案就能用，但要讓別人也能用，就得「放到網路上」？這些看似理所當然的事情，背後其實有一整套網頁運作原理。

今天這篇文章，我想帶你從頭理解「網頁是如何運作的」，不用懂什麼前端後端，只要知道「你的電腦」和「放網頁的電腦」之間發生了什麼事就好。讓我們接著看下去！

你的 AI 小工具其實是「靜態檔案」

首先，我們先來聊聊你用 AI 做出來的小工具。你可能注意到，當你把 ChatGPT 或 Claude 幫你寫的程式碼存成 HTML 檔案，雙擊打開，它就能直接在瀏覽器裡跑起來。

這種檔案就叫做靜態檔案 (Static File)，也可以說是靜態網頁。

什麼是靜態檔案？

靜態檔案就是「內容已經寫死」的檔案，不需要經過額外處理，瀏覽器直接讀取就能顯示或執行。最常見的靜態檔案有三種：

• HTML：網頁的結構和內容
• CSS：網頁的樣式和排版
• JavaScript：網頁的互動功能

比如說，你做了一個「待辦事項管理工具」，裡面有文字、按鈕、輸入框，當你點擊「新增」按鈕，清單會多一筆項目。這些功能全部都是由 HTML、CSS、JavaScript 三個靜態檔案所構成。

為什麼直接點開就能用？

因為瀏覽器本身就是一個「程式執行器」。當你雙擊 HTML 檔案時：

1. 瀏覽器讀取 HTML，知道網頁的結構長怎樣
2. 瀏覽器讀取 CSS，知道每個元素要套用什麼顏色、大小、位置
3. 瀏覽器執行 JavaScript，讓網頁可以互動（比如按鈕點擊、輸入驗證）

所有的程式碼都在你的電腦上執行，不需要連到網路，所以直接點開就能用。這種不需要連到其他電腦、完全在自己電腦上跑的網頁，就是純靜態網頁。

從輸入網址到看到畫面：網頁運作原理完整流程

好，現在問題來了：如果你想把這個小工具放到網路上，讓全世界的人都能用，你就需要一個「網址」，讓別人可以在瀏覽器輸入網址後看到你的網頁。

那從「輸入網址」到「看到畫面」，中間到底發生了什麼事？讓我們一步一步拆解這個網站運作原理。

第一步：你輸入網址（URL）

當你在瀏覽器輸入 https://www.example.com/about 這串文字，其實包含了很多資訊。這串文字叫做 URL (Uniform Resource Locator)，中文叫「統一資源定位符」，簡單來說就是「網路上某個資源的地址」。

URL 的結構長這樣：

https://www.example.com/about
│      │   │               │
│      │   └─ 網域名稱      └─ 路徑
│      └───── 子網域
└──────────── 協定

讓我們一個一個來看：

• 協定 (Protocol)：https://，代表你跟網站之間的「溝通方式」。HTTPS 是加密版的 HTTP，比較安全
• 子網域 (Subdomain)：www，這是可選的，很多網站會用 www 當作主要入口
• 網域名稱 (Domain Name)：example.com，這是網站的名稱，像是門牌地址
• 路徑 (Path)：/about，代表你想要看這個網站的哪一頁

比如說，你想看某個部落格的「關於我們」頁面，路徑可能就是 /about；想看某篇文章，路徑可能是 /post/how-web-works。

第二步：DNS 查詢 - 把網址變成 IP 地址

你輸入網址後，電腦第一件事不是直接連到網站，而是要先「查詢這個網址對應到哪一台電腦」。這就是 DNS 是什麼的核心概念。

為什麼呢？因為電腦的位置其實只是一串數字，也就是 IP 地址 (IP Address)。比如 192.168.1.1 或 172.217.160.78 這種格式。

但我們人類記不住這些數字，所以發明了網域名稱系統 (DNS, Domain Name System)，它就像是網路上的「電話簿」，負責把「人類看得懂的網址」翻譯成「電腦看得懂的 IP 地址」。

流程簡單來說：

1. 你輸入 www.example.com
2. 瀏覽器跟 DNS 伺服器說：「請問 www.example.com 的 IP 地址是多少？」
3. DNS 伺服器回答：「是 93.184.216.34」
4. 瀏覽器知道了，接下來就連到這個 IP 地址

這個查詢過程通常只需要幾毫秒，你完全感覺不到。這就是 DNS 是什麼的實際運作方式。

前一陣子cloudflare大當機，有部分的影響就是這個DNS查詢不到，因為許多網站的DNS伺服器就是使用cloudflare的！

第三步：建立連線 - 你的電腦 vs 放網頁的電腦

現在瀏覽器知道要連到哪台電腦了，接下來就是「建立連線」。這裡要介紹一個重要的概念：Client Server 架構。

這裡有兩個角色：

• 你的電腦：在網路術語裡叫做 Client（用戶端），也就是「發出請求的人」
• 放網頁的電腦：在網路術語裡叫做 Server（伺服器），也就是「提供服務的人」

這種架構就叫做 Client-Server 架構（用戶端-伺服器架構）。

想像一下，你去餐廳吃飯：

• 你是 Client（客人），你想吃東西
• 餐廳是 Server（廚房），負責準備食物

你點餐（發出請求），餐廳出餐（回傳結果），這就是 Client-Server 架構的運作方式。

第四步：HTTP Request - 瀏覽器跟伺服器「要」東西

連線建立後，瀏覽器會跟伺服器說：「我想要這個網頁的內容」。這個「要東西」的動作，就叫做 HTTP Request（HTTP 請求）。這也回答了「HTTP 是什麼」這個問題。

HTTP (Hypertext Transfer Protocol) 是「超文本傳輸協定」，簡單來說就是瀏覽器和伺服器之間的「溝通語言」。

一個 HTTP Request 通常包含這些資訊：

• 我想要什麼：比如 /about 這個頁面
• 我想要做什麼：常見的有 GET（取得資料）、POST（送出資料）
• 其他附加資訊：比如你用什麼瀏覽器、接受什麼格式的資料等

Request 就像是一張「訂單」，你跟伺服器說：「請給我這個頁面」。

第五步：HTTP Response - 伺服器「給」你東西

伺服器收到你的 Request 後，會處理你的請求，然後把結果「回傳」給你，這就是 HTTP Response（HTTP 回應）。

Response 就像是「出餐」，伺服器把你要的東西準備好，送到你面前。

一個 HTTP Response 包含：

• 狀態碼 (Status Code)：告訴你「成功」還是「失敗」
  • 200：成功，這是你要的東西
  • 404：找不到，你要的頁面不存在
  • 500：伺服器出錯了
• 回傳內容：可能是 HTML、CSS、JavaScript、圖片、影片等等

比如說，你請求 /about 頁面，伺服器回傳一個 HTML 檔案，裡面寫著「關於我們」的內容。

第六步：瀏覽器渲染 - 把程式碼變成畫面

瀏覽器收到 HTML、CSS、JavaScript 後，會開始「渲染 (Render)」，也就是把這些程式碼變成你看到的畫面。

渲染流程大概是這樣：

1. 讀取 HTML：建立網頁的結構（標題、段落、按鈕、圖片等）
2. 套用 CSS：美化外觀（顏色、字體、排版、位置）
3. 執行 JavaScript：加上互動功能（按鈕點擊、表單驗證、動畫效果）

如果 HTML 裡有圖片、影片、其他 CSS 或 JavaScript 檔案，瀏覽器會再發送額外的 HTTP Request 去下載這些資源，然後一起組合成最終的畫面。

這整個過程通常只需要幾百毫秒，你幾乎感覺不到，畫面就跑出來了。這就是完整的網頁運作流程。

所以網路上公開的網頁跟你自己雙擊html檔案打開網頁的差別就是以上這些檔案是怎麼來的： 前者是透過第一步到第六步才來到你的瀏覽器中，後者則是直接使用你電腦裡的檔案。

API 是什麼？程式之間的溝通方式

到這裡你可能會想：「那如果我的網頁想要『取得資料』怎麼辦？比如顯示今天的天氣、股票價格、或是使用者的留言？」

這時候就會用到 API (Application Programming Interface)，中文叫「應用程式介面」。那 API 是什麼呢？簡單來說就是「程式跟程式之間的溝通方式」。

簡單比喻

想像你去餐廳，菜單就是 API：

• 菜單上寫著「你可以點哪些菜」（API 定義你可以要哪些資料）
• 你跟服務生點餐（你的程式發送 API 請求）
• 廚房準備好餐點後送出來（API 回傳資料）

在網頁的世界裡，API 通常是一個「網址」，當你的 JavaScript 程式碼向這個網址發送請求，伺服器會回傳特定格式的資料（通常是 JSON 格式）。

比如說：

• 天氣 API：https://api.weather.com/current?city=Taipei
• 股票 API：https://api.stock.com/price?symbol=2330

你的 JavaScript 程式碼可以這樣寫：

// 向 API 請求天氣資料
fetch('https://api.weather.com/current?city=Taipei')
  .then(response => response.json())  // 把回傳的資料轉成 JSON
  .then(data => {
    // 顯示在網頁上
    document.getElementById('weather').innerText = data.temperature;
  });

為什麼需要 API？

因為很多時候，資料不是「寫死」在 HTML 裡，而是「動態變化」的。比如：

• 天氣會隨時間改變
• 股票價格每秒都在跳動
• 使用者的留言是即時新增的

這些資料需要「即時從某個地方取得」，而這個「某個地方」通常就是另一台電腦（伺服器），API 就是讓你的程式可以跟那台電腦「要資料」的方式。理解 API 是什麼，對後續學習會很有幫助。

什麼時候需要伺服器？什麼時候不需要？

到這裡你可能會想：「我的 AI 小工具是靜態檔案，雙擊就能用，那什麼時候需要伺服器呢？」

讓我們來釐清一下：

純靜態網站：不需要伺服器邏輯

如果你的網頁功能很簡單，不需要「儲存資料」或「執行複雜運算」，那你只需要一個「放檔案的地方」。

比如說：

• 個人作品集網站
• 公司官網
• 部落格（使用靜態網站生成器）
• 你的 AI 小工具（計算機、待辦清單、顏色選擇器等）

這些靜態網頁可以直接放在 GitHub Pages、Netlify、Vercel 這類「靜態網站託管服務」，完全免費。它們的工作就是「當有人輸入你的網址，就把你的 HTML、CSS、JavaScript 檔案傳給他」，就這麼簡單。

需要伺服器邏輯：要處理資料、使用者登入

如果你的網站需要這些功能：

• 儲存使用者資料：比如待辦事項要跨裝置同步
• 使用者登入：需要帳號密碼驗證
• 處理複雜運算：比如圖片處理、AI 運算
• 即時更新：比如聊天室、股票報價

那你就需要一個「真正的伺服器」，它不只是放檔案，還要「執行程式碼」、「存取資料庫」、「處理使用者請求」。

簡單判斷法：

• 如果你的功能「全部在瀏覽器裡就能跑完」→ 純靜態網站
• 如果你需要「儲存資料到某個地方」或「讓多個使用者共享資料」→ 需要伺服器

這只是開始：系列文章預告

今天我們帶你快速走過了網頁運作的完整流程。但這只是一個全景導覽，每個環節其實都有更多值得深入了解的細節。

在接下來的系列文章中，我會針對每個主題寫一篇獨立的深入解析：

• 靜態網頁 vs 動態網頁：除了今天提到的靜態檔案，什麼是動態網頁？兩者的差異在哪？什麼時候該用哪一種？
• URL 完整解析：除了基本結構，還有 Query String、Fragment、編碼規則等進階概念
• DNS 深入解析：DNS 的查詢過程、快取機制、以及為什麼有時候換了 DNS 網站會變快
• HTTP 協定詳解：HTTP 方法（GET、POST、PUT、DELETE）、狀態碼、Headers 的實際應用
• API 實戰入門：如何用 JavaScript 呼叫 API、處理回傳資料、以及常見的錯誤處理
• 伺服器入門：什麼是後端？如何用最簡單的方式建立自己的伺服器？

每一篇都會用同樣淺顯易懂的方式，幫助你在 vibe coding 的路上走得更穩、更遠。

如果你想收到後續文章的更新，記得追蹤或訂閱唷！有任何想法或問題，都歡迎留言討論～掰掰 👋