為什麼要學 HTML / CSS / JavaScript？

📌 本章重點

📖 教學說明

用「蓋房子」來比喻

要理解這三種技術，用「蓋房子」來比喻最清楚：

• HTML = 建築的結構（牆壁、地板、門窗的骨架）
• CSS = 裝潢和油漆（顏色、擺設、美觀的外觀）
• JavaScript = 電力與水管（讓燈會開關、水龍頭會出水的功能）

三個缺一不可，但可以分開學，一個一個來。

HTML 是什麼？

HTML 全名是 HyperText Markup Language（超文字標記語言）。 它用「標籤（tag）」來告訴瀏覽器：「這裡是一個標題」、「這裡是一段文字」、「這裡放一張圖片」。

你可以把 HTML 想成「網頁的大綱」，它決定了頁面上有什麼內容，但還不管它長什麼樣子。

CSS 是什麼？

CSS 全名是 Cascading Style Sheets（階層樣式表）。 它負責讓網頁變漂亮——設定文字顏色、背景圖片、字體大小、版面配置等等。

同一個 HTML 結構，套上不同的 CSS，可以呈現完全不同的外觀。 這就是為什麼很多公司會定期「改版」網站，其實只是換了 CSS。

JavaScript 是什麼？

JavaScript（常縮寫為 JS）是一種程式語言，讓網頁可以「動起來」並且對使用者的操作做出反應。 例如：點擊按鈕顯示訊息、表單驗證、動態更新內容，都是 JavaScript 在做的事。

為什麼要學這三個，而不是直接用框架？

現在有很多工具（像 React、Vue）可以更快速地建立網頁，但它們都是建立在 HTML、CSS、JS 的基礎上。 如果連基礎都沒有，用框架只會更混亂。

學好基礎的好處是：任何網頁問題你都能看懂，AI 給你的程式碼你也能理解。 這才是 Vibe Coding 能真正發揮效果的前提。

💻 三者合作的範例

下面是同一個按鈕，分別用 HTML 建結構、CSS 加樣式、JS 加互動：

HTML（結構）

<button id="myBtn">點我看看</button>

CSS（樣式）

#myBtn {
  background-color: #4f46e5;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

JavaScript（互動）

document.getElementById('myBtn').addEventListener('click', function() {
  alert('你好，歡迎學習網頁開發！');
});

三段程式碼合起來，就是一個有樣式、有互動的按鈕。這就是三者分工合作的方式。

⚠️ 常見錯誤

✏️ 小練習