前端程式設計筆記彙整 (完整版)

第一章：開發環境準備與基礎工具

終端機指令： 輸入 ipconfig 可查詢設備 IP 位址。

VS Code 外掛推薦

Live Server： 程式碼存檔後直接在 Chrome 即時預覽。
Chinese Lorem： 指令 ctlorem 快速產生中文假文。
Lorem Picsum： 方便產生佔位圖片。

資源推薦： Unsplash 提供高質感免費照片。

第二章：HTML 基本架構與核心思維

觀念：HTML 是「鋼骨」（結構），CSS 是「裝潢」（樣式）。

快速架構：輸入 ! 並按 TAB 鍵

核心區域

<head>：存放網頁設定（Meta、Title、Link、Style），不直接顯示。
<body>：主要內容區，顯示文字、圖片、按鈕等。

第三章：HTML 常用標籤大全

類別	標籤	說明
語意結構	`<header>`, `<main>`, `<footer>`, `<section>`	定義網頁的頁首、主體、頁尾與獨立章節。
排版與容器	`<div>`, `<p>`, `<span>`	區塊容器、文字段落與行內小範圍容器。
標題	`<h1>` ~ `<h6>`	定義不同層級的標題，數字越小層級越高。
導覽與清單	`<nav>`, `<ul>`, `<li>`	導覽選單、項目符號清單。
多媒體與連結	`<a>`, `<img>`, `<video>`, `<iframe>`	超連結、圖片、影片以及嵌入外部網頁。
表單互動	`<form>`, `<input>`, `<button>`, `<select>`	建立輸入區域、按鈕、下拉選單等互動功能。
文字語意	`<strong>`, `<em>`, `<mark>`	強調文字重要性、斜體或加上重點標記。
分隔與細節	`<br>`, `<hr>`, `<details>`	強制換行、水平分隔線以及可展開的摺疊資訊。

第四章：CSS 樣式設計與 Box Model

0. CSS 導入與基本規範

外部連結： 在 HTML 的 <head> 內使用 <link rel="stylesheet" href="style.css"> 來導入外部樣式檔。[cite: 2]
CSS 變數應用： 使用 var() 呼叫預定義顏色，例如：background-color: var(--graffiti-burnt-ochre); (這能確保全站色彩一致性)。[cite: 2]

1. 核心觀念：Box Model (盒模型)

網頁上的每個元素都是一個矩形盒子，由內而外依序為：[cite: 2]

屬性	說明
Content	內容區，顯示文字或圖片。[cite: 2]
Padding	內距，內容與邊框之間的空間（會吃背景色）。[cite: 2]
Border	邊框，盒子的邊界線。[cite: 2]
Margin	外距，與其他元素之間的距離（透明）。[cite: 2]

關鍵設定： box-sizing: border-box; 是目前開發標配，確保 Padding 不會撐大外殼。[cite: 2]

2. 現代排版：Flexbox 彈性佈局

Flexbox 分為「外層容器」與「內層項目」兩大設定，掌握以下屬性能解決 95% 的排版問題：[cite: 2]

A. 外層容器 (Flex Container) 屬性

開啟功能： display: flex; (讓子元素自動並排)[cite: 2]
主軸方向： flex-direction: row; (預設橫排) / column; (直排，手機版常用)[cite: 2]
自動換行： flex-wrap: wrap; (超出寬度自動換到下一行)[cite: 2]
主軸對齊 (水平)： justify-content: center; (置中) / space-between; (頭尾貼邊)[cite: 2]
元素間距： gap: 15px; (直接設定元素間的空隙)[cite: 2]

B. 內層項目 (Flex Items) 屬性

伸縮比例： flex: 1; (自動填滿剩餘空間)[cite: 2]
個別對齊： align-self: flex-end; (單一元素自訂對齊位置)[cite: 2]

3. 視覺與美化技巧

