【自學網頁設計】簡述Html、CSS、Javascript之間的差別

簡述Html、CSS、Javascript之間的差別

前言
我從高中的時候開始接觸部落格，從無名小站、痞客邦，到後來的WordPress，最後來到這裡，遊走在各個平台之間。

回想開始寫部落格的時候，只是在上面寫寫簡單的生活心情；後來開始分享一些整理文，有了幾篇文章比較高流量，賺到了一些錢。

漸漸地，網站與部落格開始變成生活的一部分，甚至是生活的重心，於是開始想要把網站變得漂亮一點。
這時候發現，好像還得學學Html、CSS、Javascript……

1.、HTML：負責結構，就像房子的骨架

HTML（HyperText Markup Language）是「超文件標記語言」，嚴格說起來它不是程式語言，而是用來描述「內容」的語言。
簡單來說：HTML 是網頁的骨架。

在網頁上看到的所有東西：

標題（h1～h6）
段落（p）
圖片（img）
連結（a）
表格（table）
清單（ul、ol）

全部都是 HTML 建立的。

所以打開部落格Html，清一色都是這一些。

HTML 的工作是什麼？

決定「有什麼內容」、決定內容的「階層結構」

提供 SEO 所需的語意標籤（例如：header、nav、main、article、footer），起初我覺得沒什麼差，寫文章都是在word上面寫完，然後直接複製貼上到部落格的後台，然後發文。

後來學了一點點html之後，發現這樣做的結果就是裡面的html超亂，除了一堆word垃圾標籤之外，該有的標題、簡述段落的句子、圖片的名稱……等，這些都會影響部落格SEO。

把 HTML 想成：「先決定房子有幾間房、廚房在哪、牆壁在哪」。有點像是預售屋的剖面圖？

HTML 長什麼樣？

<h1>魚油挑選指南</h1>
<p>Omega-3 重點是 DHA + EPA 的含量。</p>
<img src="fishoil.jpg" alt="魚油產品">

HTML 不負責什麼？
不負責樣式（顏色、大小、排版） → CSS處理
不負責互動（按鈕點了會動、跳出視窗）→ CSS+Javascript處理
不負責動畫（滑動、淡入淡出）→ Javascript處理

2. CSS：負責設計，就像室內裝潢

CSS（Cascading Style Sheets）是「層叠樣式表」。
簡單來說：CSS 負責讓網頁變漂亮。
我們看到的所有：
顏色、字體、間距（margin、padding）、版面配置（grid、flex）、動畫（transition、animation）、邊框、陰影、圓角、RWD（手機版、電腦版）全部都是 CSS 做的。

CSS 的工作是什麼？
裝飾 HTML 的內容、改變排版與版面配置、讓網頁更容易閱讀、讓網頁的視覺一致。
如果 HTML 是骨架，那 CSS 就是油漆、地板、燈光、家具。

CSS 看起來怎麼樣？

h1 {
  color: #0b6860;
  font-size: 28px;
}
.yuan-box {
  background: #e8f7f5;
  padding: 16px;
  border-radius: 8px;
}

CSS 不負責什麼？
不會處理資料、不會和伺服器溝通、不會做互動邏輯、不會判斷式（if/else）或運算邏輯 → Javascript處理

3. JavaScript：負責行為，就像房子的電力與設備

JavaScript（通常簡稱 JS）是這三者中 唯一真正的程式語言。簡單來說：JavaScript 負責讓網頁「活起來」。
它能處理：點擊事件（click）、表單提交/驗證、動態載入資料（AJAX / fetch）、動態生成 HTML、動畫、特效、使用 API（例如 YouTube、LINE Login 等）、計算與邏輯判斷、記錄使用者動作（localStorage）

JavaScript 是讓 Web 不只是「頁面」，而是「應用程式」的關鍵。

JavaScript 看起來怎樣？

document.querySelector('#btn').addEventListener('click', function () {
  alert('你按了按鈕！');
});

JavaScript 能做 HTML 和 CSS 做不到的事
讓按鈕點擊後才出現內容
把資料從資料庫抓回來
根據使用者動作更新畫面
做計時器、動畫、表單檢查
做遊戲、視覺效果、互動式圖表
……等，其實就是程式語言（如：python）能做到的那些。

如果 HTML = 骨架、CSS = 裝潢，那 JavaScript 就像是電燈、電視、冷氣、對講機。

三者是如何合作的？

可以把網頁想成一個團隊合作的工程：

HTML：提供內容與結構。（例如：什麼是標題、什麼是圖片、哪些是段落）

CSS：讓內容變美、排版更舒服。（例如：字體、大小、顏色、位置）

JavaScript：加入互動與邏輯。（例如：點擊按鈕要跳出視窗）

沒有 HTML，剩下兩個沒有東西可以操作。

沒有 CSS，網頁會像 90 年代純文字網站。

沒有 JavaScript，網站會像靜態傳單，無互動。

何時要用 HTML？何時用 CSS？何時用 JavaScript？

想新增內容 → 用 HTML
例如：新增段落、圖片、表格、按鈕。

想調整外觀 → 用 CSS
例如：字顏色、背景、RWD、陰影、按鈕樣式。

想讓畫面動起來或有邏輯 → 用 JavaScript
例如：按下按鈕才載入資料、切換頁籤、播放動畫。

寫一個簡單的實際例子：同一段網頁，用三種語言各施其職

假設要做一個「按我一下」的按鈕：

HTML（放按鈕）

<button id="clickMe">按我一下</button>

CSS（讓按鈕變漂亮）

#clickMe {
  padding: 12px 18px;
  background: #0b6860;
  color: white;
  border-radius: 8px;
  border: none;
}

JavaScript（讓按鈕會動）

document.querySelector('#clickMe').onclick = function() {
  alert('你按了按鈕！');
};

結論：HTML、CSS、JavaScript 是網頁世界的三大支柱

HTML 決定「內容是什麼」
CSS 決定「看起來如何」
JavaScript 決定「能不能互動」

理解這三者的差別後，就可以下一個簡單的結論：
要新增內容 → 改 HTML
要美化 → 加 CSS
要互動 → 用 JavaScript