網頁基礎概念與運作原理
本文介紹網頁運作的核心觀念，包含瀏覽器如何向伺服器取得資料、HTML / CSS / JavaScript 的角色、瀏覽器渲染流程，以及 HTTP / HTTPS 的基本概念。
1. 網頁如何運作？
網頁運作建立在 用戶端－伺服器模型 (Client-Server Model) 上。
- 用戶端 (Client)：通常是瀏覽器，例如 Chrome、Edge、Safari、Firefox。
- 伺服器 (Server)：提供網頁資源與後端服務的主機。
- DNS：負責把網域名稱轉成可連線的 IP 位址。
以下流程以常見的 HTTP/1.1 或 HTTP/2 over TCP 為例。若使用 HTTP/3，底層會改用 QUIC over UDP，而不是 TCP。
sequenceDiagram
actor User as 使用者
participant Browser as 瀏覽器
participant DNS as DNS 伺服器
participant Server as 網頁伺服器
User->>Browser: 輸入網址並送出
Browser->>DNS: 查詢網域對應的 IP 位址
DNS-->>Browser: 回傳可連線的 IP 位址
Browser->>Server: 建立 TCP 連線
Browser->>Server: TLS 握手，建立安全通道
Browser->>Server: 發送 HTTP Request
Server-->>Browser: 回傳 HTTP Response 與網頁資源
Browser->>User: 解析並渲染網頁畫面用戶端
用戶端通常是瀏覽器。它的工作包含：
- 發送網路請求。
- 接收 HTML、CSS、JavaScript、圖片、字型等資源。
- 解析程式碼與資料。
- 渲染成使用者看到的畫面。
- 處理使用者互動。
伺服器
伺服器負責接收請求並回傳資源或資料。它可能負責：
- 提供靜態檔案，例如 HTML、CSS、JS、圖片。
- 執行後端程式邏輯。
- 查詢資料庫。
- 驗證使用者身分。
- 回傳 API 結果。
DNS
DNS (Domain Name System) 負責將人類容易記住的網域名稱，例如 example.com，解析成電腦實際連線用的 IP 位址。
實務上，同一個網域可能因地區、時間、CDN 節點、DNS 設定不同，而解析到不同 IP。
2. 網頁建構的三大核心技術
網頁前端主要由三個核心技術組成：
- HTML：結構與內容
- CSS：樣式與版面
- JavaScript：互動與動態邏輯
2.1 HTML：網頁結構與內容
HTML (HyperText Markup Language) 是網頁的結構與內容描述語言。
HTML 透過標籤表示不同內容，例如標題、段落、連結、圖片、表格、表單等。
常見標籤
| 標籤 | 用途 |
|---|---|
<h1> ~ <h6> | 標題 |
<p> | 段落 |
<a> | 超連結 |
<img> | 圖片 |
<ul> / <ol> / <li> | 清單 |
<table> | 表格 |
<form> | 表單 |
<div> / <span> | 常用容器 |
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>網頁範例</title>
</head>
<body>
<h1>首頁標題</h1>
<p>這是一個簡單的 HTML 段落。</p>
<a href="https://example.com">造訪網站</a>
</body>
</html>2.2 CSS：樣式與版面
CSS (Cascading Style Sheets) 用來控制網頁外觀，例如顏色、字型、間距、排版與動畫。
CSS 由 選擇器 (Selector) 與 宣告區塊 (Declaration Block) 組成。
h1 {
color: #1a73e8;
font-size: 24px;
text-align: center;
}
.highlight {
background-color: yellow;
font-weight: bold;
}常見 CSS 功能
- 顏色與字型設定
- 版面配置與間距
- 動畫與轉場效果
- 響應式網頁設計
2.3 JavaScript：互動與動態邏輯
JavaScript 是網頁前端最常見的程式語言，用來處理互動、動態內容與非同步資料請求。
JavaScript 是一門多範式語言，支援：
- 事件驅動
- 物件導向
- 函數式寫法
- 非同步程式設計
常見用途包含：
- 按鈕點擊事件
- 表單驗證
- 動態更新畫面
- 呼叫 API
- SPA 單頁應用程式
- 前端狀態管理
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("按鈕已被點擊");
});3. 瀏覽器渲染流程
瀏覽器取得 HTML、CSS、JavaScript 等資源後，會解析這些內容，並一步步產生畫面。
flowchart TD
HTML["解析 HTML"] --> DOM["建立 DOM Tree"]
CSS["解析 CSS"] --> CSSOM["建立 CSSOM Tree"]
DOM --> RenderTree["合併成 Render Tree"]
CSSOM --> RenderTree
RenderTree --> Layout["Layout / Reflow：計算位置與大小"]
Layout --> Paint["Paint：繪製視覺內容"]
Paint --> Composite["Composite：圖層合成"]
Composite --> Display["顯示在螢幕上"]1. 建立 DOM Tree
瀏覽器解析 HTML，將標籤轉成樹狀結構，也就是 DOM (Document Object Model)。
2. 建立 CSSOM Tree
瀏覽器解析 CSS，建立 CSS 規則的物件模型，之後再與 DOM 搭配計算每個元素的最終樣式。
3. 建立 Render Tree
瀏覽器將 DOM 與 CSSOM 合併，產生實際需要顯示的節點。
例如 display: none 的元素不會出現在 Render Tree 中；但 visibility: hidden 的元素仍會佔據版面空間，只是不會被畫出來。
4. Layout / Reflow
瀏覽器計算每個可見元素的位置與尺寸。
5. Paint
瀏覽器將文字、顏色、邊框、陰影、背景等視覺內容繪製出來。
6. Composite
現代瀏覽器可能會將部分元素提升為獨立圖層，例如動畫元素、固定定位元素或使用特定 CSS 屬性的元素。最後瀏覽器會將多個圖層合成為最終畫面。
實務上，不同瀏覽器引擎細節會不同，上述流程是適合入門理解的簡化模型。
4. HTTP / HTTPS 傳輸協定
瀏覽器與伺服器之間的溝通，主要依靠 HTTP 或 HTTPS。
4.1 HTTP
HTTP (HyperText Transfer Protocol) 是應用層協定，用來讓瀏覽器與伺服器交換 request 與 response。
HTTP 本身不提供加密。若直接使用 HTTP，傳輸內容可能被中間節點觀察或竄改。
4.2 HTTPS
HTTPS 是在 HTTP 與下層傳輸之間加入 TLS 安全層。
TLS 會在連線初期完成：
- 伺服器身分驗證
- 金鑰協商
- 安全通道建立
之後 HTTP request / response 會在加密通道中傳輸，以保護資料的機密性與完整性。
4.3 常見 HTTP Methods
| Method | 用途 |
|---|---|
GET | 取得資源 |
POST | 新增資料或提交表單 |
PUT | 整體更新資源 |
PATCH | 部分更新資源 |
DELETE | 刪除資源 |
4.4 常見 HTTP Status Codes
| 狀態碼 | 分類 | 說明 |
|---|---|---|
200 OK | 2xx 成功 | 請求成功 |
301 Moved Permanently | 3xx 重新導向 | 資源永久移動 |
400 Bad Request | 4xx 用戶端錯誤 | 請求格式錯誤 |
401 Unauthorized | 4xx 用戶端錯誤 | 未通過身分驗證 |
403 Forbidden | 4xx 用戶端錯誤 | 沒有存取權限 |
404 Not Found | 4xx 用戶端錯誤 | 找不到資源 |
500 Internal Server Error | 5xx 伺服器錯誤 | 伺服器內部錯誤 |
5. 前端與後端的職責分工
現代網頁開發通常分為前端與後端。
| 項目 | 前端 (Frontend) | 後端 (Backend) |
|---|---|---|
| 執行位置 | 使用者的瀏覽器 | 伺服器 |
| 主要職責 | 畫面、互動、使用者體驗 | 商業邏輯、資料處理、API、安全性 |
| 常見技術 | HTML, CSS, JavaScript, React, Vue, Angular | Node.js, Python, Go, Java, C#, SQL / NoSQL |
| 關注重點 | 介面、效能、相容性、RWD | 架構、資料庫、權限、穩定性 |
6. 現代網頁開發進階方向
掌握基礎後，可以往以下方向深入：
-
HTML 語意化
使用正確標籤提升可讀性、SEO 與無障礙性。 -
CSS 版面與響應式設計
深入 Flexbox、Grid、Media Queries，讓網頁適應不同螢幕尺寸。 -
JavaScript 非同步程式設計
學習 Promise、async / await、事件循環、fetch API。 -
前端框架與組件化
學習 React、Vue、Angular 等框架，建立可維護的前端架構。 -
版本控制與協作
使用 Git / GitHub 管理程式碼版本與團隊協作。 -
效能優化
了解 bundle size、lazy loading、cache、Core Web Vitals 等議題。 -
安全性基礎
了解 XSS、CSRF、CORS、HTTPS、Content Security Policy 等常見安全概念。
相關概念延伸閱讀
- 程式設計基礎概念與運作原理：理解程式碼在前後端中的運作方式。
- 網路通訊基礎概念與協定原理：了解 HTTP / HTTPS 背後的網路通訊原理。