上一篇我們使用了Copilot做出了第一個網頁，雖然只是單純的Html，但也是網頁。但我們是介紹 JavaScript的，你心裡大概有疑惑，為什麼我來學JavaScript還要學 html呢？
讀完此篇你會了解
1. 為什麼要學 Html 和 Css
2. 了解 HTML、CSS、JavaScript三者關係。
今天這篇使用做一台筆電的方式來說明一下學寫網頁一定不可不認識的網頁三劍客-HTML、CSS、JavaScript。
HTML 就像組裝 MacBook 的外殼和零件擺放位置
HTML（HyperText Markup Language，超文本標記語言）是 Web 最基本的架構。使用標籤來定義網頁內容的意義和結構。負責告訴瀏覽器：「這個頁面裡有哪些元素？這些元素的階層與位置是什麼？」
你可以想像我們在用 HTML 做什麼？
就像是在「組裝一台 MacBook」，並且標記出各個組件的位置：
<div class="macbook"> ← 整台筆電的外殼
<div class="screen"> ← 螢幕區域
<div class="camera"></div> ← 螢幕上的小黑點（攝影機）
<div class="display-content"> ← 顯示器
</div>
<div class="body"> ← 下面的機蓋
<div class="keyboard"> ← 鍵盤
<div class="key"></div> ... ← 每一顆按鍵
</div>
<div class="touchpad"></div> ← 觸控板
</div>
</div>
這邊用 <div> 標記出電腦的組件應該在哪個位置，也就是結構的部分。
- 筆電外殼在哪裡（
.macbook） - 螢幕區(
.screen)、鍵盤區(.keyboard)、觸控板(.touchpad)在什麼位置 - 按鍵(
.key)在鍵盤(.keyboard)裡面的排列
HTML 的本質其實就像在做「內容的架構圖」，將每一塊畫面拆出來並標記清楚，哪個區域是什麼畫面、哪個地方是功能元件、元件還有什麼樣的元件。
CSS 就像 MacBook 的顏色、造型、樣式。
CSS（Cascading Style Sheets，階層式樣式表）就是這台筆電的「外觀設計師」。
想像你正在看一場 Apple 發表會。
舞台燈光打下來，Tim Cook 微笑登場，說出：「This… is the best MacBook we’ve ever made.」
接著畫面一轉，拿著產品展示：銀色金屬外殼、極窄邊框、背光鍵盤，薄到可以從牛皮紙袋抽出來，每個角度都讓人驚嘆。
那種讓人「哇～好棒！」的設計，就是 CSS 負責的工作。
<style>
.macbook { ← 描述電腦的外觀
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(-15deg);
width: 400px;
}
.screen { ← 螢幕的大小顏色
width: 100%;
height: 250px;
background: #000;
border-radius: 12px 12px 0 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
position: relative;
z-index: 2;
}
.camera { ← 攝影機的樣子
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: #222;
border-radius: 50%;
z-index: 3;
}
.display-content { ← 顯示器內容
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 240px;
border-radius: 8px;
background: #1e1e1e;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
font-family: monospace;
}
.keyboard { ← 鍵盤
width: 90%;
margin: 20px auto 0 auto;
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 5px;
padding-top: 16px;
}
.key { ← 按鍵
background: #333;
border: 1px solid #555;
height: 20px;
border-radius: 3px;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
}
.touchpad { ← 觸控板
width: 90px;
height: 56px;
background: #999;
border-radius: 4px;
margin: 24px auto 0;
}
</style>
CSS 的寫法如上，在 html 中使用 <style> 標籤裡面使用 css 的語法。對應 HTML .macbook 用來描述 Mackbook的機殼外觀，.screen 是來描述螢幕大小，.keyboard 和 .touchpad 分別對應鍵盤和觸控板。
JavaScrpit 就像讓 MacBook「動起來」的智慧功能
我們現在電腦組裝（HTML)好了，外觀設計(CSS)也都做好了，現在只剩下操作軟體和系統這樣電腦才會動起了。這個部分就是 JavaScript的工作了，JavaScript 就像是筆電裡的「作業系統或軟體」
<script>
const output = document.getElementById("output");
output.textContent = "$ echo \"Hello Tom\"";
</script>
Javascript 的寫法如上，在 html 中使用 <script> 標籤裡面寫 JS的語法就可以動作了。上面的意思寄售，在螢幕中間的終端機output的地方印出 “Hello Tom”。就像我們前面的範例一樣。
總結
我們透過「打造一台虛擬 MacBook」的例子，我們更清楚認識了 HTML、CSS 和 JavaScript 的分工與關係：
技術 比喻角色 功能說明
HTML 電腦的架構 負責建立「結構」，決定每個元件的擺放與階層
CSS 外觀設計 負責畫面「外觀」，調整顏色、邊框、陰影與細節風格
JavaScript 作業系統與互動 讓畫面能「動起來」，控制行為、邏輯、互動與功能
相信通過今天的範例說明，大家就更了解 HTML，CSS，JavaScript三者的關係了吧！下一篇我們會稍微介紹一下 CSS的寫法，讓大家識做一下。
關注Tom，每天十分鐘，你也學得會寫程式！
https://vocus.cc/article/6811992afd89780001f79f46
範例程式碼
程式碼範例如下，執行起來如下 codepen跑出來的樣子，可以看到就像一台 macbook。大家可以自己修改玩玩看。
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CSS MacBook</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background: #eee;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
font-family: sans-serif;
}
.macbook {
position: relative;
transform-style: preserve-3d;
transform: rotateX(15deg) rotateY(-15deg);
width: 400px;
}
.screen {
width: 100%;
height: 250px;
background: #000;
border-radius: 12px 12px 0 0;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
position: relative;
z-index: 2;
}
.camera {
position: absolute;
top: 6px;
left: 50%;
transform: translateX(-50%);
width: 6px;
height: 6px;
background: #222;
border-radius: 50%;
z-index: 3;
}
.logo {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%);
color: white;
font-size: 24px;
font-weight: bold;
opacity: 0.5;
z-index: 4;
}
.display-content {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 240px;
border-radius: 8px;
background: #1e1e1e;
box-shadow: 0 5px 10px rgba(0,0,0,0.3);
font-family: monospace;
}
.window-header {
height: 24px;
background: #2e2e2e;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
display: flex;
align-items: center;
padding: 0 8px;
gap: 6px;
}
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.window-body {
color: #00ff00;
padding: 10px;
font-size: 14px;
}
.body {
width: 100%;
height: 210px;
background: linear-gradient(to bottom, #888, #666);
position: absolute;
top: 100%;
left: 0;
transform: rotateX(65deg);
transform-origin: top;
border-radius: 0 0 12px 12px;
box-shadow: 0 20px 50px rgba(0,0,0,0.35);
z-index: 1;
}
.keyboard {
width: 90%;
margin: 20px auto 0 auto;
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 5px;
padding-top: 16px;
}
.key {
background: #333;
border: 1px solid #555;
height: 20px;
border-radius: 3px;
box-shadow: 0 5px 4px rgba(0, 0, 0, 0.5);
}
.touchpad {
width: 90px;
height: 56px;
background: #999;
border-radius: 4px;
margin: 24px auto 0;
}
</style>
</head>
<body>
<div class="macbook">
<div class="screen">
<div class="camera"></div>
<div class="display-content">
<div class="window-header">
<div class="dot red"></div>
<div class="dot yellow"></div>
<div class="dot green"></div>
</div>
<div class="window-body" id="output">
<!-- JS will write here -->
</div>
</div>
</div>
<div class="body">
<div class="keyboard">
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
<div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div><div class="key"></div>
</div>
<div class="touchpad"></div>
</div>
</div>
<script>
const output = document.getElementById("output");
output.textContent = "$ echo \"Hello Tom\"";
</script>
</body>
</html>
