---
# System prepended metadata

title: 前言與環境介紹

---

# 前言與環境介紹

## 網站應用介紹

### 網頁的世界無所不在

每天我們都在與「網頁」互動。
從打開 Google 搜尋資料、滑動社群網站、線上報名活動、查詢成績、購物結帳——
這些不同外觀與功能的畫面，其實都建立在同一種語言之上：**HTML**。

![_html-__css-__js__ui_szkgefjdhau3ul79zzlc_1](https://hackmd.io/_uploads/H1DDKGb1bl.png)

HTML，全名 **HyperText Markup Language（超文字標記語言）**，
是所有網站的基礎。它負責描述網頁內容的**結構**與**語意**，
讓瀏覽器知道每一段文字、圖片或按鈕該如何呈現。

> 💡 小知識
> 「Markup」的意思是「加上標記」。
> HTML 透過各種標籤（Tag）為文字加上語法說明，
> 就像幫內容寫了一份詳細的「閱讀說明書」。

---

### 從 HTML 開始的網站開發世界

在現代網頁設計中，想要打造一個完整的網站，
我們必須同時理解三種語言：**HTML、CSS、JavaScript**。

- **HTML**（HyperText Markup Language）負責內容的結構與資訊標記；
- **CSS**（Cascading Style Sheets）負責頁面的外觀與排版；
- **JavaScript** 則賦予網站互動性與動態行為。

三者共同構成前端開發的基礎，缺一不可。

> 📘 圖解建議：
> 三者關係示意圖（HTML ＝骨架、CSS ＝外觀、JavaScript ＝行為）
>
> 旁註：「圖中 5 與 3 代表 HTML5 與 CSS3，為目前主流版本。」

---

### 網站的三大基礎

| 功能 | 語言           | 主要任務                 |
| ---- | -------------- | ------------------------ |
| 結構 | **HTML**       | 定義「網頁上有什麼內容」 |
| 外觀 | **CSS**        | 決定「內容長什麼樣子」   |
| 行為 | **JavaScript** | 負責「互動與動態功能」   |

![中網站三大基礎](https://hackmd.io/_uploads/H1VnsPMEbx.jpg)

> 圖片上的 5 與 3 分別是 HTML5 與 CSS3，只是顯示目前使用的主流版本而已。

---

### HTML：建築物的骨架

HTML 是整個網站的骨架。
它定義了標題、段落、清單、圖片、表格等內容的位置與層次。
如果把網站比喻成一棟房子，那麼 **HTML 就是房屋的鋼筋結構**。
沒有它，畫面上什麼都看不到。
![大HTML](https://hackmd.io/_uploads/rJQlZuMEWg.jpg)

---

### CSS：網站的外觀與風格

有了骨架之後，房子還需要裝潢。
**CSS（階層式樣式表）** 就負責這個部分——
它讓網頁擁有顏色、字型、背景與版面配置。

沒有 CSS，網頁雖然能顯示內容，但會像施工現場的毛胚屋：
雜亂、單調、難以閱讀。
![大CSS](https://hackmd.io/_uploads/BkTZZdMVbx.jpg)

---

### JavaScript：讓網頁「活起來」

房子有了結構與外觀，還需要電線與開關才能運作。
**JavaScript（JS）** 就扮演這個角色。
它讓網站能夠響應使用者的操作，處理表單送出、按鈕點選、即時通知或登入註冊。

JavaScript 讓網頁從「靜態展示」變成「互動體驗」。
![大JAVASCRIPT](https://hackmd.io/_uploads/S1WfZ_zNWl.jpg)

---

### 三者的完美協作

| 元素           | 沒有時的結果             |
| -------------- | ------------------------ |
| **HTML**       | 看不到內容（沒有骨架）   |
| **CSS**        | 外觀醜陋難讀（沒有裝潢） |
| **JavaScript** | 無法互動（沒有電力）     |

三者結合，才能構成一個功能齊全的現代網站。

![_- visual selection](https://hackmd.io/_uploads/Bk4jdMW1bg.png)

> 🎯 重點提示
> HTML 建立內容 → CSS 美化外觀 → JavaScript 讓它動起來。

---

### 從基礎語言到框架

當網站變得越來越複雜，
開發者開始使用 **框架（Framework）** 來加速製作流程。
像是 React、Vue、Angular 等框架，
其實都是在 **HTML、CSS、JavaScript** 之上進一步封裝與擴充。

它們讓開發更有效率、更具組織性，但核心仍是相同的三種語言。

---

### 小案例：線上報名頁面

以「線上報名表」為例：

- **HTML** 建立欄位與按鈕（姓名、Email、送出鍵）
- **CSS** 設計版面、顏色與字型
- **JavaScript** 驗證資料並處理送出事件

> ✨ 小結論
> HTML 是一切的起點。
> 沒有它，網站沒有骨架、內容無法顯示，
> 其他語言也就失去了依附的基礎。

---

### 瀏覽器如何呈現網頁

當我們完成 HTML 編寫後，

1. 瀏覽器會讀取檔案（例如 `index.html`）
2. 將內容解析成結構（DOM Tree）
3. 再依照 CSS 與 JavaScript 的設定呈現畫面

![_- visual selection](https://hackmd.io/_uploads/H1VLNMWJZe.png)

---

### HTML：不只是程式，而是語言

HTML 並不僅僅是程式碼，它是一種「**資訊結構的語言**」。
懂得使用 HTML，就能清楚表達內容之間的層次與意圖。

例如：

```html
<h1>校園音樂祭報名表</h1>
<p>歡迎各社團同學踴躍參加！</p>
```

這不只是文字，而是一個語意明確的結構：

- `<h1>` 表示主要標題（整頁的主題）
- `<p>` 表示段落說明

當瀏覽器讀取這些標籤時，它知道應該如何呈現層級與樣式；
當搜尋引擎讀取時，它也能理解網頁的邏輯與內容。

---

> 🧩 小練習
> 試著想想你最常使用的網站（例如購物網站或學校入口網），
> 裡面有哪些元素可能是用 HTML、CSS、或 JavaScript 實現的？
> 嘗試打開瀏覽器右鍵「檢查」，觀察它們的結構吧！

<br/>

## 開發環境配置

### 一、準備工作

1. 瀏覽器：建議使用 Google Chrome（最普遍、支援開發者工具）。
2. 文字編輯器：Visual Studio Code（簡稱 VS Code）。
3. 外掛程式：安裝「Live Server」以便即時預覽網頁。

> 💡 為什麼不用 Word？
> Word 是文字排版軟體，不會產生真正的 HTML。
> 我們需要的是純文字編輯環境。

#### VS Code 介紹與設定

為什麼選擇 VS Code？

- 跨平台（Windows / macOS / Linux）
- 外掛生態完整、文件多、社群大
- 輕量卻夠專業：從入門到進階都能用同一套工具

#### 安裝與啟動

1. 前往官網下載安裝檔：`https://code.visualstudio.com/`
2. 安裝完成後開啟 VS Code。

#### 安裝 Live Server 外掛

1. 點擊左側的「擴充功能」圖示（或按 `Ctrl+Shift+X` / `Cmd+Shift+X`）
2. 在搜尋框中輸入「Live Server」
3. 找到由 Ritwick Dey 開發的 Live Server
4. 點擊「安裝（Install）」按鈕
5. 安裝完成後即可使用

> 💡 提示
> Live Server 可以讓你的網頁在儲存後自動重新整理，
> 不需要手動按 F5，大幅提升開發效率！

#### 安裝示意圖
![截圖 2026-01-05 清晨6.10.17](https://hackmd.io/_uploads/rkSdSwu4bx.png)


---

### 二、建立第一個專案資料夾

1. 新建一個資料夾，例如 `my-first-website`
2. 打開 VS Code，選擇「開啟資料夾」
3. 在裡面新增一個檔案 `index.html`
4. 在檔案中輸入以下內容：

```html
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一個網頁</title>
  </head>
  <body>
    <h1>Hello HTML!</h1>
    <p>這是我人生第一個網頁。</p>
  </body>
</html>
```

> 也可以在 index.html 檔案內敲擊 「!」 之後點選 Enter，系統會自動彈出基礎語法
>
> 5. 按右下角「Go Live」按鈕（Live Server 啟動）
> 6. 瀏覽器就會自動開啟你的網頁 🎉

> 📷 圖片建議：
>
> - VS Code 專案結構截圖
> - Live Server 啟動畫面截圖

#### 開啟資料夾示意圖

![開啟資料夾示意圖](https://hackmd.io/_uploads/S1rOBXWy-x.png)

#### 新增 index.html 檔案

![截圖 2025-10-31 凌晨1.53.36](https://hackmd.io/_uploads/ryDV8X-ybx.png)

#### 敲打 `!` 之後會跳出提示，此時按下鍵盤上的 Enter 按鈕，可快速建立範本

![截圖 2025-10-31 凌晨1.54.28](https://hackmd.io/_uploads/rknv87bJbx.png)

#### 點選右下角的 Go Live 按鈕

![截圖 2025-10-31 凌晨1.58.45](https://hackmd.io/_uploads/Syv-dmZJWl.png)

#### 操作完以上操作，將啟動 HTML 頁面的展示

![截圖 2025-10-31 凌晨2.01.15](https://hackmd.io/_uploads/r1DmumZy-e.png)

---

### 三、常見新手錯誤

| 錯誤                  | 原因                              | 修正方式                                                           |
| --------------------- | --------------------------------- | ------------------------------------------------------------------ |
| 中文亂碼              | 沒有設定 `<meta charset="UTF-8">` | 加上那行宣告                                                       |
| 頁面全白              | 忘記儲存或 HTML 結構錯誤          | 使用「開發者工具」查看 Console                                     |
| 按 Live Server 沒反應 | 尚未安裝外掛或是沒有開啟資料夾    | 在 VS Code 擴充功能中搜尋「Live Server」並安裝，或是補充開啟資料夾 |

<br/>

## 認識瀏覽器與原始碼結構

### 一、瀏覽器的角色：不只是看網頁的工具

當我們打開一個網站，其實正在進行一場「溝通」。
開發者提供 HTML、CSS、JavaScript 三種資料，
瀏覽器（Browser）就像一位翻譯員，會解析這些程式碼，
再把它們組合成使用者能理解的視覺畫面。

> 💡 小知識
> HTML → 決定有哪些內容
> CSS → 決定外觀長相
> JavaScript → 決定行為互動

簡單來說，瀏覽器是一台 **「即時把程式翻譯成畫面」的引擎**。
如果 HTML 是文字劇本，瀏覽器就是導演。

---

### 二、瀏覽器的基本構造

主流瀏覽器（Chrome、Edge、Firefox、Safari）都包含下列核心組件：

| 組件名稱                         | 功能                                    |
| -------------------------------- | --------------------------------------- |
| **解析器（Parser）**             | 負責讀取並理解 HTML / CSS / JS 程式碼。 |
| **渲染引擎（Rendering Engine）** | 將結構轉換為實際畫面。                  |
| **JavaScript 引擎**              | 負責執行互動與邏輯。                    |
| **開發者工具（DevTools）**       | 協助檢查結構、除錯與測試。              |

![_- visual selection (1)](https://hackmd.io/_uploads/BJ0ls7bk-g.png)

---

### 三、什麼是 DOM（Document Object Model）

當瀏覽器讀取 HTML 後，會在記憶體中建立一棵**文件物件模型（DOM Tree）**。
它像一棵家譜樹，代表頁面上所有標籤之間的層級關係。

舉例：

```html
<html>
  <body>
    <h1>歡迎光臨</h1>
    <p>這是第一段文字。</p>
  </body>
</html>
```

會被轉換成：

```
html
 └─ body
     ├─ h1
     └─ p
```

> 📘 小結
> DOM 是 HTML 結構在瀏覽器記憶體中的「樹狀表現方式」，
> 也是 JavaScript 操作網頁內容時的基礎。

---

### 四、如何查看網頁原始碼

除了撰寫自己的 HTML，我們也能「觀摩」別人的作品。
幾乎所有瀏覽器都能直接查看任何網頁的原始碼：

#### 🪄 方法一：檢視原始碼（View Page Source）

- 在網頁上 **右鍵 → 檢視原始碼**
- 你會看到純文字的 HTML 文件。

#### 🧩 方法二：使用開發者工具（Inspect）

- 在網頁上 **右鍵 → 檢查（Inspect）**
- 會開啟「開發者工具（DevTools）」視窗
- 點選「Elements」分頁，可以即時看到結構與樣式。

![截圖 2025-10-31 凌晨2.15.53](https://hackmd.io/_uploads/HJMdiQ-ybx.png)

#### 🔍 DevTools 小任務

1. 打開 [Google 首頁](https://www.google.com)
2. 右鍵 → 檢查（Inspect）
3. 找到 `<title>`、`<meta>`、`<input>` 標籤
4. 嘗試改變 `<title>` 的文字，觀察畫面是否即時更新

> 💬 延伸說明
> DevTools 是前端開發者的「放大鏡」，
> 它能即時修改、測試，甚至幫你發現錯誤訊息。

![截圖 2025-10-31 凌晨2.17.41](https://hackmd.io/_uploads/HyTk3Q-Jbg.jpg)

---

### 五、HTML 文件的結構層級

每個 HTML 檔都有一定的組成規則。
以下是最基本的文件骨架：

```html
<!DOCTYPE html>
<html lang="zh-Hant">
  <head>
    <meta charset="UTF-8" />
    <title>我的第一個網頁</title>
  </head>
  <body>
    <h1>哈囉，HTML！</h1>
  </body>
</html>
```

| 區塊              | 說明                                         |
| ----------------- | -------------------------------------------- |
| `<!DOCTYPE html>` | 告訴瀏覽器這是 HTML5 文件。                  |
| `<html>`          | 整個網頁的最外層元素。                       |
| `<head>`          | 放置設定與資訊（標題、字元編碼、SEO 資料）。 |
| `<body>`          | 放置實際要顯示的內容。                       |

![HTML 結構](https://hackmd.io/_uploads/r1Qo7OGVbg.png)

---

### 六、從觀察到創造

能看懂結構，就能修改；能修改，就能創造。
理解 HTML 的層次與瀏覽器的運作邏輯，
是從「使用網頁」到「製作網頁」的第一步。

> ✨ 小練習
>
> 1. 開啟你的瀏覽器，進入任意網站。
> 2. 打開開發者工具，觀察 `<header>`、`<section>`、`<footer>` 等語意化標籤。
> 3. 思考：這個網頁的結構是怎麼設計的？哪些部分對應 HTML 的層級？

<br/>

## 課後習題

### 📝 選擇練習題：前言與環境介紹

**1. 網站開發的三大基礎語言是什麼？**

- A) HTML、Python、Java
- B) HTML、CSS、JavaScript
- C) CSS、PHP、MySQL
- D) JavaScript、Ruby、C++

<details>
<summary>點選查看答案</summary>
答案: B) HTML、CSS、JavaScript
</details>

---

**2. 下列對 HTML、CSS、JavaScript 的描述，何者正確？**

- A) HTML 負責外觀，CSS 負責結構，JavaScript 負責互動
- B) HTML 負責結構，CSS 負責外觀，JavaScript 負責互動
- C) HTML 負責互動，CSS 負責結構，JavaScript 負責外觀
- D) 三者功能完全相同，可互相替代

<details>
<summary>點選查看答案</summary>
答案: B) HTML 負責結構，CSS 負責外觀，JavaScript 負責互動
</details>

---

**3. 推薦新手使用哪個文字編輯器來撰寫 HTML？**

- A) Microsoft Word
- B) 記事本
- C) Visual Studio Code
- D) Excel

<details>
<summary>點選查看答案</summary>
答案: C) Visual Studio Code
</details>

---

**4. Live Server 外掛的主要功能是什麼？**

- A) 壓縮圖片
- B) 即時預覽網頁，自動重新整理
- C) 修正語法錯誤
- D) 美化程式碼

<details>
<summary>點選查看答案</summary>
答案: B) 即時預覽網頁，自動重新整理
</details>

---

**5. 如何在 VS Code 中的 html 檔案中，快速建立 HTML5 基礎範本？**

- A) 輸入 html 後按 Enter
- B) 輸入 ! 後按 Enter
- C) 輸入 template 後按 Enter
- D) 直接開始寫 `<html>` 標籤

<details>
<summary>點選查看答案</summary>
答案: B) 輸入 ! 後按 Enter
</details>

---

**6. 瀏覽器的開發者工具可以用來做什麼？**

- A) 編寫 Word 文件
- B) 檢查網頁結構與除錯
- C) 下載影片
- D) 編輯圖片

<details>
<summary>點選查看答案</summary>
答案: B) 檢查網頁結構與除錯
</details>

---

**7. DOM 的全名是什麼？**

- A) Data Object Model
- B) Document Object Model
- C) Dynamic Object Model
- D) Design Object Model

<details>
<summary>點選查看答案</summary>
答案: B) Document Object Model
</details>
