三劍客：網頁世界的三種語言
每個網頁都由這三種語言組成。
就像人的骨架，決定身體的基本結構。HTML 定義了「頁面上有什麼東西」以及「東西的排列順序」。沒有 HTML，網頁就像一堆散落的器官。
常見元素：標題、段落、按鈕、圖片、輸入框、連結
辨識方式：看到 <角括號> 就是它。檔名 .html
就像人的皮膚和外貌，決定你看起來什麼樣子。CSS 負責「外觀」。同樣的骨架，換一套皮膚就能從清新風變成華麗風。
常見元素：顏色、字體大小、間距、動畫、排版方式
辨識方式：看到 { 屬性: 值; } 就是它。檔名 .css
就像人的肌肉，讓身體能動、能反應。JavaScript 讓網頁「能回應使用者的操作」。沒有它，網頁就是一張靜止的海報。
常見元素：點擊按鈕、表單驗證、動態載入內容、互動動畫
辨識方式：看到 function、let、if 就是它。檔名 .js
Vibe Coder 重點
你不需要精通這三者的每一個語法。但你要理解它們各自負責什麼，就像你知道骨架撐起結構、皮膚決定外觀、肌肉讓身體能動。這樣當你跟 AI 說「把這個按鈕改成圓角藍色」的時候，你就知道 AI 應該改的是 CSS（皮膚）而不是 HTML（骨架）。
分層思維 = AI 協作關鍵：判斷問題屬於哪一層 → 精確描述 → AI 給出精確修正。
三層協作實驗室
這是一個常見的社群媒體貼文卡片。試著關閉它的 CSS（皮膚）或 JavaScript（肌肉），體會它們各自的作用。
剛用 AI 寫完一個全端 App 🚀 我根本沒手寫幾行 code，但我知道怎麼指出 AI 的錯誤、怎麼拆解需求，這才是現代工程師的超能力。
三者到齊！HTML 提供內容結構（文字、頭像、按鈕），CSS 讓它變成精美的社群卡片（圓角、陰影、排版），JavaScript 處理所有互動（按讚、留言展開、分享、收藏）。試試每個按鈕！
不管你怎麼切換，HTML 的「內容」永遠都在。CSS 負責外觀、JavaScript 負責互動，三者分工明確，這就是前端的核心架構。
副檔名 = 身份證
前端程式碼住在不同的檔案裡，透過「副檔名」就能一眼看出這個檔案屬於哪一層。
網頁的進入點。瀏覽器打開的第一個檔案通常就是它。
📌 每個網站至少有一個 .html 檔
另一個 HTML 頁面，代表「關於我們」頁面。
📌 每多一個頁面，就多一個 .html（傳統做法）
專門存放外觀樣式的檔案。被 HTML 透過 <link> 標籤引入後生效。
📌 一個網站可能有一個或多個 .css 檔
全站共用的基礎樣式。在 Next.js 專案中很常見。
📌 設定全域字體、背景色、reset 樣式等
主要的 JavaScript 邏輯檔案。
📌 處理按鈕點擊、API 呼叫、動態渲染等互動行為
工具函式的集合（例如日期格式化、表單驗證函式）。
📌 把可重複使用的邏輯抽出來，保持程式碼整潔
一眼辨識檔案類型
.html → 骨架。.css → 外觀。.js / .ts → 互動邏輯。當 AI 幫你建立新檔案時，看副檔名就知道它在處理哪一層的事。
專案資料夾結構
ShopAI 電商網站的程式碼在幕後是怎麼組織的？點擊任何檔案查看說明。
檔案說明
pages/ → HTML 骨架
css/ → CSS 外觀
js/ → JS 互動
三劍客各住各的！
三劍客在專案裡是「分開住」的，HTML 檔在 pages/，CSS 檔在 css/，JS 檔在 js/。這個分離原則讓程式碼更好維護。在更進階的框架（如 React + Next.js）中，它們會被混合寫在 .tsx 檔案裡，但底層原理不變。我們之後的 Module 會教到。
三劍客語法速覽
你不需要現在學會任何語法細節。這裡只是讓你「看過一眼」，之後在 AI 生成的程式碼裡看到它們時，能認出「啊，這段是 CSS」「那段是 JavaScript」。
<!-- HTML：用「角括號標籤」包裹內容 --> <h1>歡迎來到 ShopAI</h1> <p>最受歡迎的 AI 購物平台</p> <img src="banner.jpg" alt="春季大促" /> <button>立即購買</button> <div> <h3>藍牙降噪耳機</h3> <span>$2,490</span> <button>加入購物車</button> </div>
/* CSS：「選誰 { 改什麼 }」 */ h1 { font-size: 36px; color: #1a1a2e; font-weight: 800; } button { background: #4F46E5; color: white; padding: 12px 24px; border-radius: 8px; } button:hover { background: #4338CA; transform: scale(1.05); } .product-card { box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-radius: 12px; padding: 16px; }
// JavaScript：「偵聽事件 → 執行動作」 let cartCount = 0; function addToCart(productName) { cartCount = cartCount + 1; alert("已加入購物車！共 " + cartCount + " 件"); } // 當按鈕被點擊，執行 addToCart button.addEventListener("click", function() { addToCart("藍牙降噪耳機"); }); // 從伺服器載入資料 async function loadProducts() { const res = await fetch("/api/products"); const data = await res.json(); // 把資料渲染到頁面上... }
一句話辨識法：滿滿的 <角括號> = HTML。{ 屬性: 值; } 的結構 = CSS。出現 function、let、if、= = JavaScript。當 AI 回傳一大段程式碼時，用這個直覺快速判斷它在改哪一層。
分類挑戰
判斷以下每個需求，主要是 HTML、CSS、還是 JavaScript 的負責範圍。選錯沒關係，可以隨時重選！