歡迎來到網頁技術的世界！
在本章中，我們將探索現代互聯網的基石。由於這屬於 OCR H046 課程中數據交換 (Exchanging Data) 的一部分，我們將探討資訊是如何被結構化、設計樣式以及變得具有互動性，從而可以在全球範圍內共享。看完這些筆記後，你將會明白 HTML、CSS 和 JavaScript 是如何協同工作的，以及為什麼壓縮 (compression) 是讓網頁快速運作的「秘密武器」。
別擔心，即使你從未寫過程式碼，我們也會把這些概念拆解成非常簡單的部分！
1. 網頁開發的「三大支柱」
你可以把網站想像成一棟房子。要蓋一棟房子，你需要三樣東西：結構（磚塊）、裝飾（油漆）和功能（水電管道）。網頁的運作方式完全相同。
A. HTML（結構）
HTML 的全名是 Hypertext Markup Language（超文本標記語言）。它是網頁的骨架，告訴瀏覽器內容是什麼（例如：「這是一個標題」、「這是一個段落」或「這是一張圖片」）。
運作方式： HTML 使用標籤 (tags) 來包裹內容。例如：
<h1>這是一個標題</h1>
<p>這是一個文字段落。</p>
快速回顧：HTML
- 它是一種標記語言，不是程式語言。
- 它定義了結構和內容。
- 它使用括號內的標籤。
B. CSS（樣式）
CSS 的全名是 Cascading Style Sheets（層疊樣式表）。如果 HTML 是房子的磚塊，那麼 CSS 就是油漆、壁紙和地毯。它告訴瀏覽器內容應該看起來是什麼樣子。
為什麼要用它？ 與其告訴網站上的每一個段落都要設定為「藍色」和「12 號字型」，你可以編寫一條 CSS 規則，一次改變所有的段落。這樣可以保持程式碼整潔且易於管理。
你知道嗎？ 「層疊 (Cascading)」這個詞的意思是規則會從一個層級「流向」下一個層級。如果你為整個頁面設定了字型，頁面內的所有段落都會繼承該字型，除非你為它們設定了特定的專屬規則！
C. JavaScript（行為）
JavaScript 是一種指令碼語言 (scripting language)。它為頁面增加了互動性。當你點擊按鈕時發生的動作、彈出視窗提示，或是讓你無需重新整理整個頁面就能提交表單，全都是靠它實現的。
在我們蓋房子的類比中，JavaScript 就是電燈開關或門鈴——它處理的是行為。
關鍵概念：客戶端處理 (Client-Side Processing)
JavaScript 通常在客戶端 (Client-Side) 執行。這意味著程式碼會被發送到你的電腦，並由你的網頁瀏覽器來執行。這比將每一次點擊都發送到另一個國家的伺服器要快得多！
關鍵重點：網頁三位一體
HTML = 結構（內容是什麼）
CSS = 表現（外觀如何）
JavaScript = 互動（行為反應）
2. 高效交換數據：壓縮
當我們在網絡上交換數據時，我們希望它傳輸得越快越好。高品質的圖片或影片通常是巨大的檔案！為了快速傳送它們，我們使用壓縮 (Compression) 來縮小檔案大小。
在考試中，你需要知道兩種主要類型：失真壓縮 (Lossy) 和 無損壓縮 (Lossless)。
A. 失真壓縮 (Lossy Compression)
失真壓縮透過永久刪除檔案中的部分數據來運作。它會尋找人類眼睛或耳朵可能察覺不到的資訊並將其「丟棄」。
例子： JPEG 圖片或 MP3 音訊檔。如果你使用失真壓縮來處理一張藍天的照片，電腦可能會將 50 種細微差異的藍色簡化為 5 種。看起來幾乎一樣，但檔案大小卻小得多。
缺點： 一旦數據遺失，就永遠無法找回。如果你壓縮過度，畫質看起來就會出現「塊狀」或「像素化」。
B. 無損壓縮 (Lossless Compression)
無損壓縮在縮小檔案的同時，不會遺失任何資訊。當你解壓縮檔案時，它與原始檔案 100% 相同。
它是如何做到的？ 它利用聰明的模式。與其儲存「藍色、藍色、藍色、藍色、藍色」，它會儲存為「5 個藍色」。這佔用了較少的空間，但能讓電腦完美地重建原始檔案。
例子： PNG 圖片、ZIP 檔案或程式原始碼。對於文字或銀行記錄等資料，你必須使用無損壓縮，因為遺失任何一個字母都會改變含義！
記憶小撇步：
- Lossy (失真) = Lose (遺失) 數據（但檔案變小）。
- Lossless (無損) = Less (較少) 空間（但保留所有數據）。
常見誤區：
- 誤區： 認為失真壓縮總是「不好」的。
- 事實： 失真壓縮對網際網路來說非常棒！如果沒有它，Netflix 的緩衝將永無止境，網站載入圖片也會花上幾分鐘。
- 誤區： 認為可以將已進行失真壓縮的檔案轉回高品質的原始檔案。
- 事實： 一旦數據在失真壓縮中「遺失」，它就永遠消失了。
快速回顧：壓縮比較
1. 失真 (Lossy)： 檔案較小，畫質較低，數據永久遺失。用途：照片、影片、音訊。
2. 無損 (Lossless)： 檔案較大（相較於失真壓縮），畫質完美，數據無遺失。用途：文字、程式碼、文件。
總結檢查清單
在你繼續之前，請確保你能回答以下問題：
1. 我能解釋 HTML、CSS 和 JavaScript 的不同角色嗎？（結構 vs 樣式 vs 互動性）
2. 我知道 JavaScript 是一種客戶端 (client-side) 語言嗎？
3. 我能解釋為什麼在交換數據時需要壓縮嗎？
4. 我能描述失真 (Lossy) 和 無損 (Lossless) 壓縮之間的區別，並舉出每個例子嗎？
做得好！你已經掌握了 H046 考試中網頁技術的精髓。記住「結構、樣式、行為」這個模型，你會發現這個主題更容易記憶。