【自學網頁設計】簡述Html、CSS、Javascript之間的差別
📘 簡述 HTML、CSS、JavaScript 之間的差別
前言：從部落格開始接觸網頁
我從高中的時候開始接觸部落格，從無名小站、痞客邦，到後來的 WordPress，最後來到 Blogger，遊走在各個平台之間。
一開始寫部落格，只是在上面寫寫簡單的生活心情。後來開始分享整理文，有幾篇文章流量比較高，也因此賺到了一些收入。
漸漸地，網站與部落格開始變成生活的一部分，甚至變成生活的重心。於是就開始想：如果能把網站變得漂亮一點、好讀一點，是不是會更好？
這時候才發現，原來想要調整網頁，就會碰到這三個關鍵字： HTML、CSS、JavaScript。
🏠 用房子比喻三者的關係
初學時最容易搞混的地方，就是不知道 HTML、CSS、JavaScript 到底各自負責什麼。
可以先用「房子」來理解：
| 技術 | 負責內容 | 房子比喻 |
|---|---|---|
| HTML | 網頁結構與內容 | 房子的骨架、牆壁、房間配置 |
| CSS | 外觀與排版設計 | 油漆、地板、燈光、家具、裝潢 |
| JavaScript | 互動與邏輯行為 | 電燈開關、冷氣、電視、對講機 |
HTML 決定有什麼，CSS 決定長怎樣，JavaScript 決定會不會動。
🔹 1. HTML：負責結構，就像房子的骨架
HTML 是什麼？
HTML，全名是 HyperText Markup Language，中文常翻成「超文字標記語言」。
嚴格來說，HTML 不是程式語言，而是一種用來描述網頁內容與結構的標記語言。
簡單來說： HTML 是網頁的骨架。
HTML 建立哪些內容？
在網頁上看到的很多東西，都是由 HTML 建立的。
- 標題：<h1> 到 <h6>
- 段落：<p>
- 圖片：<img>
- 連結：<a>
- 表格：<table>
- 清單：<ul>、<ol>
所以當你打開部落格文章的 HTML 原始碼時，常常會看到這些標籤。
HTML 的工作是什麼？
HTML 主要負責兩件事：
- 決定網頁有哪些內容。
- 決定內容之間的階層結構。
它也能提供 SEO 所需的語意標籤，例如： <header>、 <nav>、 <main>、 <article>、 <footer>。
HTML 範例
HTML 不負責什麼？
- 不負責樣式：例如顏色、大小、排版，這些交給 CSS。
- 不負責互動：例如按鈕點了跳出視窗，這些交給 JavaScript。
- 不負責動畫邏輯：例如依照使用者操作改變畫面，這些通常交給 JavaScript。
🎨 2. CSS：負責設計，就像室內裝潢
CSS 是什麼？
CSS，全名是 Cascading Style Sheets，中文常翻成「層疊樣式表」。
簡單來說： CSS 負責讓網頁變漂亮。
CSS 可以控制什麼？
我們看到的許多視覺效果，幾乎都是 CSS 處理的。
- 顏色
- 字體
- 字體大小
- 間距，例如 margin、padding
- 版面配置，例如 grid、flex
- 邊框、陰影、圓角
- RWD 響應式設計，也就是手機版、平板版、電腦版顯示
- 基礎動畫，例如 transition、animation
CSS 的工作是什麼？
CSS 的工作是裝飾 HTML 的內容，並調整排版與視覺呈現。
如果 HTML 是房子的骨架，那 CSS 就像油漆、地板、燈光、家具與裝潢。
CSS 範例
CSS 不負責什麼？
- 不會處理資料庫資料。
- 不會和伺服器溝通。
- 不負責複雜互動邏輯。
- 不適合做判斷式，例如 if / else。
這些通常會交給 JavaScript 處理。
⚡ 3. JavaScript：負責行為，就像房子的電力與設備
JavaScript 是什麼？
JavaScript 通常簡稱 JS，是 HTML、CSS、JavaScript 三者中，最接近一般認知中「程式語言」的角色。
簡單來說： JavaScript 負責讓網頁活起來。
JavaScript 可以做什麼？
JavaScript 可以處理網頁上的互動與邏輯。
- 點擊事件，例如 click
- 表單提交與驗證
- 動態載入資料，例如 AJAX、fetch
- 動態生成 HTML
- 動畫與特效
- 使用 API，例如 YouTube、LINE Login 等
- 計算與邏輯判斷
- 記錄使用者動作，例如 localStorage
JavaScript 是讓網站從「靜態頁面」變成「互動式應用程式」的重要關鍵。
JavaScript 範例
JavaScript 能做 HTML 和 CSS 做不到的事
- 讓按鈕點擊後才出現內容。
- 把資料從伺服器或 API 抓回來。
- 根據使用者動作更新畫面。
- 做計時器、表單檢查與互動效果。
- 製作遊戲、視覺效果、互動式圖表。
如果 HTML 是骨架、CSS 是裝潢，那 JavaScript 就像電燈、電視、冷氣、對講機與各種可以操作的設備。
🤝 三者是如何合作的？
可以把網頁想成一個團隊合作的工程，每個角色都有自己的工作。
- HTML：提供內容與結構，例如標題、圖片、段落。
- CSS：讓內容變漂亮，調整字體、大小、顏色與位置。
- JavaScript：加入互動與邏輯，例如點擊按鈕跳出視窗。
沒有 CSS，網頁會像很早期的純文字網站。
沒有 JavaScript，網站就比較像靜態傳單，互動性會少很多。
🧭 什麼時候用 HTML、CSS、JavaScript？
判斷要用哪一個，其實可以從「你想做什麼」開始。
| 想做的事 | 使用技術 | 例子 |
|---|---|---|
| 新增內容 | HTML | 新增段落、圖片、表格、按鈕。 |
| 調整外觀 | CSS | 修改顏色、背景、陰影、RWD、按鈕樣式。 |
| 加入互動 | JavaScript | 切換頁籤、按鈕事件、表單驗證、載入資料。 |
🧪 實際例子：做一個「按我一下」按鈕
假設我們要做一個按鈕，三種技術可以各自負責不同部分。
HTML：放按鈕
CSS：讓按鈕變漂亮
JavaScript：讓按鈕會互動
顯示效果示意
✅ 結論：HTML、CSS、JavaScript 是網頁世界的三大支柱
理解 HTML、CSS、JavaScript 的差別後，就會比較知道修改網頁時該從哪裡下手。
CSS 決定「看起來如何」
JavaScript 決定「能不能互動」
- 要新增內容：改 HTML。
- 要美化版面：加 CSS。
- 要互動功能：用 JavaScript。
對部落格作者來說，不一定要一開始就全部精通，但只要能分清楚三者的角色，就已經踏進網頁自訂與版面優化的大門了。
留言
張貼留言