HTML、CSS、JavaScript 差在哪？前端三層架構一次搞懂

架構、外觀與互動，各自交給正確的一層

HTML、CSS、JavaScript 幾乎總是一起出現，新手很容易把它們看成三種都能拿來做網頁的語言。實際上，它們處理的是不同層次：HTML 標記內容的架構，CSS 決定畫面怎麼呈現，JavaScript 則負責回應操作、更新狀態與取得資料。知道這個分工後，即使程式主要由 AI 產生，你也比較能判斷問題究竟發生在哪一層。

這支影片會從同一張商品卡開始，逐層把內容加回來。你會看到：

• HTML 標籤如何表達標題、段落、圖片與按鈕等內容結構。
• CSS 除了顏色，還能控制排列、間距、尺寸、陰影與動畫效果。
• JavaScript 如何處理點擊、記住狀態，再把結果更新到畫面上。
• 前端需要資料時，JavaScript 如何透過 API 向後端發出請求。
• 三層疊在一起後，才會成為使用者真的能操作的完整網頁。
• 開始前如何把網站類型、部署方式與專案規模交代給 AI。

這些基礎觀念最實際的用途，是讓修改需求說得更準確。字的意思或排列順序不對，通常先看 HTML；顏色、寬度或版面跑掉，問題多半在 CSS；按鈕按了沒反應、資料沒有更新，就要往 JavaScript 與 API 的方向檢查。你不必一開始就把所有語法背完，但至少要能分辨 AI 改的是內容、外觀還是互動，才不會修一個按鈕顏色，卻連資料流程都一起重寫。

想看三層怎麼一步一步疊起來，可以搭配這篇的互動式簡報。簡報裡可以直接切換不同層次，觀察同一張商品卡少了其中一層會變成什麼樣子。先看影片建立整體印象，再回到簡報操作一次，之後不論自己閱讀程式，或請 AI 協助修改，都會更容易說清楚要動哪裡。