# 三大語言概述 (HTML、CSS、Javascript)

基本上你看到的所有網站，基本上都是由前端三大語言 (HTML、CSS、Javascript) 所建構出來的，那到底這三大語言在網頁中到底擔任甚麼角色呢 ? 接下來我將利用遊戲來比喻他們的角色。

## 1. HTML

**HTML (HyperText Markup Language) - 遊戲建模與結構**
* **定位**： 網頁的骨架和內容。
* **遊戲比喻**： 想像它就是遊戲裡的建模師。它決定了遊戲世界中「有什麼」東西：場景中的一塊岩石、一扇門、一個角色、一個選單按鈕。簡單來說就是建構出最基礎的結構，就像遊戲中有一座山，但是 HTML 只能定義出山的形狀，表面的樹、土地等等的樣貌都不會出來，所以我們需要 CSS 去將 HTML 建構出來的物件給美化。
* 在網頁中，HTML 標籤 ($\texttt{<h1>}$、$\texttt{<p>}$、$\texttt{<img>}$、$\texttt{<button>}$) 就是定義了網頁上的文字、圖片、連結、按鈕等內容元素和它們的結構順序。
* 關鍵詞： 結構、內容、標記語言。
<center>
<img src="https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e68781d026a_7.png?w=800&ssl=1" alt="HTML - Figure">
</center>

## 2. CSS

**CSS (Cascading Style Sheets) - 遊戲畫質、材質與視覺效果**
* **定位**： 網頁的樣式和美化。
* **遊戲比喻**： 它就是遊戲裡的美術設計師和渲染引擎。
* 它負責讓模型看起來漂亮：為岩石加上粗糙的材質貼圖、把門漆成紅色、讓角色穿上盔甲、調整按鈕的大小和顏色。
* 在網頁中，CSS 負責所有視覺呈現：字體大小、顏色、間距、背景圖片、排版佈局 (如 Flexbox 或 Grid)，甚至一些精美的動畫效果。
* 關鍵詞： 樣式、外觀、排版、視覺設計。

<center>
<img src="https://53.fs1.hubspotusercontent-na1.net/hub/53/hubfs/css%20style%2C%20html%20css%20javascript%20in%20web%20design.webp?width=506&height=195&name=css%20style%2C%20html%20css%20javascript%20in%20web%20design.webp" alt="HTML - Figure">
</center>

## 3. JavaScript

**JavaScript (JS) - 互動與遊戲邏輯**

* 定位： 網頁的行為和互動邏輯。
* 遊戲比喻： 它就是遊戲裡的程式設計師和邏輯腳本。
* 它負責讓遊戲動起來：當玩家按下滑鼠時，角色開始移動（互動）；當血條歸零時，顯示「Game Over」畫面（邏輯）。
* 在網頁中，JavaScript 讓網頁有了**生命 (使網頁能與使用者互動)**：點擊按鈕後彈出視窗、驗證表單輸入、滑動圖片輪播、從伺服器抓取資料並更新頁面內容。
* 關鍵詞： 行為、邏輯、互動性、動態內容。

<center>
<img src="https://code-basics.com/rails/active_storage/representations/proxy/eyJfcmFpbHMiOnsiZGF0YSI6ODQxLCJwdXIiOiJibG9iX2lkIn19--12de7472e06ad4dc3174eba919a88612edea1f9b/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJwbmciLCJyZXNpemVfdG9fbGltaXQiOls2NDAsMzYwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--84174d2e24b55a81006e909baa42eeb78263507e/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA%20%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0%202025-04-01%20%D0%B2%2017.08.47.png" alt="HTML - Figure">
</center>

## 4. 總結
| 語言 | 角色定位 (網站) | 遊戲比喻 |
| :--- | :--- | :--- |
| HTML |內容與結構（骨架） | 建模：決定「有什麼」東西 |
| CSS | 樣式與外觀（皮囊）| 材質、畫質：決定「看起來如何」 |
| JavaScript | 行為與互動（大腦）| 遊戲邏輯：決定「會做什麼事」 |