文字樣式：
- font-size: 1.2rem; (設定文字大小，建議使用 rem 相對單位)。[cite: 2]
- text-decoration: none; (常用於去除超連結底線) 或 underline; (加上底線)。[cite: 2]
顯示特性 (Display)：
- display: block; (將元素轉換為區塊，強制換行並可設定寬高)。[cite: 2]
- display: inline-block; (可設定寬高但維持在同一行)。[cite: 2]
背景與色彩：
- background-color: var(--graffiti-burnt-ochre); (使用品牌定義變數色)。[cite: 2]
- background-size: cover; (背景圖縮放至填滿容器)。[cite: 2]
傳統浮動排版： float: left; 或 right; (常用於圖片旁文字環繞的效果)。[cite: 2]

4. 互動效果與轉場

(將滑鼠移至下方方塊觀察 transition、transform 與 cursor 的變化)[cite: 2]

Hover Me![cite: 2]

核心轉場 (Transition)： transition: all 0.3s ease-in-out; (設定平滑過場時間)。[cite: 2]
變形動作 (Transform)： scale(1.1); (縮放倍率) / rotate(15deg); (旋轉)。[cite: 2]
互動偽類： :hover (滑鼠移入) / :active (點擊瞬間)。[cite: 2]

5. 常用置中方案總結

情境	解決方案
傳統水平置中	`margin: 0 auto;` (需為塊級元素並設定寬度)[cite: 2]
現代萬用置中	`display: flex; justify-content: center; align-items: center;`[cite: 2]
文字垂直置中	`line-height: (與高度數值相同);`[cite: 2]

6. 進階實戰：RWD 響應式表格重構 (Table 轉卡片)

在處理響應式網頁時，手機螢幕往往無法容納橫向多欄位的表格。以下是一段結合 Media Query、CSS 變數 與 偽元素 的經典轉換語法：

/* 當螢幕寬度小於或等於 768px 時觸發 */
@media screen and (max-width: 768px){
    /* 1. 隱藏傳統表頭 */
    .table-rwd thead {
        display: none;
    }
    
    /* 2. 讓每一列 (tr) 變成獨立的卡片區塊 */
    .table-rwd tbody tr {
        display: block;
        border: 1px solid var(--graffiti-dried-blood);
        margin-top: 20px;
    }
    
    /* 3. 讓每個儲存格 (td) 佔滿整行 */
    .table-rwd tbody tr td {
        display: block;
        overflow: hidden; /* 清除內部的浮動影響 */
    }
    
    /* 4. 魔法語法：抓取 HTML 屬性作為標題 */
    .table-rwd tbody tr td::before {
        content: attr(data-th) " : "; /* 動態抓取 data-th 的值 */
        color: var(--graffiti-faded-purple);
        font-size: 20px;
        font-weight: 900;
        display: block;
        float: left; /* 讓標題靠左浮動 */
        width: 30%;  /* 標題佔據 30% 寬度 */
        text-align: right;
        padding-right: 1.5em;
    }
    
    /* 5. 限制內容區塊的寬度 */
    .table-rwd tbody tr td span {
        display: block;
        float: left; /* 讓內容接在標題右方 */
        width: 70%;  /* 內容佔據剩餘 70% 寬度 */
    }
}

語法重點解析：

@media screen and (max-width: 768px)： 媒體查詢的斷點設定，告訴瀏覽器「只有在螢幕寬度 768px 以下時，才套用大括號內的樣式」。
打破表格預設排列： 將 tr 與 td 強制設定為 display: block;，這會讓原本橫向排列的表格欄位，變成垂直堆疊的區塊。
::before 偽元素與 attr()： 這是最核心的技巧！當原本的表頭（thead）被隱藏後，我們必須讓使用者知道每一格代表什麼。透過 content: attr(data-th)，CSS 會自動讀取 HTML 標籤內 data-th="..." 的值（例如：店家名稱），並自動將其顯示在欄位內容的最前面。
比例佈局 (Float)： 為了讓標題（30%）與內容（70%）能在同一行完美並排，這裡運用了 float: left; 來進行傳統的比例切割。

