網頁的骨架、皮膚與肌肉
瀏覽器眼中的網頁是一棵有層次的樹，而把這棵樹蓋出來、上色、動起來的，是三種分工合作的語言。 把網頁想成一個人：HTML 是骨架， 撐起整個身體的結構；CSS 是皮膚， 決定看起來什麼樣子；JavaScript 是肌肉， 讓身體能動、能反應。
三個角色，各司其職
逐張看三個角色各管什麼。你不用知道程式碼怎麼寫， 重點是建立「這件事歸哪一層管」的直覺。
決定「頁面上有什麼東西、按什麼順序排」。標題、文字、圖片、輸入框、按鈕，都是 HTML 放上去的。沒有它，網頁就是一片空白。
決定「這些東西看起來什麼樣子」。顏色、字體大小、間距、圓角、排版位置，全是 CSS 說了算。同一副骨架換一套 CSS，整個網站的氣質就完全不同。
無 CSS
有 CSS
決定「使用者操作後會發生什麼」。按按鈕、填表單、數字跳動、內容隨點擊變化，都靠 JavaScript。沒有它，網頁就是一張靜止的海報。
三層協作實驗室
這是一張你天天滑的社群貼文卡片，它同時用到三種語言：HTML 提供內容結構（文字、頭像、按鈕）， CSS 讓它變成精美的社群卡片（圓角、陰影、排版），JavaScript 處理所有互動（按讚、留言展開、轉發、分享）。 試著把 CSS（皮膚） 或 JavaScript（肌肉） 關掉， 看少了哪一層、這個畫面會變成什麼樣子。
剛用 AI 寫完一個全端 App 🚀 我根本沒手寫幾行 code，但我知道怎麼指出 AI 的錯誤、怎麼拆解需求，這才是現代工程師的超能力。
#VibeCoding #AI #WebDev
專案資料夾架構
三種語言住在不同的檔案裡。光看檔名最後的「副檔名」，就能一眼認出它是哪一層。
頁面的骨架與內容。瀏覽器打開的入口通常是 index.html。
外觀樣式。被 HTML 引入後，整頁的顏色、排版、字體都聽它的。
互動邏輯。按鈕點了要做什麼、畫面怎麼隨操作變，寫在這裡。
真實專案通常不會把所有檔案丟在同一層。怎麼分其實沒有標準答案： 有人按語言分，也有人按功能或元件（可重複使用的畫面零件）分。下面先用最基礎的「按語言分」當例子， 重點是同一個專案裡保持一致，讓你和 AI 都能一眼找到「要改什麼」。
點左邊任一個檔案，看它在專案裡負責什麼、跟 AI 協作時怎麼定位它。
三劍客語法速覽
你現在不用學會任何語法，只要能「認出來」就好。 這樣一來，當 AI 幫你生成一大段程式碼，你一眼就能分辨哪段是 HTML、哪段是 CSS、哪段是 JavaScript， 也就知道它動到了哪一層。而認出來其實很簡單，記住三個「招牌長相」： 滿滿的 <角括號>，是 HTML； 選誰 { 改什麼 } 的結構，是 CSS； 出現 function、變數、 「發生什麼就做什麼」，是 JavaScript。下面切換三個分頁，把這三種長相看熟就好。
<!-- HTML：用「角括號標籤」包住內容 -->
<h1>VIBE EATS</h1>
<p>4.8（2,310 則評價）· 外送約 25 分鐘</p>
<img src="beef-burger.jpg" alt="經典牛肉堡" />
<div>
<span>經典牛肉堡</span>
<span>NT$ 180</span>
<button>加入購物車</button>
</div>角括號 < > 標籤：元素用 <標籤> 開頭、</標籤> 結尾，這是 HTML 的招牌特徵；少數像 <img> 這種沒有內文的元素，一個標籤就寫完
標籤有語意：<h1> 是大標題、<p> 是段落、<img> 是圖片、<button> 是按鈕
只描述「有什麼」：完全不管顏色大小，只說「這裡有個標題、那裡有張圖、這邊一顆按鈕」
重點回顧
這一課我們認識了打造網頁的三種語言。之後不管是自己動手還是請 AI 改，先判斷「這件事歸哪一層」：
- 1HTML（骨架）管內容想新增區塊、內容不見了、順序不對，找 HTML。檔名結尾是 .html。
- 2CSS（皮膚）管外觀東西都在、但顏色大小位置不對，找 CSS。檔名結尾是 .css。
- 3JavaScript（肌肉）管互動按了沒反應、數字不會動、點了不跳轉，找 JavaScript。檔名結尾是 .js。
分類挑戰：這個需求該改哪一層？
判斷以下每個需求，主要是 HTML、CSS、還是 JavaScript 的負責範圍。