網頁基礎 on EricChung的程式勇者村

新手第五步：JavaScript 入門　給你的網頁加上靈魂！

Fri, 17 Apr 2026 00:00:00 +0000

HTML 決定結構、CSS 決定外觀，但這兩樣東西做出來的網頁是死的——不管使用者怎麼點按鈕，頁面都不會有任何反應。

今天要學的 JavaScript（簡稱 JS），就是讓網頁「活起來」的關鍵！

1. JavaScript 能做什麼？

你每天用到的這些功能，全都是 JavaScript 在背後默默運作：

點按鈕後跳出提示訊息
表單輸入錯誤時出現紅色警告
圖片輪播自動切換
滾動頁面時出現動畫效果
即時搜尋、不刷頁更新內容

簡單說：所有「互動」都是 JavaScript 的工作。

2. JavaScript 寫在哪裡？

和 CSS 一樣，有三種方式，最推薦的是獨立 .js 檔案。

最推薦：獨立 JS 檔案

建立 script.js，然後在 HTML 的 </body> 結尾標籤前引入：

1
2
3
4
5


<body>
 <!-- 你的 HTML 內容 -->

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

為什麼放在 </body> 前面？因為這樣瀏覽器會先把頁面畫出來，再執行 JS，使用者不會看到空白頁面等待。

臨時測試：直接寫在 HTML 裡

1
2
3


<script>
 alert("你好！");
</script>

3. 你的第一行 JavaScript

打開 VS Code，建立 script.js，輸入這一行：

1

console.log("哈囉，JavaScript！");

存檔後，打開瀏覽器，按下 F12 開啟開發者工具，點選 「Console（主控台）」 分頁，你就會看到這行文字出現。

console.log() 是 JS 工程師最常用的工具，就像是「印出來看看」，方便除錯。

4. 變數：存放資料的盒子

寫程式就是在處理「資料」。變數就是用來存放這些資料的盒子。

1
2
3


let name = "小明";
let age = 18;
let isStudent = true;

let：宣告一個可以改變的變數（現代 JS 最常用）
const：宣告一個不能改變的常數（例如 PI、固定設定值）
var：舊版寫法，現在不推薦使用

1
2
3
4


const PI = 3.14159; // 圓周率不會變，用 const

let score = 80; // 分數可能會變，用 let
score = 95; // 改變 score 的值，沒問題

5. 資料型別：變數裡能放什麼？

型別	說明	範例
`String`	文字（用引號包起來）	`"你好"` / `'Hello'`
`Number`	數字（整數或小數）	`42` / `3.14`
`Boolean`	布林值（真或假）	`true` / `false`
`Array`	陣列（一串資料）	`["蘋果", "香蕉", "橘子"]`
`Object`	物件（一組相關資料）	`{ name: "小明", age: 18 }`

6. 函式：可以重複使用的程式積木

當你有一段程式碼需要重複執行，就把它包成函式（Function）。

1
2
3
4
5
6


function greet(name) {
 console.log("你好，" + name + "！歡迎來到我的網站。");
}

greet("小明"); // 你好，小明！歡迎來到我的網站。
greet("阿花"); // 你好，阿花！歡迎來到我的網站。

function 關鍵字：宣告一個函式
name：括號裡的是「參數」，呼叫時帶入不同值
呼叫函式時不用再寫 function，直接寫函式名稱加括號

7. 操作網頁元素：DOM

這才是 JavaScript 最重要的能力！DOM（文件物件模型） 讓你用 JS 讀取或修改網頁上任何元素。

1
2
3
4
5
6
7
8


// 抓取元素
const title = document.getElementById("main-title");

// 修改內容
title.textContent = "標題被 JS 改掉了！";

// 修改樣式
title.style.color = "red";

HTML：

1

<h1 id="main-title">原本的標題</h1>

執行後，頁面上的標題會直接變成「標題被 JS 改掉了！」，變成紅色。

8. 事件監聽：讓網頁回應使用者

光是修改元素還不夠，我們要讓網頁在使用者做某件事時才觸發，這就是「事件監聽」。

1
2
3
4
5


const btn = document.getElementById("my-btn");

btn.addEventListener("click", function() {
 alert("你點了按鈕！");
});

HTML：

1

<button id="my-btn">點我看看</button>

