三種語言，同一個網頁
打開任何一個網頁，你看到的都是三種語言默默協作的成果。它們不是對手——每種只幹一件事，像三個朋友一起蓋房子那樣把活兒傳來傳去。一旦你看清誰負責什麼，整個網頁世界就不再像魔法，而開始像是你自己也能搭出來的東西。
HTML 是結構——網頁的骨架。它決定這是一個標題、那是一個段落、那邊是一個連結。CSS 是外觀——皮膚和衣服。它決定顏色、字體、間距，以及東西擺在哪裡。而 JavaScript 是行為——肌肉。它讓東西動起來、會回應：一個點了會做事的按鈕，一個會滑開的選單。
HTML：標籤為網頁搭起骨架
HTML 是「超文本標記語言」的縮寫，但長名字可以先忘掉——關鍵詞是標記（markup）。你把內容寫成普通文字，再給每一塊裹上小小的標記，說明它是什麼。這些標記叫標籤（tag），它們住在角括號裡，長得像 `<這樣>`。
大多數標籤是成對出現的，像一雙手把內容抱住：一個開始標籤，一個帶小斜槓的結束標籤，比如 `<p>` 和 `</p>`。夾在中間的一切，就被當作那種東西。所以 `<p>你好</p>` 的意思是「這段文字是個段落」，而 `<h1>歡迎</h1>` 的意思是「這段文字是最大的、最頂層的標題」。瀏覽器靠讀這些標記，來理解你網頁的形狀。
<h1>My First Page</h1> <p>Hello, this is a paragraph.</p> <a href="https://example.com">Visit this link</a>
最後一行又帶出一個概念：標籤可以攜帶額外的資訊，叫屬性（attribute）。`<a>`（錨點）標籤上的 `href` 告訴這個連結該打開哪個地址。別去背標籤——它們有幾十個，你會自然而然地記住。只要抓住這個套路就好：開始、內容、結束。
CSS：規則為網頁上皮膚
如果你只寫到 HTML 為止，網頁能用，但樣子很樸素——白底黑字，像一份沒排版的文件。CSS（層疊樣式表，Cascading Style Sheets）就是給網頁換裝的地方。它不改變東西「是什麼」，只改變它們「長什麼樣」——顏色、字體、大小，以及在螢幕上的位置。
一條 CSS 規則有兩半。先是選擇器（selector）——你指出你說的是哪些東西，比如「所有段落」或「每個頂級標題」。然後，在花括號裡，是一串宣告（declaration）——每一條寫出一個屬性和你想要的值，格式是 `屬性: 值;`。可以當成一句指令來讀：「對這些東西，把顏色設成這樣、大小設成那樣。」
h1 {
color: navy;
font-size: 32px;
}
p {
color: gray;
}瀏覽器把這一切拼成畫面
那麼，到底是誰把這些文字檔案，變成你眼前這張五彩的網頁？是瀏覽器——就是你正在用來讀這篇文章的應用程式，比如 Chrome、Safari 或 Firefox。當你打開一個網頁時，瀏覽器收到的 HTML 和 CSS 都是純文字，它會把兩者一起讀進來，像一個工匠同時看著圖紙和配色表施工。
它先讀 HTML 搭出骨架：這裡是標題，這裡是段落，這裡是連結。然後套用 CSS 規則給每個部分穿衣服：這個標題是深藍色、大號字，這些段落是灰色。最後，它把做好的成果畫（paint）到螢幕上——就是你看到、捲動、點擊的那個頁面。這整套過程，每一次都在不到一秒裡完成。
一切在這裡、在瀏覽器內部執行、用來構建你看得見摸得著那部分應用的東西，統稱為前端（frontend）。HTML、CSS 和 JavaScript 就是前端的三大核心工具。如今你已認識了三者中的兩個——而正是這兩個，把一塊空白螢幕變成了人能讀懂、能認出的東西。
小結
每個網頁都是一支小團隊。HTML 用標籤搭起結構，說明每塊內容是什麼。CSS 用規則添上外觀，說明東西該長什麼樣。JavaScript——下一個要認識的——添上行為。而瀏覽器把它們全讀進來，畫成你真正在用的那個頁面。