網頁三兄弟 — HTML / CSS / JS

每個網頁都是三兄弟合作

先把網頁想成一個會動的人。HTML（HyperText Markup Language）是骨架，決定這裡有頭、那裡有手、哪一段是標題、哪一段是內文、哪一個地方放按鈕。CSS（Cascading Style Sheets）是皮膚和衣服，決定顏色、字體大小、背景、間距、圓角。JavaScript（常寫成 JS）是肌肉，負責讓畫面對你的動作有反應：點按鈕、展開選單、切換頁籤、送出表單。

這三個角色常常被初學者混在一起。看到按鈕是藍色，就以為是 HTML；看到按鈕能點，就以為是 CSS。其實 HTML 只說「這裡有一顆按鈕」，CSS 說「這顆按鈕長成藍色圓角」，JS 說「使用者按下去時，把文字改成謝謝」。你不用一開始背完所有語法，只要先能把責任分清楚，讀網頁就不會整團糊在一起。

這個分工也會讓你更會跟 AI 實習生合作。你說「幫我把網站弄好看一點」，它可能亂改一堆東西；你說「請只改 CSS，把主要按鈕背景改成深綠色，文字維持白色」，它的工作範圍就清楚很多。程式仍然是 ch01 學過的食譜，一步一步交代越明確，做出來越接近你要的菜。

• HTML 問的是：畫面上有哪些東西？它們的層級是什麼？
• CSS 問的是：這些東西看起來如何？間距、顏色、大小怎麼排？
• JS 問的是：使用者做了什麼動作？畫面要怎麼回應？

const webPage = [
  { name: "HTML", job: "放內容與結構" },
  { name: "CSS", job: "控制外觀" },
  { name: "JS", job: "處理互動" }
];
webPage.forEach(part => {
  console.log(part.name + "：" + part.job);
});

HTML：用標籤裝內容

HTML 標籤（tag）像是容器上的貼紙。<h1> 表示一級標題，<p> 表示段落，<button> 表示按鈕，<img> 表示圖片，<div> 表示一個通用區塊。多數標籤有開始和結束，像 <p>這是一段話</p>。瀏覽器看到它，就知道中間那段文字是一個段落，而不是標題或按鈕。

HTML 最重要的觀念不是「背很多標籤」，而是看懂包住關係。比如一張自我介紹卡片，外面可能是一個 <section>，裡面有 <h1> 放名字、<p> 放介紹、<button> 放打招呼按鈕。外層容器像便當盒，裡面的標題、段落、按鈕像不同菜格。當你知道哪個東西包在哪裡，就能叫 AI 實習生「只改卡片裡的按鈕」，而不是把整頁按鈕都改掉。

初學者最常見的 HTML bug 是標籤沒配對。你開了 <button> 卻忘記 </button>，瀏覽器會努力猜你的意思，但猜出來的畫面可能怪怪的。另一個常見問題是把外觀責任塞進 HTML，例如一直問「這個 h1 怎麼變紅？」其實 HTML 只負責說它是標題，紅色通常交給 CSS。把責任拆開，檔案會比較乾淨，也比較容易檢查。

在這章，你先認識五個就夠：標題 <h1>、段落 <p>、按鈕 <button>、圖片 <img>、區塊 <div>。看到陌生標籤時，不必緊張，先問它大概在裝什麼內容。大多數網頁就是很多容器一層一層包起來。

讀 HTML 時可以用縮排幫自己看層級。縮排不是給瀏覽器看的，瀏覽器多半不在乎空白；縮排是給人看的地圖。外層往左，裡層往右，你一眼就能看出按鈕是在卡片裡，還是在卡片外。如果 AI 產生一大坨沒有換行的 HTML，你可以請它「只整理縮排，不改內容」，先把骨架看清楚再動手。

const cardHtml = `<section>
  <h1>安安，我是小道</h1>
  <p>我正在學網頁三兄弟。</p>
  <button>打招呼</button>
</section>`;
console.log(cardHtml);
console.log("這張卡片有標題、段落、按鈕三種內容。");

CSS：先選到誰，再改什麼

CSS 的句子可以拆成兩個問題：第一，選到誰？第二，改什麼？選到誰的那一段叫 選擇器（selector）。例如 button 會選到所有按鈕，.card 會選到 class 名稱是 card 的東西。改什麼的那一段叫 屬性（property），像 color 改文字顏色，font-size 改字體大小，background 改背景。

一條 CSS 規則通常長得像：button { background: blue; color: white; }。用白話讀就是：「找到所有 button，背景改藍色，文字改白色。」大括號裡每一行都是一個設定。冒號左邊是你要改的項目，右邊是改成什麼值，分號表示這個設定結束。你不需要一口氣記住全部屬性，先記住顏色、大小、背景，已經可以完成很多常見修改。

CSS 容易讓人覺得玄，是因為同一個元素可能同時被好幾條規則選到。比如所有按鈕都藍色，但主要按鈕又被指定成綠色。這時瀏覽器會依照規則決定誰贏。現在你不用深入戰鬥規則，只要先養成一個習慣：改樣式前先說清楚「我要選到哪個範圍」。如果只想改自我介紹卡片裡的按鈕，就不要只寫 button，而可以用 .profile-card button 這種更精準的說法。