addEventListener 的意思：「監聽 my-btn 這個元素的 click（點擊） 事件，一旦發生，就執行後面這個函式。」

常見的事件類型：

click：點擊
mouseover：滑鼠移入
keydown：按下鍵盤
submit：表單送出

9. 給新手的實戰練習：計數器

來做一個點一下數字就加一的計數器，這個小專案會用到今天學的所有概念！

HTML（index.html）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


<!DOCTYPE html>
<html>
<head>
 <title>計數器</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <div class="counter">
 <h1 id="count">0</h1>
 <button id="increase-btn">＋ 加一</button>
 <button id="reset-btn">重置</button>
 </div>
 <script src="script.js"></script>
</body>
</html>

CSS（style.css）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33


body {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 100vh;
 background-color: #f0f4f8;
 font-family: Arial, sans-serif;
}

.counter {
 text-align: center;
}

#count {
 font-size: 80px;
 color: #2c3e50;
 margin: 0;
}

button {
 font-size: 18px;
 padding: 10px 30px;
 margin: 10px;
 cursor: pointer;
 border: none;
 border-radius: 8px;
 background-color: #3498db;
 color: white;
}

button:hover {
 background-color: #2980b9;
}

JavaScript（script.js）：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


let count = 0;
const countDisplay = document.getElementById("count");

document.getElementById("increase-btn").addEventListener("click", function() {
 count = count + 1;
 countDisplay.textContent = count;
});

document.getElementById("reset-btn").addEventListener("click", function() {
 count = 0;
 countDisplay.textContent = count;
});

打開瀏覽器，你現在擁有一個有完整互動功能的計數器了！

結語：網頁有靈魂了！

恭喜你學完了前端三劍客的最後一塊拼圖：

HTML — 結構
CSS — 外觀
JavaScript — 互動

這三樣東西組合在一起，你已經具備了做出任何靜態網頁的能力。

接下來你可以做什麼？ 光有這三樣還不夠，現實世界的前端開發都是用框架在加速開發。下一篇我們來聊聊目前最熱門的前端框架 Vue.js，看看它如何讓你寫更少的程式碼、做出更強大的功能！

準備好進入框架的世界了嗎？下一篇見！

新手第三步：CSS 入門　讓你的網頁從黑白變彩色！

Thu, 16 Apr 2026 00:00:00 +0000

上一篇我們學了 HTML，做出了一個「能動但很醜」的網頁。今天我們要學 CSS，讓你的網頁從工地毛胚屋，搖身一變成精心裝潢的新家！

1. 什麼是 CSS？

CSS 的全名是 階層式樣式表（Cascading Style Sheets）。

繼續用蓋房子的比喻：

HTML 是鋼筋牆壁，決定結構在哪裡。
CSS 就是油漆、壁紙、燈光，決定每個地方長什麼樣子。

一句話總結：HTML 說「有什麼」，CSS 說「長什麼樣」。

2. CSS 怎麼接上 HTML？

你有三種方式可以把 CSS 加進網頁，新手最推薦的是 外部引入：

方法一：外部引入（最推薦）

新建一個 style.css 檔案，然後在 HTML 的 <head> 裡加一行：

1
2
3


<head>
 <link rel="stylesheet" href="style.css">
</head>

這樣 CSS 和 HTML 分開管理，最乾淨也最好維護。

方法二：直接寫在標籤裡（偶爾用）

1

<h1 style="color: red;">這是紅色標題</h1>

只適合臨時測試，正式專案不建議這樣寫，因為改起來很痛苦。

3. CSS 的基本語法長什麼樣？

CSS 的寫法超級固定，記住這個公式就對了：

1
2
3


選擇器 {
 屬性: 值;
}

實際範例：

1
2
3
4


h1 {
 color: blue;
 font-size: 32px;
}

這段 CSS 的意思是：「把所有 <h1> 標題的文字顏色設成藍色，字體大小設成 32px」。

4. 三大「選擇器」你一定要學

選擇器就是告訴 CSS「我要改的是哪個 HTML 元素」。

標籤選擇器

1
2
3


p {
 color: gray;
}

這樣會把所有 <p> 段落都變成灰色文字。

Class 選擇器（最常用）

1

<p class="highlight">這段文字很重要</p>

1
2
3
4


.highlight {
 background-color: yellow;
 font-weight: bold;
}

