HTML、CSS 和 JavaScript

在瀏覽器裡，frontend 恰好由三種語言搭起來。你不需要親手去寫它們，但你需要知道每一種各自管什麼。

HTML（超文本標記語言）是結構——內容以及它的骨架。它說 "這裡是一個標題，這裡是一個段落，這裡是一個按鈕"。它是頁面的名詞；HTML 單獨存在時，是一份樸素、沒有樣式的文件，就像一個帶標籤的文本檔案。瀏覽器會把你的 HTML 變成一棵存在記憶體裡、活的物件樹，叫做 DOM（Document Object Model，文件物件模型）；當代碼 "改變頁面" 時，它其實是在改變 DOM，然後瀏覽器重新繪製以保持一致。

CSS（層疊樣式表）是樣式——一切看起來是什麼樣。顏色、字型、間距、佈局、靠左還是居中、小螢幕還是大螢幕。CSS 不會改變頁面上有什麼，只改變它怎麼呈現。如果說 HTML 是名詞，那 CSS 就是形容詞。

JavaScript（JS）是行為——你互動時發生了什麼。它監聽點選、把資料發給 backend、顯示一個載入轉圈、在答覆回來時更新 DOM。HTML 和 CSS 是靜態的；JavaScript 讓一個頁面做事情。它是動詞。（同一種語言通常也用來跑 backend，這就是為什麼你到處都會看到它。）

有一種方式可以想像這種分工：HTML 搭起一棵樹（DOM），CSS 給它上色，而 JavaScript 伸進去改動它：

   HTML ─▶ 構建 DOM 樹               CSS ─▶ 為其設定樣式    JS ─▶ 改變它
   ┌──────────────────────────┐
   │  page (document)          │
   │  ├── header               │      為每個節點          點選時,
   │  │   └── "My App"         │      應用顏色、字型、      更新某個節點
   │  └── form                 │      間距                → 瀏覽器重繪
   │      ├── input  (name)    │
   │      └── button "Save"    │
   └──────────────────────────┘