跟 AI 合作時，CSS 是最容易被「弄好看一點」搞壞的地方。比較好的提示是：「保留 HTML 和 JS，只調整 CSS。卡片寬度 320px，背景白色，按鈕背景 #0f766e，hover 時稍微變暗。」就算你還不會寫完整 CSS，能說出選擇器、屬性、值這三個字，也會讓實習生少猜很多。

你也可以把 CSS 想成一張貼在便當盒外面的造型清單。它不改菜格裡放什麼，只改盒子看起來如何。今天把按鈕變綠，明天把字變大，內容本身仍然是同一顆按鈕。這種分離很重要，因為改外觀時不應該順手改掉文案，改文案時也不該把版面弄歪。

const cssRule = {
  selector: ".profile-card button",
  properties: {
    background: "#0f766e",
    color: "white",
    fontSize: "16px"
  }
};
console.log("選到誰：" + cssRule.selector);
console.log("背景：" + cssRule.properties.background);
console.log("文字顏色：" + cssRule.properties.color);

JS：讓按鈕有反應

HTML 和 CSS 可以做出漂亮但安靜的畫面。要讓畫面對使用者有反應，就輪到 JavaScript。JS 常做三件事：找到畫面上的某個元素、等待某個事件、事件發生後改東西。事件（event）就是使用者或瀏覽器發生的動作，例如 click 點擊、input 輸入、submit 送出表單。

最典型的例子是按鈕。HTML 放一顆 <button>打招呼</button>，CSS 讓它變漂亮，JS 則說：「當這顆按鈕被點擊時，把段落文字改成你好。」在真正的網頁裡，JS 會用 document.querySelector 找元素，用 addEventListener 綁事件。這兩個詞看起來長，但白話很直：querySelector 是「請幫我選到這個東西」，addEventListener 是「請聽這個動作」。

這裡先不要追求把所有語法背熟。你要先看懂流程：按鈕本來在畫面上，使用者點了一下，JS 收到 click，然後改文字。這跟 ch03 學過的判斷很像：如果發生這個動作，就做那件事。也跟 ch04 的函式很像：把「點了要做什麼」包成一段小步驟，等事件發生再呼叫。

JS 也是最需要驗證的部分。因為它會動，所以看起來沒報錯不代表真的符合需求。你可以養成小量測試：先只讓按鈕改一段文字，確認可行，再加第二個效果。不要一次叫 AI 實習生做五種動畫、三個表單、兩個彈窗，出了錯很難知道是哪一步壞掉。

判斷一段 JS 有沒有成功，不要只看程式碼長得像不像。請看使用者動作和畫面結果有沒有對上：點了按鈕，文字真的變了嗎？連點兩次，結果還合理嗎？按鈕文字改名後，JS 還找得到它嗎？這些問題很小，但它們會把抽象的「互動」變成可檢查的清單。

let message = "還沒點按鈕";
function clickGreetingButton() {
  message = "你好，歡迎來到 Vibe Coding 道場！";
  console.log(message);
}
console.log(message);
clickGreetingButton();

右鍵檢查：看穿網頁的第一扇門

從今天開始，你可以把任何網頁當成教材。瀏覽器裡的「檢查」（Inspect）功能，會把畫面背後的 HTML 和 CSS 打開給你看。你不用改別人的網站，也不用懂全部工具。第一階段只做三件事：看目前選到哪個 HTML 標籤、看它套用了哪些 CSS、試著理解畫面上的一個按鈕或標題是怎麼被做出來的。

檢查工具最有用的地方，是讓你把「我覺得」變成「我看見」。你看到一個大標題，不只說它很大，而是能看到它可能是 <h1>，字體大小可能來自 font-size。你看到一顆藍色按鈕，不只說它藍，而是能找出背景色寫在哪條 CSS。這種能力會直接提升你跟 AI 的對話品質，因為你描述的不再只是感覺，而是可操作的位置和屬性。

使用檢查時要記住界線。你在自己的瀏覽器裡暫時改文字、改顏色，只是本機預覽，不會真的改到別人的網站。這很適合拿來學習：你可以把按鈕顏色試成紅色，看畫面怎麼變；重新整理後，一切會回到原本狀態。它像草稿紙，不是正式存檔。真的要改自己的網站，仍然要回到你的 HTML、CSS、JS 檔案。

到這裡，你已經有一張拆解網頁的地圖。看到內容，先找 HTML；看到外觀，先找 CSS；看到互動，先找 JS。這個地圖不只用在本章的自我介紹卡片，也會用在後面做遊戲、改 bug、跟 AI 一起生成頁面。純 vibe coder 常常只看結果，你開始能看結構。

練習時可以挑一個很小的目標：只研究頁面上一顆按鈕。先問它的文字在哪個標籤裡，再問它的顏色從哪條規則來，最後問它點下去有沒有觸發 JS。三個答案都找到，你就完成一次完整拆解。不要一開始就想看懂整個網站，先看懂一個零件，才會穩。

const inspectChecklist = [
  "1. 這個畫面元素是什麼 HTML 標籤？",
  "2. 它的顏色和大小來自哪條 CSS？",
  "3. 如果它會動，是哪個事件讓 JS 開始工作？"
];
inspectChecklist.forEach(item => console.log(item));

檢查一下這章