建立 2025-02-25 更新 2026-09-11

HTML、CSS、JavaScript 的關係

現代網頁由三層組成：結構（Structure）、樣式（Style）、行為（Behavior）。把它們分開，維護成本會低很多。

技術	角色	典型工作
HTML	結構與語意	標題、段落、圖片、表單、按鈕
CSS	外觀	顏色、排版、字型、動畫
JavaScript	行為	點擊反應、資料載入、表單驗證

好記的比喻

HTML 是骨架，CSS 是衣服與膚色，JavaScript 是動作與反應。改衣服不該動到骨頭；加動畫也不該把結構寫進 JS 裡。

HTML 負責結構、CSS 負責樣式、JavaScript 負責行為，三者一起組成瀏覽器畫面

把 CSS 接到 HTML

有三種寫法，專案裡請以 外部樣式表 為主。

外部樣式表（推薦）

把規則放在獨立的 .css 檔，HTML 只負責引用：

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>範例</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1 class="title">Hello CSS</h1>
</body>
</html>

為什麼推薦外部檔

一份 CSS 可以給很多頁共用，快取後載入更快，也比較好做程式碼審查。href 路徑是相對目前 HTML 檔案的位置。

內部樣式

寫在 <style> 裡，只影響這一頁：

<style>
  body { background-color: #f4f7fb; }
  .title { color: #264de4; }
</style>

適合極短的示範頁，不適合正式網站。

行內樣式

直接寫在標籤的 style 屬性：

<p style="color: red;">這是紅色文字</p>

優先權最高，但最難維護。除了臨時除錯或電子郵件 HTML，請避免大量使用。

把 JavaScript 接到 HTML

CSS 課程只需知道 JS 怎麼掛上，不必先寫複雜邏輯。

外部腳本（推薦）

<script src="script.js" defer></script>

defer 會等 HTML 解析完再執行，避免選不到尚未出現的元素。

內部腳本

<script>
  document.querySelector(".title").textContent = "已套用樣式與腳本";
</script>

放在 </body> 前，或搭配 defer / DOMContentLoaded。

行內事件（不推薦）

<button onclick="alert('點擊了按鈕')">點我</button>

結構與行為混在一起，後續很難測、也很難重用。請改用 addEventListener。

瀏覽器套用順序

讀 HTML，建立 DOM
讀 CSS，建立 CSSOM，再合成 Render Tree
排版（layout）→ 繪製（paint）
執行 JavaScript；JS 若改 class 或 style，會再觸發重排或重繪

常見踩坑

CSS 放在 <head>，JS 盡量 defer 或放在頁尾，畫面才不會閃一下無樣式、或腳本抓不到元素。
同一個屬性被多處指定時，看的是層疊與優先權，不是「誰比較晚載入」這麼單純。

總結

技術	作用	範例
HTML	建立結構	`<p class="lead">Hello</p>`
CSS	設定樣式	`.lead { color: #264de4; }`
JavaScript	增加互動	`document.querySelector(".lead").textContent = "Hi";`

下一步請看語法及選擇器，開始寫第一條 CSS 規則。