在現代網站開發中，HTML、CSS、JavaScript 被稱為「網頁三巨頭」，是讓網頁能夠被看見、被理解、甚至能與使用者互動的基礎。
許多初學者常會疑問：

「HTML、CSS、JavaScript 的差別到底是什麼？」
「它們之間怎麼合作？」

其實，三者之間的分工非常清楚：
HTML—負責結構
CSS—負責外觀
JavaScript—負責互動

你可以把製作網頁比喻成打造一輛迷你車：

  • HTML 是零件與骨架

  • CSS 是塗裝與外觀

  • JavaScript 則是動力與電控系統

以下讓我們更深入認識這三大核心技術！

 

HTML：網頁的骨架與內容架構

HTML（HyperText Markup Language）**是網頁的骨架，用來告訴瀏覽器網頁裡有哪些元素，例如：

  • 標題

  • 文字段落

  • 圖片

  • 表單

  • 按鈕

HTML 是「標記語言 (Markup)」，並 非 程式語言。

基本語法

HTML 透過標籤 (tag) 來描述內容：

<p>這是一段文字</p>

常見 HTML 標籤結構

標籤 用途說明
<!DOCTYPE html> 宣告 HTML5 標準
<html> HTML 網頁的根元素
<head> 放置設定與引用資源 (CSS/JS)
<body> 放置頁面畫面呈現內容

HTML 架構是否正確，會直接影響：

  • 搜尋引擎排名（SEO）

  • 使用者操作體驗（UX）

 

CSS：美化網頁外觀與排版

CSS（Cascading Style Sheets） 用來定義 HTML 元素呈現的方式，例如：

字型、顏色
版面配置
動畫效果
響應式設計（支援手機與電腦）

語法結構：

h1 {
  color: red;
  font-size: 28px;
}

 

三種引入方式

方式 描述 建議
行內樣式 寫在 HTML 標籤內 不建議
<style> 內部樣式 寫在 <head> 僅適合少量調整
外部 CSS 以 .css 檔案引用 最佳做法

CSS 讓網頁變得好看、有一致性，就像幫小車車披上亮眼的外衣！

 

avaScript：賦予網頁互動能力

JavaScript（JS） 是一種程式語言，用來控制網頁的邏輯與互動行為。
它能處理：

  • 表單驗證

  • 動態內容更新

  • API 串接取得資料

  • 點擊按鈕後觸發動作

簡單互動範例：

function sayHello() {
  alert("Hello!");
}

JavaScript 的生態系非常龐大
例如你可能聽過：

  • React.js

  • Vue.js

  • Angular

  • jQuery

這些都是基於 JavaScript 開發的工具。

 

最後總結：三巨頭如何協作？

你可以把網頁開發想像成建造一棟大樓：

技術 比喻 負責內容
HTML 房子骨架 結構與內容
CSS 室內裝潢 美化與版面
JavaScript 電線與控制系統 互動與功能

三種技術缺一不可，唯有彼此合作才能打造高品質網站！ 

 

想開始學前端？你只需要一個起點！

建議學習順序：

HTML：先學會建骨架
CSS：讓網頁變漂亮
JavaScript：加入功能與互動