# HTML + CSS 全功能教學指南 (Part 2)

## 目標
- 更詳細地介紹 HTML 和 CSS 的進階功能和概念。
- 解釋更複雜的 CSS 技術及其用法。

## 進階 HTML

### 1. 表單和輸入元素
表單元素用於收集用戶輸入的數據。

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Message:</label>
    <textarea id="message" name="message" required></textarea>

    <input type="submit" value="Submit">
</form>

- `<form>`：表單元素，用於包含輸入元素。
- `<label>`：標籤元素，為輸入元素提供描述。
- `<input>`：輸入元素，`type` 屬性定義輸入類型（例如 `text`、`email`、`submit`）。
- `<textarea>`：多行輸入元素。
- `required`：屬性，指定輸入字段為必填項。

### 2. 多媒體元素
用於嵌入視頻和音頻內容。

<video controls>
    <source src="movie.mp4" type="video/mp4">
    Your browser does not support the video tag.
</video>

<audio controls>
    <source src="audio.mp3" type="audio/mp3">
    Your browser does not support the audio element.
</audio>

- `<video>`：視頻元素，`controls` 屬性顯示播放控制。
- `<audio>`：音頻元素，`controls` 屬性顯示播放控制。
- `<source>`：源元素，指定媒體文件及其類型。

### 3. 表格
用於顯示數據表格。

<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>John Doe</td>
            <td>25</td>
            <td>[e-mail]</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>30</td>
            <td>[e-mail]</td>
        </tr>
    </tbody>
</table>

- `<table>`：表格元素。
- `<thead>`：表頭區域。
- `<tbody>`：表格主體。
- `<tr>`：表格行。
- `<th>`：表頭單元格。
- `<td>`：表格數據單元格。

## 進階 CSS

### 1. CSS 選擇器
CSS 提供多種選擇器，用於選擇 HTML 元素並應用樣式。

#### 1.1 後代選擇器
選擇元素的所有後代。

div p {
    color: blue;
}

- `div p`：選擇所有位於 `<div>` 內的 `<p>` 元素。

#### 1.2 子選擇器
選擇元素的直接子元素。

div > p {
    color: red;
}

- `div > p`：選擇 `<div>` 的所有直接子元素 `<p>`。

#### 1.3 同級選擇器
選擇同一層級中的元素。

h1 + p {
    color: green;
}

- `h1 + p`：選擇緊接著 `<h1>` 之後的第一個 `<p>` 元素。

### 2. CSS 動畫與過渡

#### 2.1 過渡
用於平滑地改變 CSS 屬性。

button {
    background-color: blue;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: green;
}

- `transition`：定義過渡效果，包含屬性、持續時間和過渡函數。
- `hover` 狀態下的樣式變化。

#### 2.2 動畫
定義關鍵幀動畫效果。

@keyframes slidein {
    from {
        transform: translateX(100%);
    }
    to {
        transform: translateX(0);
    }
}

div {
    animation: slidein 1s ease-in-out;
}

- `@keyframes`：定義動畫的關鍵幀。
- `animation`：應用動畫，包含名稱、持續時間和過渡函數。

### 3. CSS 位置配置
位置配置是控制元素在頁面上位置的重要工具。

#### 3.1 靜態定位
預設值，元素按正常流動布局。

div {
    position: static;
}

#### 3.2 相對定位
元素相對於其正常位置進行移動。

div {
    position: relative;
    top: 10px;
    left: 10px;
}

#### 3.3 絕對定位
元素相對於最近的已定位祖先元素進行移動。

div {
    position: absolute;
    top: 50px;
    left: 50px;
}

#### 3.4 固定定位
元素相對於瀏覽器窗口進行移動。

div {
    position: fixed;
    top: 0;
    right: 0;
}

#### 3.5 粘性定位
元素在滾動到特定位置時變為固定。

div {
    position: sticky;
    top: 0;
}

### 4. CSS Flexbox
Flexbox 是一種高效的布局模型，用於設計彈性佈局。

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.item {
    flex: 1;
}

- `display: flex`：將容器設置為彈性盒模型。
- `flex-direction`：設置主軸方向（如 `row` 或 `column`）。
- `justify-content`：設定主軸對齊方式。
- `align-items`：設定交叉軸對齊方式。
- `flex`：設定元素的彈性伸縮。

### 5. CSS Grid
Grid 是另一種強大的布局模型，用於設計複雜的網格布局。

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
}

.grid-item {
    background-color: #ccc;
    padding: 20px;
}

- `display: grid`：將容器設置為網格布局。
- `grid-template-columns`：設定網格列的模板。
- `grid-gap`：設定網格項之間的間距。

### 6. CSS 變換
用於改變元素的尺寸、位置和旋轉角度。

div {
    transform: scale(1.5) rotate(45deg) translateX(100px);
}

- `transform: scale()`：縮放元素。
- `transform: rotate()`：旋轉元素。
- `transform: translateX()`：沿 X 軸平移元素。

### 7. CSS 變量
CSS 變量允許在樣式表中定義可重用的值。

:root {
    --primary-color: #4CAF50;
}

div {
    background-color: var(--primary-color);
}

- `--primary-color`：定義 CSS 變量。
- `var(--primary-color)`：使用 CSS 變量。

---

- [✔️] 此文章部分內容為AI創作，若有錯誤請備註。
- [✔️] 分享貼文請標註來源。