JOURNAL · 網頁基礎
網頁怎麼運作？
從輸入網址到畫面出現，帶你認識瀏覽器、DNS、伺服器、前端、後端與資料庫如何在幾秒內完成合作。
打開瀏覽器、輸入網址、按下 Enter，幾秒後就能看到完整頁面。這個看似簡單的動作，背後其實是瀏覽器、網路、伺服器、程式與資料庫的一次快速合作。
輸入網址之後，發生了什麼？
- 瀏覽器讀取網址，確認你要前往哪一個網站與頁面。
- DNS 把容易記憶的網域名稱，轉換成伺服器所在的位置。
- 瀏覽器透過 HTTPS 與伺服器建立加密連線，送出頁面請求。
- 伺服器上的後端程式判斷要執行的功能，必要時向資料庫取得資料。
- 伺服器把結果回傳，瀏覽器再將 HTML、CSS、JavaScript 與圖片組合成你看到的畫面。
這個往返通常稱為請求與回應。你點擊連結、登入會員、搜尋商品或送出表單時，也會重複類似的流程。
前端、後端與資料庫如何分工？
| 部分 | 負責的工作 |
|---|---|
| 前端 | 呈現畫面、接收操作，並讓手機與電腦都能順利使用 |
| 後端 | 處理規則、驗證權限、串接服務並決定回傳內容 |
| 資料庫 | 有條理地保存會員、文章、商品、訂單與操作狀態 |
三者不是互相取代，而是各自負責不同任務。只有畫面沒有後端，很多客製功能無法運作；只有程式沒有良好介面，使用者又會不知道該怎麼操作。
HTML、CSS、JavaScript 是什麼？
- HTML 像頁面的骨架，定義標題、段落、圖片、按鈕與表單。
- CSS 負責視覺與排版，例如字體、顏色、留白、動畫與響應式版面。
- JavaScript 負責互動，例如選單、即時驗證、輪播、篩選與不重新整理頁面的資料更新。
瀏覽器會依照這些檔案的內容，把程式轉換成可以閱讀與操作的頁面。設計感與使用體驗，往往就藏在字體、間距、速度與操作回饋等細節裡。
為什麼有些網站特別快，有些卻很慢？
網站速度不只取決於主機。圖片大小、程式碼、資料庫查詢、第三方服務、使用者網路與快取方式都會影響結果。專業開發會在畫面品質與載入成本之間取得平衡，避免讓使用者為看不到的浪費等待。
同一個網站，為什麼手機版會重新排版？
RWD 響應式設計會依照螢幕寬度調整欄位、文字、圖片與操作方式。它不是把桌機畫面縮小，而是重新安排內容優先順序，讓按鈕仍然好按、文字仍然好讀，重要資訊也不會被擠出畫面。
有 HTTPS 就代表網站完全安全嗎？
HTTPS 能保護資料在傳輸過程中不容易被竊聽或竄改，但安全還包含登入權限、輸入驗證、套件更新、資料備份與伺服器設定。網址前方的小鎖很重要，卻只是完整安全規劃的一部分。
好網站不只是把畫面做出來，而是讓每一次操作都清楚、快速，也值得信任。
結語
網頁的運作是一連串分工：瀏覽器負責呈現、伺服器負責處理、資料庫負責記住重要資訊。了解這個流程後，規劃網站時就更容易判斷真正需要的功能，也能把預算放在會改善體驗與營運的地方。