第五章：開發效率提升與 AI 應用

1. Emmet 進階快捷指令 (HTML)

利用縮寫快速建構複雜結構，省去手打角括號的時間：

帶有 ID 與 Class： #header.container + TAB
(產生 <div id="header" class="container">)
父子與兄弟層級： section>div+p + TAB
(產生一個 section 內含一個 div 與一個相鄰的 p)
自訂文字內容： h2{這是一段標題} + TAB
快速產生假文： lorem (產生長文) 或 lorem10 (產生 10 個單字的假文)。

2. Emmet 縮寫 (CSS 篇)

在編寫 CSS 時，不需要打出完整單字，只需輸入首字母：

尺寸： w100 (width: 100px;) / h50p (height: 50%;)
間距： m10-20 (margin: 10px 20px;) / p10 (padding: 10px;)
佈局： df (display: flex;) / aic (align-items: center;) / jcc (justify-content: center;)
定位： pos:a (position: absolute;) / t0 (top: 0;)

3. VS Code 必學系統快捷鍵

功能	指令 (Windows)	指令 (macOS)
快速註解/取消註解	`Ctrl + /`	`Cmd + /`
複製整行並下移	`Shift + Alt + ↓`	`Shift + Opt + ↓`
移動整行代碼	`Alt + ↑ / ↓`	`Opt + ↑ / ↓`
多選相同單字 (多重游標)	`Ctrl + D`	`Cmd + D`

4. AI 輔助開發建議

自動完成建議： 安裝 GitHub Copilot 或 Tabnine。只需寫下註解如 // 建立一個導覽列，AI 就會自動產出 HTML/CSS 建議。
快速除錯： 將錯誤訊息直接貼給 AI，並詢問：「這段程式碼為什麼沒反應？」通常能省下在 Google 搜尋的時間。

學習資源： Emmet Cheat Sheet (最完整的指令百科)。

第六章：Bootstrap 框架與 RWD 響應式網頁

1. Bootstrap 快速上手：環境掛載

要使用 Bootstrap，必須在正確位置掛載 CSS 與 JS 檔案：[cite: 3]

CSS 檔案： 放置於 <head> 標籤內的最上方。[cite: 3]
<link href="...bootstrap.min.css" rel="stylesheet">[cite: 3]
JS 檔案： 放置於 </body> 結束標籤之前（確保 HTML 元素先載入）。[cite: 3]
<script src="...bootstrap.bundle.min.js"></script>[cite: 3]

2. 如何使用官網元件 (Components)

開發時不需要背程式碼，請遵循以下步驟：[cite: 3]

前往 Bootstrap 官網點擊 Docs。[cite: 3]
在左側選單找到 Components（元件）分類。[cite: 3]
導覽列 (Navbar)： 搜尋 Navbar，複製範例程式碼並修改連結。[cite: 3]
卡片 (Card)： 搜尋 Card，常用於呈現產品列表或文章縮圖。[cite: 3]

3. 實用樣式類別 (Utilities)

