前端是什麼？
前端是運行在使用者裝置上的程式，負責呈現介面、接收操作、管理畫面狀態，並透過 API 與後端交換資料。 下面這台電腦跑的 Gmail 網頁版就是一個前端程式：點信、按星號、把草稿寄出去，正在發生的職責會在下方亮起。
畫面背後，是一份 HTML 藍圖
畫面上每個按鈕、每個元素，瀏覽器都不是憑空畫的。它會先拿到一份網站藍圖（HTML）：上面寫著哪裡放標題、哪裡是按鈕、哪裡是圖片，再照著這份藍圖把畫面組裝出來。試試點一下下面網站的任何一個區塊，對應的程式碼就會亮起來。也可以切換到 CSS／JS 分頁，想一想它們各自負責什麼。
前端是什麼？
你打開的每個網站、每個可以點的按鈕、每個滑得動的頁面，那一層叫前端。瀏覽器會拿到 HTML、CSS、JavaScript 三份程式碼，組裝出你看到的畫面。切換下方的 HTML／CSS／JavaScript 三個分頁，看看每一種各自負責什麼；在 HTML 分頁點一下網站的任何區塊，對應的程式碼還會亮起來。
瀏覽器拿到藍圖後，怎麼把它變成畫面？
剛剛那份網站藍圖，說穿了就是一堆文字。瀏覽器收到後不會直接顯示，而是分四步加工：先讀懂內容、算好位置、畫到螢幕上、最後接上互動（這整段過程有個名字，叫渲染 Rendering）。點下面的步驟，看每一步在做什麼。
步驟 1 / 4
讀懂內容
步驟 1 / 4
先把文字讀成一棵樹
瀏覽器一行一行讀 HTML，把每個標籤變成一個小節點，再照著誰包著誰的關係排成一棵樹（這棵樹叫 DOM，之後你會常聽到）。有了這棵樹，瀏覽器才知道整頁有哪些東西、誰在誰裡面。
前端的核心概念
我們把前端分成三塊來認識。前兩塊是網頁本身的組成：負責視覺的 HTML／CSS，還有負責邏輯的 JavaScript。第三塊是你用來透視前兩者的工具 DevTools，它本身不是網頁的一部分。遇到問題時，先判斷它屬於哪一塊，才能精準定位，也才能把狀況描述清楚交給 AI。
安格斯牛堡專賣所
經典安格斯牛堡
100% 純牛肉現煎 · 特製醬
$180
雙層起司牛堡
雙層牛肉 · 融化起司
$220
視覺與使用者體驗
網站的外觀由 HTML + CSS 打造。 不過實際在做網站時，我們很少一個元素一個元素地想，而是以元件為單位：元件就是一組元素湊成的一塊，像按鈕、卡片、導覽列。 有了元件，接著要安排的是版面，也就是這些元件怎麼排列、對齊、留白； 而每個元件裡實際放進去的文字和圖片，就是內容。 認得這三個詞，之後要改哪一塊才講得清楚。現在先看它們各自活在頁面上的哪個位置。
經典安格斯牛堡
100% 純牛肉現煎，搭配特製醬料與新鮮生菜。
邏輯、資料處理與動態互動
網頁不只是一張不會動的圖：你點一下、輸入、捲動，它得接住這些操作、去拿資料、把畫面更新，這一層的邏輯與行為由 JavaScript 負責。 下面就點點看它負責的三件事。
點右側步驟，看 JavaScript 在這張外送頁做的三件事。
除錯與效能偵測
開發者通常會透過瀏覽器內建的 DevTools 來 debug、找問題。 畫面上哪個東西跑版了、顏色或字級不對、間距怪怪的，這種結構與外觀的問題，它能讓你當場指著那一塊看是哪段 HTML／CSS 造成的； 按鈕點了沒反應、數字沒更新、資料沒進來，這種行為的問題，它也能幫你看 JavaScript 報了什麼錯、資料到底有沒有拿到。 之後的課程會帶你實際操作，現在先看它長什麼樣。
評論一直轉圈圈載不出來？打開下面的 DevTools，看看是哪裡出錯。
重點回顧
這一課我們搞懂了前端是什麼，也畫出了模組二的學習地圖。帶走這三個重點：
- 1前端是什麼運行在使用者裝置上的程式，負責呈現介面、接收操作、管理畫面狀態，並透過 API 與後端交換資料。
- 2畫面怎麼來瀏覽器把程式碼變成畫面，會走「讀懂內容 → 算好位置 → 畫到螢幕 → 接上互動」四個渲染步驟。
- 3前端學什麼整個前端學習分成三塊：視覺層（HTML + CSS）、邏輯層（JavaScript）、透視鏡（DevTools）。
隨堂檢測
以下哪一個可以用來改變網頁元素的樣式（例如文字顏色、大小）？
先別急著選單一答案，每一個都想一下：它到底能不能改樣式？