在 HTML 元素上加 class="名稱"，然後 CSS 用 .名稱 來選取。一個 class 可以用在很多元素上，超級靈活！

ID 選擇器

1

<div id="header">網站標題區</div>

1
2
3
4


#header {
 background-color: black;
 color: white;
}

ID 在一個頁面只能用一次，比 class 更「專屬」。

口訣記憶： 標籤選全部、class 選一類、ID 選唯一。

5. 新手最常用的 CSS 屬性

只要學會這幾個，你馬上就能把網頁整理得有模有樣：

屬性	用途	範例
`color`	文字顏色	`color: #333333;`
`background-color`	背景顏色	`background-color: #f0f0f0;`
`font-size`	字體大小	`font-size: 18px;`
`font-weight`	字體粗細	`font-weight: bold;`
`text-align`	文字對齊	`text-align: center;`
`margin`	元素外側的空白	`margin: 20px;`
`padding`	元素內側的空白	`padding: 10px;`
`border`	外框線	`border: 1px solid black;`
`width` / `height`	寬度 / 高度	`width: 100%;`

6. 最讓新手頭痛的東西：Box Model（盒子模型）

每一個 HTML 元素，在 CSS 眼中都是一個**「盒子」**。這個盒子由四層組成，從內到外分別是：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


┌─────────────────────────────┐
│ margin（外距） │
│ ┌───────────────────────┐ │
│ │ border（外框） │ │
│ │ ┌─────────────────┐ │ │
│ │ │ padding（內距） │ │ │
│ │ │ ┌───────────┐ │ │ │
│ │ │ │ content │ │ │ │
│ │ │ │ （內容） │ │ │ │
│ │ │ └───────────┘ │ │ │
│ │ └─────────────────┘ │ │
│ └───────────────────────┘ │
└─────────────────────────────┘

content：你的文字、圖片等實際內容。
padding：內容到邊框之間的距離（像是包裝紙）。
border：盒子的外框線。
margin：這個盒子和其他盒子之間的距離（像是盒子放在桌上，和旁邊盒子的間距）。

7. 給新手的實戰練習

跟著做一次，絕對比看十遍有效！

第一步：建立 HTML 檔案 index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<!DOCTYPE html>
<html>
<head>
 <title>我的 CSS 練習</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1 id="main-title">我的自我介紹</h1>
 <p class="intro">大家好，我正在學習前端開發！</p>
 <p class="intro">我的目標是做出一個超帥的個人網站。</p>
</body>
</html>

第二步：建立 CSS 檔案 style.css

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


body {
 background-color: #f5f5f5;
 font-family: Arial, sans-serif;
 padding: 40px;
}

#main-title {
 color: #2c3e50;
 text-align: center;
 border-bottom: 3px solid #3498db;
 padding-bottom: 10px;
}

.intro {
 color: #555;
 font-size: 18px;
 line-height: 1.8;
 margin: 10px 0;
}

第三步：用瀏覽器打開 index.html，看看和之前純 HTML 的差別有多大！

結語：骨架穿上衣服了！

恭喜你！你已經掌握了 CSS 最核心的觀念。現在你知道怎麼改顏色、改大小、加邊框、控制間距——這些就是網頁排版的基本功。

接下來你可以做什麼？ 現在的網頁還是「垂直堆疊」，元素一個壓一個。下一篇我們要學 CSS Flexbox，它是現代網頁排版的神器，讓你能輕鬆做出「左右並排」、「置中對齊」這些漂亮的版面！

準備好打破垂直限制了嗎？下一篇見！

新手第二步：HTML 入門　3 分鐘掌握網頁設計的骨架！

Sun, 28 Dec 2025 00:00:00 +0000

如果你想學做網頁，第一個要認識的就是 HTML。別把它想得太複雜，它其實就是幫網頁內容「貼標籤」而已！

1. 什麼是 HTML？

HTML 的全名是超文本標記語言。簡單來說，它就像是一份**「網頁的說明書」**。

想像你在蓋房子：

HTML 就是「鋼筋」與「牆壁」，決定哪裡是門、哪裡是窗戶（決定結構）。
CSS 就是「油漆」與「家具」，決定房子好不好看（決定外觀）。

2. 標籤（Tag）：HTML 的基本組成

寫 HTML 的過程，就是把文字用**「標籤」**包起來。標籤通常是成對的，像是一對括號：

