Learning Objectives
- 說明從輸入網址到看到畫面之間，瀏覽器大致做了哪些事
- 分辨 HTML、CSS、JavaScript 在一個網頁裡各自負責的工作
- 用開發者工具找出畫面上某段文字對應的 HTML 標籤與套用的 CSS 規則
- 在開發者工具裡修改樣式，並說明這些修改不會存回伺服器
- 分辨靜態網頁與動態網頁
你每天看的網頁，其實是幾個文字檔
選課系統、社團的活動頁、線上講義，打開的方式都一樣：在瀏覽器輸入網址，幾秒後畫面出現。 畫面看起來是圖文並茂的版面，但瀏覽器收到的其實是幾個純文字檔：
| 檔案 | 寫的是什麼 | 這一軌會學嗎 |
|---|---|---|
| HTML（HyperText Markup Language，超文字標記語言） | 內容與結構：哪裡是標題、哪幾行是清單、哪裡是連結 | 會，第 1～8 課 |
| CSS（Cascading Style Sheets，階層式樣式表） | 外觀：顏色、字的大小、間距、版面怎麼排 | 會，第 9～24 課 |
| JavaScript | 行為：按了按鈕之後要做什麼、怎麼和伺服器交換資料 | 不在這一軌，請看 JavaScript 軌 |
這一課先看清楚這幾個檔案怎麼變成畫面，再學會用開發者工具（developer tools）打開任何一個網頁，看它是怎麼寫的。 學會這件事之後，網路上每個網頁都可以是你的範例。
輸入網址之後發生的事
假設你在網址列輸入 https://example.com/club/index.html，按下 Enter：
| 步驟 | 發生什麼事 |
|---|---|
| 1. 拆解網址 | https 是通訊協定、example.com 是網域名稱、/club/index.html 是伺服器上的路徑 |
| 2. 查位址 | 透過 DNS（網域名稱系統）把 example.com 換成伺服器的 IP 位址，就像用名字查電話號碼 |
| 3. 送出請求 | 和伺服器建立連線（https 會先加密），用 HTTP 說「請給我 /club/index.html」 |
| 4. 伺服器回應 | 回傳狀態碼（成功是 200，找不到是 404）與 HTML 檔案的內容 |
| 5. 讀 HTML | 瀏覽器從頭讀 HTML，讀到需要 CSS 檔、圖片、JavaScript 檔的地方，再分別送出請求去拿 |
| 6. 組成畫面 | 把 HTML 組成一棵 DOM 樹（Document Object Model），套上 CSS 算出每個元素的位置與大小，最後畫到螢幕上 |
DNS 與 HTTP 的細節是計算機概論的內容，想深入可以讀 全球資訊網與 HTTP。 這一軌關心的是第 5、6 步：你寫的 HTML 與 CSS，瀏覽器怎麼讀、怎麼畫。
DOM 樹是瀏覽器讀完 HTML 之後在記憶體裡建立的結構：每個標籤變成一個節點，包在裡面的標籤是它的子節點。 下面的練習右邊就有一棵 DOM 樹，改一下 HTML，看它怎麼跟著變。
HTML、CSS、JavaScript 的分工
用一張社團活動頁來看三者的分工：
| 負責 | 在活動頁上的例子 | 長什麼樣子 | |
|---|---|---|---|
| HTML | 內容與結構 | 「這是標題」「這三行是活動資訊清單」「這是報名連結」 | <h1>程式設計讀書會</h1> |
| CSS | 外觀與版面 | 標題用品牌色、清單字小一點、兩欄並排 | h1 { color: #3C938A; } |
| JavaScript | 行為 | 按「報名」後檢查欄位、不重新整理就更新剩餘名額 | 屬於 JavaScript 軌 |
分開寫的好處：
- 同一份內容可以換外觀：只改 CSS，整個網站換一套配色，HTML 一個字都不用動。
- 一條 CSS 規則管很多元素：寫一次「所有
li都是粗體」，之後新加的項目自動套用。 - 沒有 CSS 也看得懂：CSS 檔載入失敗、或使用者用螢幕閱讀器（screen reader）聽網頁時，HTML 的結構還在，內容照樣讀得到。
HTML 是標記語言（markup language）：它不做計算、沒有迴圈，只負責替內容加上「這是什麼」的標記。 所以沒寫過程式也能學；這一軌從頭到尾都不需要寫 JavaScript。
檢視原始碼與開發者工具
任何一個網頁，你都可以看到它的 HTML 與 CSS。電腦版的瀏覽器有兩個工具：
| 工具 | 怎麼打開 | 看到的是 |
|---|---|---|
| 檢視原始碼 | 在網頁空白處按右鍵選「檢視網頁原始碼」；Windows 按 Ctrl＋U；或在網址前面加 view-source: |
伺服器送來的 HTML 原文，和檔案裡寫的一模一樣 |
| 開發者工具 | Windows 按 F12 或 Ctrl＋Shift＋I；Mac 按 ⌘＋⌥＋I；或在某段文字上按右鍵選「檢查」 |
瀏覽器目前的 DOM 樹與套用的 CSS，可以當場修改 |
開發者工具裡最常用的是 Elements 面板（Chrome、Edge 的名稱；Firefox 叫 Inspector）：
- 左半邊是 DOM 樹。滑鼠移到某一行，網頁上對應的元素會被標出來；反過來，點網頁上的元素，DOM 樹會跳到那一行。
- 右半邊的 Styles 列出選到的元素符合哪些 CSS 規則。比較優先的規則排在上面，被蓋過的宣告會畫刪除線（為什麼誰蓋過誰，第 11 課會講）。
- Styles 裡的值可以直接改、也可以取消勾選某一條，網頁馬上變化。這是試樣式最快的方法。
在開發者工具裡改的東西只存在你自己這個分頁：重新整理就消失，別人也看不到。要真的改網頁，得改伺服器上的 HTML、CSS 檔案。
「檢視原始碼」和 Elements 有時候不一樣：瀏覽器會修補寫錯的 HTML（第 2 課），JavaScript 也可能在載入後改動 DOM。 原始碼是伺服器送來的那一份，Elements 是瀏覽器整理過、此刻正在畫的那一份。
手機瀏覽器通常沒有開發者工具；這一軌的練習請用電腦。
小測驗：分工與開發者工具
社團網站想把所有按鈕改成圓角、換成品牌色，應該修改哪一種檔案？
你在開發者工具的 Styles 裡把標題改成紅色，接著按重新整理。會看到什麼？
在上面的攝影社網頁裡，「報名截止：12 月 5 日」是用哪個標籤標記的？
「檢視原始碼」看到的內容和開發者工具的 Elements 面板，差別是什麼？
靜態網頁與動態網頁
伺服器回應 HTML 的方式有兩種：
| 靜態網頁（static） | 動態網頁（dynamic） | |
|---|---|---|
| 伺服器怎麼做 | 直接把存好的 HTML 檔送出去 | 收到請求時才執行程式（PHP、Python 等），查資料庫、組出 HTML 再送出 |
| 每個人看到的 | 一樣的內容 | 可能不一樣：依登入的人、時間、搜尋條件而變 |
| 例子 | 社團介紹頁、個人作品集、課程大綱 | 登入後的選課結果、購物車、搜尋結果頁 |
| 需要 | 能放檔案的網頁伺服器或靜態網站代管服務 | 會執行程式的伺服器，通常還要資料庫 |
不管哪一種，瀏覽器收到的都是 HTML、CSS、JavaScript：伺服器用程式組出來的 HTML，和你手寫的 HTML 對瀏覽器來說沒有差別。 所以這一軌學的 HTML 與 CSS，兩種網頁都用得到。
這一軌寫的都是靜態網頁。想學伺服器端怎麼組出 HTML，可以接著看 PHP 軌。
小測驗：從網址到畫面
在網址列輸入 https://example.com/club/ 按 Enter，瀏覽器必須先做哪件事，才能把請求送到伺服器？
瀏覽器讀 HTML 時遇到 <link rel="stylesheet" href="style.css">，接下來會怎麼做？
下面哪一個最可能是動態網頁？
重點整理
- 輸入網址後：DNS 查 IP 位址、用 HTTP 請求檔案、伺服器回應 HTML；瀏覽器讀 HTML 時再去拿 CSS、圖片、JavaScript。
- 瀏覽器把 HTML 組成 DOM 樹，套上 CSS 算出版面，再畫到螢幕上。
- HTML 管內容與結構、CSS 管外觀、JavaScript 管行為；這一軌只學前兩個。
- 檢視原始碼看到伺服器送來的原文；開發者工具（F12）看到瀏覽器目前的 DOM 與套用的 CSS，可以當場試改，但重新整理就消失。
- 靜態網頁直接送出存好的檔案，動態網頁由伺服器程式組出 HTML；瀏覽器收到的都是 HTML、CSS、JavaScript。
下一課講 HTML 文件的結構：每一份 HTML 檔都有的 doctype、head、body，以及元素、標籤、屬性這些名詞。