前言與環境介紹

# 前言與環境介紹 ## 網站應用介紹 ### 網頁的世界無所不在每天我們都在與「網頁」互動。從打開 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>