為什麼網址能打開網頁？
你會看到 DNS、TCP 連線、HTTP Request、伺服器回應與瀏覽器渲染之間的完整流程。
完整而系統地理解 Web server、前端互動、JavaScript 全貌、AJAX 與實務技術堆疊
這個網站不是只教你「怎麼寫網頁」，而是幫你建立一條完整的理解路徑： 網路分層 → Client-Server → HTTP → HTML / CSS → JavaScript / DOM / CSS 互動 → Web server 範例 → 現代框架 → JavaScript 前後端整體架構 → jQuery 詳解 → AJAX 非同步請求與局部更新 → 真實網站技術堆疊解讀。 當你知道資料怎麼在網路中傳輸、瀏覽器怎麼建立畫面、JavaScript 又怎麼改變 DOM，才算真正理解 Web 技術的整體脈絡。
這個網站會回答哪些核心問題？
瀏覽器如何把程式碼變成畫面？
你會理解 HTML、CSS、DOM、事件與 JavaScript 如何一起作用，讓畫面不只顯示內容，也能回應操作。
為什麼還要用框架？
當網站越來越大，框架會提供路由、元件、狀態管理、伺服器整合與團隊協作所需的結構。
學習路徑總覽
你可以把整套內容想成從「資料如何走過網路」到「如何建立互動網站」的一條連續路徑。
flowchart LR
A[TCP/IP 與網路基礎] --> B[Client-Server 與 Web 服務流程]
B --> C[HTTP 協定]
C --> D[HTML 與 CSS 基礎]
D --> E[JavaScript DOM 與 CSS 互動]
E --> F[Web Server 實作範例]
F --> G[現代框架與應用選型]
G --> H[JavaScript 前後端整體架構]
H --> I[jQuery 詳解與實務]
I --> J[AJAX 原理與非同步請求]
J --> K[實務技術堆疊解析]
閱讀建議：
如果你是第一次系統學習 Web 技術，建議從第一章依序閱讀。
如果你已經會做靜態頁面，但對 JavaScript 與 DOM 的互動還不熟，可以直接接著看第五章；若想理解整體生態可看第八章，若要看經典 library 實作可讀第九章，若要補清非同步請求原理可讀第十章，若想把一串術語放回真實網站場景，可再讀第十一章。
依你的背景選擇閱讀方式
第一次學 Web
- 先讀第 03 章，用 DevTools / curl 看 HTTP。
- 再讀第 04、05 章，把 HTML / CSS / DOM 打穩。
- 最後讀第 06、07、08、09、10、11 章，把 server、框架、JavaScript 全貌、AJAX 與實務技術堆疊串起來。
已會做靜態頁面
- 先讀第 05 章，把 DOM 與事件操作補完整。
- 接著看第 06 章的 Express 範例。
- 最後用第 07、08、09、10、11 章理解框架、JavaScript 生態、經典 library、AJAX 與實務網站堆疊的關係。
熟悉 Apache / Nginx
- 直接看第 06 章的傳統觀念對照表。
- 接著看第 07 章的 Nginx + Express 分工範例。
- 之後接著看第 08、09、10、11 章，會更容易把 JavaScript 前後端、舊專案寫法、AJAX 與真實網站堆疊串起來。
章節目錄
TCP/IP 與 Client-Server
理解 IP、Port、Socket、Daemon 與 Client-Server 的角色分工，建立網路服務的底層觀念。
進入章節Web 服務完整流程
從輸入網址開始，追蹤 DNS、TCP、TLS、HTTP 到瀏覽器顯示內容的完整生命週期。
進入章節HTTP 協定
掌握 Request / Response 結構，並真的用 DevTools 與 curl 觀察一次 HTTP 往返。
進入章節HTML 與 CSS 基礎
先用 5 個最常用標籤做出第一頁，再逐步擴展到屬性、語意化標籤與 CSS 版型。
進入章節JavaScript、DOM 與 CSS 互動
先看懂 HTML 原始碼、DOM 樹與畫面的差異，再學事件、節點選取與互動更新。
進入章節Web Server 範例與 MIME
用 Python、Express 與原生 Node.js 三個層次理解伺服器，並提供初學者與傳統管理者的雙路徑閱讀方式。
進入章節現代框架與為什麼要用它們
釐清 Web server、Runtime、Library、Framework 的差異，並補上「不用框架時，專案會先卡在哪裡」。
進入章節JavaScript：從前端到後端的整體架構
從發展歷史、DOM、常用 library、生態工具到 Node.js 與 API 流程，一次整理 JavaScript 的全貌。
進入章節jQuery：經典 JavaScript Library 詳解
理解 jQuery 為何流行、核心語法怎麼寫、它幫你省了哪些工，並透過 DOM、事件與 AJAX 範例建立實作感。
進入章節AJAX：非同步請求與局部更新原理
補上 AJAX 是什麼、能做什麼、如何依靠 HTTP 與 JavaScript 運作，並用 fetch / jQuery 對照理解非同步資料流。
進入章節實務技術堆疊解讀：Laravel、Vue、SEO 與 AI 可讀內容
把一段真實網站描述拆成框架、資料庫、樣式層、互動層與內容分發層，理解術語如何在同一個網站裡協同工作。
進入章節這個網站如何呈現範例？
因為你要求同時顧及「語法」與「結果」，本站採用統一的 Example Showcase 設計。 每一組範例都有三個頁籤，讓學生能切換視角而不迷路。
語法
顯示完整原始碼、原始 HTTP 訊息、伺服器設定或終端指令。
結果
顯示瀏覽器畫面、回應內容、終端輸出、流程效果或預期 UI 呈現。
解說
逐段說明這組範例在教什麼，幫助學生從「看得到」過渡到「理解為什麼」。
設計考量
比起左右並排，頁籤切換更適合行動裝置與長篇教材，不會因過寬版面壓縮文字。
完成後你應該獲得的能力
知識面
- 理解 TCP/IP 分層與 Web 服務在應用層的位置。
- 理解 HTTP 為何是 Web 的核心傳輸協定。
- 理解 HTML、CSS、JavaScript、DOM 與 Web server 的分工。
- 理解框架如何建立在底層標準與伺服器能力之上。
技能面
- 能閱讀基本的 HTTP Request / Response。
- 能看懂並修改 HTML / CSS / JavaScript 範例。
- 能用 DOM API 與 class 切換做出基礎互動。
- 能根據需求思考何時用原生技術、何時用 Web server 或框架。