<標籤名稱> 內容 </標籤名稱>

<h1>內容</h1>：這是大標題。
<p>內容</p>：這是普通的段落文字。
<a>內容</a>：這是超連結。

3. 網頁的基本長相

每一張網頁都有一個標準的「骨架」，你可以直接複製這段代碼到 VS Code 試試看：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!DOCTYPE html>
<html>
<head>
 <title>我的第一個網頁</title>
</head>
<body>
 <h1>哈囉，世界！</h1>
 <p>這是我用 HTML 寫的第一句話。</p>
 <a href="[https://google.com](https://google.com)">點我連到 Google</a>
</body>
</html>

4. 三個最常用的標籤

新手只要先記住這三個，就能做出最基本的網頁了：

標題標籤 (<h1> 到 <h6>)：<h1> 是最重要的標題（通常一頁只有一個），<h6> 是層級最小的標題。
圖片標籤 (<img>)：用來在網頁中放入照片或圖示。
- 範例：<img src="圖片網址">
超連結標籤 (<a>)：網頁的靈魂！用來連到別的網站或是自己的其他頁面。
- 範例：<a href="網址">點我開啟新視窗</a>

5. 為什麼要學 HTML？

很多人問：「現在排版軟體這麼多，為什麼還要學寫代碼？」原因有這三個：

它是所有網頁的基礎：不管是專業工程師還是數位行銷，看不懂 HTML 就無法深入調整網頁內容。
容易上手：HTML 沒有複雜的數學邏輯，只要像填空一樣把內容塞進標籤裡，成就感很高。
即時回饋：這是學習程式最快樂的地方——寫完存檔，回到瀏覽器重新整理，你剛才寫的東西就會立刻跳出來！

6. 深入一點點：標籤裡的「小祕密」

剛才提到了標籤，但標籤其實可以攜帶更多「額外資訊」，我們稱之為 屬性 (Attributes)。

屬性怎麼寫？

屬性永遠寫在「開頭標籤」裡面，長得像這樣：屬性名稱="屬性值"。

以圖片 <img> 為例：
1

<img src="my-dog.jpg" alt="我的小狗在公園跑步">
- src (source)：告訴瀏覽器圖片在哪裡。
- alt (alternative text)：萬一圖片跑不出來，顯示這段文字告訴使用者這本來是什麼。
以超連結 <a> 為例：
1

<a href="[https://google.com](https://google.com)" target="_blank">另開視窗去搜尋</a>
- target="_blank"：這是一個超實用的屬性，可以讓連結在「新分頁」開啟，不會把原本的網頁蓋掉。

7. 寫 HTML 的好習慣：語意化

雖然 HTML 標籤很多，但不要因為想讓字變大就亂用 <h1>。

SEO (搜尋引擎優化)：如果你正確使用標籤（例如文章內容用 <p>，主標題用 <h1>），Google 的機器人會更喜歡你的網站。
閱讀順序：對視障人士來說，正確的標籤能讓語音朗讀軟體順利讀出網頁內容。

8. 給新手的實戰練習

看完文章，不動手寫是學不會的！請跟著以下步驟做：

打開 VS Code。
新建檔案，存檔為 practice.html。
輸入 ! 並按 Tab 鍵（這是 VS Code 的神奇快捷鍵，會幫你生出骨架）。

在 <body> 標籤中間加入以下內容：

1
2
3
4
5


<h1>我的自我介紹</h1>
<p>大家好，我正在學習網頁開發！</p>
<img src="[https://via.placeholder.com/150](https://via.placeholder.com/150)" alt="測試圖片">
<br>
<a href="[https://facebook.com](https://facebook.com)">我的臉書</a>

存檔並用瀏覽器打開檔案，看看你的成品！

結語：你已經邁出第一步了！

HTML 是網頁世界的敲門磚。雖然現在看起來只是黑白文字，但只要你掌握了這些「標籤」的邏輯，你已經贏過一半以上的人了。

接下來你可以做什麼？ 當你覺得黑白網頁太單調時，就是學習 CSS (樣式表) 的時候了！CSS 會教你怎麼把字變顏色、怎麼排版、怎麼讓網頁看起來像專業公司做的。

準備好進入色彩繽紛的網頁世界了嗎？我們下一篇見！