Day 2 - 用 HTML、CSS、JavaScript 建立第一個互動網頁

18th鐵人賽

Andygong

團隊nutc imac

2026-09-16 12:58:28

81 瀏覽

分享至

一、今天完成目標

今天要把昨天介紹的三個 Web 基礎技術真正放在一起：

HTML：建立網頁結構
CSS：設計網頁外觀
JavaScript：加入互動功能

今天完成後，我們會得到一個簡單的「太陽系專題首頁」，並且讓按鈕可以和使用者互動。

二、簡易互動網頁

今天先使用單一 index.html，把 HTML、CSS、JavaScript 都放在同一個檔案中。

<!DOCTYPE html>
<html lang="zh-TW">

<head>

    <meta charset="UTF-8">

    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >

    <title>從 Web 到宇宙</title>

    <style>

        body {
            margin: 0;
            min-height: 100vh;

            display: flex;
            justify-content: center;
            align-items: center;

            background: #050816;
            color: white;

            font-family: Arial, sans-serif;
            text-align: center;
        }

        .container {
            padding: 40px;
        }

        h1 {
            font-size: 48px;
            margin-bottom: 10px;
        }

        p {
            color: #aaaaaa;
            font-size: 18px;
        }

        button {
            margin-top: 20px;
            padding: 12px 24px;

            border: none;
            border-radius: 8px;

            background: #ffffff;
            color: #050816;

            font-size: 16px;
            cursor: pointer;
        }

        button:hover {
            transform: scale(1.05);
        }

    </style>

</head>

<body>

    <div class="container">

        <h1>從 Web 到宇宙</h1>

        <p>
            30 天打造互動式太陽系
        </p>

        <button id="startBtn">
            開始探索
        </button>

    </div>

    <script>

        const button = document.getElementById("startBtn");

        button.addEventListener("click", function () {

            alert("歡迎來到我的 3D 太陽系！");

        });

    </script>

</body>

</html>

把檔案儲存後，用瀏覽器開啟。
你應該會看到一個簡單的深色首頁：

按下按鈕後會跳出小視窗：

這樣今天就已經完成一個最基本的互動網頁。

三、這段程式碼在做什麼？

今天不用把每一行都拆開來講，只需要先掌握三個部分。

HTML：建立內容

<div class="container">

    <h1>從 Web 到宇宙</h1>

    <p>30 天打造互動式太陽系</p>

    <button id="startBtn">
        開始探索
    </button>

</div>

這部分負責，網頁上有什麼？
我們建立了標題、文字與按鈕。

CSS：負責外觀

body {
    background: #050816;
    color: white;
    text-align: center;
}

以及按鈕的：

button {
    padding: 12px 24px;
    border-radius: 8px;
}

這部分負責：網頁看起來怎麼樣？
像是背景的顏色，又或者是自體的大小顏色等等。

JavaScript：加入互動

const button = document.getElementById("startBtn");

button.addEventListener("click", function () {

    alert("歡迎來到我的 3D 太陽系！");

});

這部分負責使用者操作後，網頁要做什麼？
我們取得按鈕，當使用者按下按鈕，就執行alert("歡迎來到我的 3D 太陽系！")
其實今天最重要的不是這個首頁的成品，而是我們一次把 HTML、CSS、JavaScript 串在一起。

四、今天小節

今天我們沒有花大量時間介紹 HTML、CSS 或 JavaScript 的語法，而是直接把三種技術放在一起，完成第一個具有基本樣式與互動功能的 Web 頁面。
目前的頁面還沒有任何 3D 元素，但這正是接下來一步一步擴充的起點。
接下來我們會開始接觸 Canvas 與 2D 動畫，先了解瀏覽器是如何繪製與更新畫面的，之後再進入 WebGL 與 Three.js。