前端技術概覽

Jia-Yin2025年2月19日大约 3 分鐘

🎯 學習內容：

了解前端開發的基本概念
認識 HTML、CSS、JavaScript 的核心功能
初步了解 Vue.js 的基礎應用

教學錄影

1️⃣ 什麼是前端開發？

前端開發（Frontend Development）是負責網站或網頁應用的使用者介面（User Interface, UI）部分，包括：

HTML（結構）：決定網頁的內容與排版
CSS（樣式）：負責美觀設計與排版
JavaScript（行為）：提供動態互動與功能
前端框架（如 Vue.js）：加速開發並提升維護性

2️⃣ HTML（超文本標記語言）

HTML（HyperText Markup Language） 是負責定義網頁的內容與結構的標記語言。

🔹 常見 HTML 標籤：

標籤	作用
`<h1> - <h6>`	標題（從 h1 到 h6，字級逐漸變小）
`<p>`	段落
`<a href="">`	超連結
`<img src="">`	圖片
`<ul>` / `<ol>` / `<li>`	無序列表 / 有序列表
`<table>`	表格
`<div>` / `<span>`	容器（區塊級/行內級）

✨ HTML 範例：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>我的第一個網頁</title>
</head>
<body>
    <h1>歡迎來到我的網站</h1>
    <p>這是一個 HTML 教學範例。</p>
    <a href="https://www.google.com">前往 Google</a>
</body>
</html>

Result:

3️⃣ CSS（階層式樣式表）

CSS（Cascading Style Sheets） 用於控制 HTML 元素的外觀與排版。

🔹 CSS 基本語法：

/* 選擇所有 <h1>，並改變其顏色 */
h1 {
    color: blue;
    font-size: 24px;
}

Result:

🔹 CSS 選擇器：

選擇器	作用
`h1`	選擇所有 `<h1>`
`.class-name`	選擇具有特定 class 的元素
`#id-name`	選擇特定 id 的元素
`div p`	選擇 `div` 內的 `p`

✨ CSS 範例：

body {
    background-color: #f4f4f4;
    font-family: Arial, sans-serif;
}

h1 {
    color: #333;
}

p {
    color: gray;
}

4️⃣ JavaScript（動態行為）

JavaScript 是前端開發的程式語言，能讓網頁具備動態功能。

🔹 JavaScript 基本語法：

// 變數
let name = "小明";

// 函式
function sayHello() {
    console.log("Hello, " + name);
}

// 事件綁定
document.getElementById("btn").addEventListener("click", function() {
    alert("你按下按鈕了！");
});

✨ JavaScript 範例：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 範例</title>
</head>
<body>
    <button id="btn">點我</button>

    <script>
        document.getElementById("btn").addEventListener("click", function() {
            alert("按鈕被點擊！");
        });
    </script>
</body>
</html>

5️⃣ Vue.js（前端框架）

Vue.js 是一個流行的 JavaScript 框架，讓前端開發更高效。它的核心概念包括：

模板（Template）：HTML 標籤內可插入變數
響應式數據（Reactive Data）：數據變更時 UI 會自動更新
事件處理（Event Handling）：可以用 @click 等方式綁定事件

🔹 Vue.js 基本語法：

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <meta charset="UTF-8">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <button @click="changeMessage">點我改變訊息</button>
    </div>

    <script>
        const { createApp } = Vue;

        createApp({
            data() {
                return {
                    message: "Hello Vue!"
                };
            },
            methods: {
                changeMessage() {
                    this.message = "訊息已改變！";
                }
            }
        }).mount("#app");
    </script>
</body>
</html>

6️⃣ 實踐練習

請試著將本頁相關的程式碼存成 HTML 檔案並以瀏覽器開啟觀察結果。

📌 課後延伸學習