在現代網站開發中，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：加入功能與互動
![[Vue.js] 自訂上傳按鈕](/assets/upload/1583563899683_0.jpg)
![[javascript] 移除陣列物件裡有重複的值的方法](/assets/upload/1584021529831_0.jpg)