文字與標題 (Typography)：[cite: 3]
- class="h1": 讓一般標籤（如 span）擁有 H1 的字級與粗細。[cite: 3]
- class="display-1": 超大標題樣式，比 H1 更大、更具設計感。[cite: 3]
- text-start, text-center, text-end: 文字靠左、置中、靠右對齊。[cite: 3]
- text-truncate: 文字過長時自動顯示省略號（需搭配塊級元素使用）。[cite: 3]
清單樣式 (Lists)：[cite: 3]
- list-unstyled: 去除清單的預設項目符號與縮排。[cite: 3]
- list-inline: 將清單項目轉為水平排列（子層 <li> 需加 list-inline-item）。[cite: 3]
圖片處理 (Images)：[cite: 3]
- img-fluid: 響應式圖片關鍵，讓圖片隨容器寬度縮放且不超過原始大小。[cite: 3]
- img-thumbnail: 替圖片加上白色圓角邊框，呈現縮圖質感。[cite: 3]
- d-block mx-auto: 將圖片轉為區塊元素並水平置中。[cite: 3]
浮動與排版 (Layout)：[cite: 3]
- float-start, float-end: 元素向左或向右浮動（常用於圖文繞排）。[cite: 3]
表格結構與 RWD 應用：[cite: 3]
- 層級關係： table (容器) > thead (表頭區) 或 tbody (內容區) > tr (列) > th (標題格) 或 td (內容格)。[cite: 3]
- data-th 用法： 在 <td> 中加入 data-th="欄位名稱"，目的是讓 CSS 在手機版時能抓取該屬性值作為標題顯示。[cite: 3]
- 響應式類別： class="table-rwd" (搭配自訂 CSS)，用於開啟手機版轉為卡片式排列的特殊佈局。[cite: 3]
Bootstrap 表格美化組合：[cite: 3] class="table table-dark table-bordered table-striped table-hover table-rwd"[cite: 3]
- table-dark: 深色主題表格。[cite: 3]
- table-bordered: 加上框線。[cite: 3]
- table-striped: 斑馬紋隔行變色。[cite: 3]
- table-hover: 滑鼠移過列時產生高亮效果。[cite: 3]

4. 進階 RWD 技巧：自定義響應式表格

當表格欄位過多時，在手機版會擠壓變形。我們可以使用以下 CSS 技巧讓表格在 768px 以下轉為「卡片式」呈現：[cite: 3]

/* RWD 表格強大語法 */
@media screen and (max-width: 768px) {
    /* 隱藏傳統表頭 */
    .table-rwd thead {
        display: none;
    }
    /* 讓每個儲存格變成塊級元素，佔滿一行 */
    .table-rwd tbody tr td {
        display: block;
        width: 100%;
        text-align: right; /* 內容靠右 */
        position: relative;
    }
    /* 透過 data-th 屬性將標題注入到欄位前方 */
    .table-rwd tbody tr td::before {
        content: attr(data-th) " : ";
        position: absolute;
        left: 10px;
        font-size: 20px;
        font-weight: 900;
    }
}

[cite: 3]

5. Bootstrap 12 欄網格系統

Bootstrap 將畫面寬度分為 12 等分，常用斷點包括 sm (手機), md (平板), lg (桌機)。[cite: 3]

響應式配置範例： <div class="col-12 col-md-6 col-lg-3">[cite: 3]
(手機佔全寬、平板佔一半、桌機佔四分之一)[cite: 3]

6. 載入 Google Fonts

在 CSS 最上方使用 @import 載入字體，並套用至全站：[cite: 3]

@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:wght@100..900&display=swap');
body {
    font-family: "Noto Sans TC", sans-serif;
}

[cite: 3]

7. 網格系統進階：欄與列的切版應用

掌握欄 (Column) 與列 (Row) 的結構與屬性，是實現複雜且響應式版面的基礎。

基本網格宣告： 必須以 <div class="row"> 作為外層容器，內部再放置 col-1 到 col-12 來劃分寬度比例。
欄位推移 (Offset)： offset-lg-3 可將該區塊向右推移 3 欄的距離，常用於區塊置中或產生特定留白。
間距控制 (Gutter)： Bootstrap 預設欄位之間有間距。可透過 g-0 ~ g-5 控制整體間距；gx 控制左右水平間距；gy 控制上下垂直間距 (0 為無間距，5 為最大間距)。
快速定義列數 (Row Cols)： class="row row-cols-2 row-cols-md-3..." 直接定義該列（row）內部的元素「每行要顯示幾個」。這比在每個子元素上單獨寫 col 更簡潔，常用於商品卡片列表。
顯示與隱藏 (Display)： d-none (隱藏) 與 d-block (顯示區塊)。結合斷點，例如 class="d-none d-md-block d-lg-none"，代表該元素「預設隱藏，平板顯示，桌機又隱藏」，是設計手機與電腦不同選單時的核心語法。

巢狀與混合切版示範 (Nesting & Breakpoints)

以下程式碼示範了「巢狀網格」與「多重斷點」的實戰組合：

<!-- 外層 Row 容器，設定水平垂直間距皆為 3 -->
<div class="row g-3">
    
    <!-- 左側區塊：佔據 3 欄 -->
    <div class="col-3">
        <div class="box02 bg-primary">左側選單</div>
    </div>

    <!-- 右側區塊：佔據 9 欄 -->
    <div class="col-9">
        <!-- 巢狀網格：在 9 欄的空間內，重新切分出新的 12 等分 -->
        <div class="row gx-2 gy-4">
            
            <!-- 子區塊：具備極致的響應式斷點設定 -->
            <!-- 手機(sm): 佔 6 欄 (半寬) -->
            <!-- 平板(md): 佔 4 欄 (一行 3 個) -->
            <!-- 小桌機(lg): 佔 3 欄 (一行 4 個) -->
            <!-- 大桌機(xl): 佔 2 欄 (一行 6 個) -->
            <div class="col-sm-6 col-md-4 col-lg-3 col-xl-2">
                <div class="card">商品卡片 A</div>
            </div>
            
            <!-- 其他子區塊... -->

        </div>
    </div>

</div>

第十二章：Python Flask 後端與 SQLite 資料庫

1. 開發環境與虛擬環境建置

為避免套件衝突，專案應建立虛擬環境 (venv)：

python -m venv venv
venv\Scripts\activate  # 進入虛擬環境
deactivate            # 離開虛擬環境
pip install flask flask-cors  # 安裝必要套件

2. 建立 Flask API (app.py)

使用 @app.route 建立路由，並匯入 CORS 解決前端跨網域介接的問題。

from flask import Flask, jsonify, request
from flask_cors import CORS
import sqlite3

app = Flask(__name__)
CORS(app) # 允許前端跨網域串接

@app.route('/home')
def home():
    return jsonify({"message": "FLASK啟用成功"})

3. SQLite 前端關聯式資料庫

輕量級資料庫，會自動生成 .db 檔案。啟動伺服器時可寫入函式自動初始化資料表：

def init_db():
    conn = sqlite3.connect('products.db')
    cursor = conn.cursor()
    # 建立資料表
    cursor.execute('''CREATE TABLE IF NOT EXISTS products (
                        id INTEGER PRIMARY KEY AUTOINCREMENT,
                        name TEXT NOT NULL,
                        price REAL NOT NULL
                    )''')
    conn.commit()
    conn.close()

防呆驗證：在新增資料寫入資料庫前，可使用 isinstance() 驗證傳入的 Name 是否為字串，Price 是否為數字；並用 SELECT 查詢確認資料是否重複。

第十三章：地圖 API 與視覺動效套件

1. Leaflet.js 地圖框架

開源互動式地圖，圖資來自 OpenStreetMap。整合步驟：

掛入地圖框架與 CSS。
使用 AJAX/Axios 讀取景點 JSON 資料。
過濾具有經緯度的資料。
使用 forEach 將資料標記 (Marker) 渲染至地圖上，點擊可顯示詳細資訊卡片。

2. Leaflet MarkerCluster 分群套件

當資料點過度密集（如幾千筆），可引入 MarkerCluster 套件，將相近的標記融合成一個帶有數字的圓圈，縮放時再展開，提升質感與效能。

3. 視覺與開發好用資源

WOW.js + Animate.css： 結合使用，當網頁滾動到特定區塊時才觸發進場動畫。
Random User Generator： 免費 API，快速產生虛擬的使用者資料（頭像、姓名、信箱），用於 UI 排版展示。
Font Awesome： 強大的免費 Icon 字體庫。