影片與網頁影片嵌入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 10. <video>: 嵌入影片檔案.
ex: media/sayhi.mp4 -->
<video src="media/sayhi.mp4"
controls loop muted poster="media/poster.png" width="800" >
</video>
<!-- 你不一定需要控制面板屬性<controls>，視用途決定 -->
<!-- controls: 控制面板-->
<!-- loop: 循環播放-->
<!-- muted: 設置靜音-->
<!-- poster: 封面圖片. ex: media/poster.png -->
<br>
<!-- 20. 透過 <iframe> 嵌入 youtube 影片.
ex: <https://youtu.be/ewZ_YWbIWXI> -->
<!-- 在 youtube 影片上點右鍵 -> 複製嵌入程式碼 -->
<iframe width="685" height="385"
src="<https://www.youtube.com/embed/ewZ_YWbIWXI>"
title="HTML Promo Video" frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture;
web-share" referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen></iframe>
</body>
</html>
<TABLE>的應用
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 定義網頁的編碼為UTF-8 -->
<meta charset="UTF-8">
<style>
/* 設置表格邊框分離 */
table {
border-collapse: separate;
}
/* 設置表格、表頭和單元格的邊框為黑色，且邊框寬度為 3px，
內部填充為 15px，文字靠中對齊 */
table,
th,
td {
border: 3px solid black;
padding: 15px;
text-align: center;
/* border的syntax長這樣：Syntax: <line-width> || <line-style> || <color>*/
}
/* css的註解長這樣 */
</style>
</head>
<body>
<!-- 參照 10_table.png 建立一個 4x5 的表格，第一列是標題列 -->
<!-- (標題列)第一列： A B C D -->
<!-- 第二列： A1 B1 C1 D1 -->
<!-- 第三列： A2 B2 C2 D2 -->
<!-- 第四列： A3 B3 C3 D3 -->
<!-- 第五列： A4 B4 C4 D4 -->
<table>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
<th>D</th>
</tr>
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td>C4</td>
<td>D4</td>
</tr>
</table>
<!-- <table>: 標示表格 -->
<!-- <tr>: 表格中的一列 -->
<!-- <th>: 標題列中的一個儲存格 -->
<!-- <td>: 資料列中的一個儲存格 -->
<!-- step1. 加入 <table> -->
<!-- step2. 在 <table> 內加入 5 個列: <tr> -->
<!-- step3. 第一列 加入 4 個標題欄位: <th> -->
<!-- step4. 第二~五列分別 加入 4 個欄位: <td> -->
</body>
</html>
進階表格設定(分割與嵌入)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table {
border-collapse: collapse;
}
table,
th,
td {
/* 設置表格邊框為1像素實線黑色 */
border: 1px solid black;
/* 設置表格內邊距為10像素 */
padding: 10px;
/* 設置表格內文本居中對齊 */
text-align: center;
}
</style>
</head>
<body>
<!-- <th> 和 <td> 的屬性 -->
<!-- colspan: 跨欄合併儲存格 -->
<!-- rowspan: 跨列合併儲存格 -->
<!-- 參照 20_合併儲存格.png 建立一個表格，第一列是標題列 -->
<!-- (標題列)第一列： A B C D -->
<!-- 第二列： A1 B1 C1 D1 -->
<!-- 第三列： A2 B2 C2 D2 -->
<!-- 第四列： A3 B3 C3 D3 -->
<!-- 第五列： A4 B4 C4 D4 -->
<table>
<tr>
<!-- 定義表格標題單元格，合併兩欄 -->
<th colspan="2">A</th>
<!-- 定義表格標題單元格，合併兩欄 -->
<th colspan="2">B</th>
</tr>
<tr>
<td rowspan="3">A1</td>
<!-- 定義表格標題單元格，合併三列 -->
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>B2</td>
<td>C2</td>
<td>D2</td>
</tr>
<tr>
<td>B3</td>
<td>C3</td>
<td>D3</td>
</tr>
<!-- step1. 加入 <table> -->
<!-- step2. 在 <table> 內加入 5 個列 <tr> -->
<!-- step3. 第一列 加入 4 個標題欄位: <th> -->
<!-- step4. 第二~五列分別 加入 4 個欄位: <td> -->
<!-- step5. 合併跨列和跨欄的儲存格 -->
<!-- step6. 將 "被合併的儲存格" 移除 -->
</body>
</html>
進階表格練習：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table {
/* 設置表格邊框合併 */
border-collapse: collapse;
}
table,
th,
td {
/* 設置表格、表頭和單元格的邊框樣式 */
border: 1px solid #AC915D;
}
th {
/* 設置表頭文字顏色 */
color: #AC915D;
}
body
{
/* 設置背景圖片 */
background-image: url("img/backimg.jpg");
/* 設置背景圖片不重複 */
background-repeat: no-repeat;
/* 假如讓背景圖片重複顯示，將會導致表格被拉伸放大網頁範圍，因而這邊選擇不重複 */
.name {
color: #AC915D;
height: 30px;
}
.desc {
color: white;
width: 200px;
}
/* body{
background-image: url("img/backimg.jpg");
background-repeat: no-repeat;
*/
}
/* .opname{
color: #AC915D;
height: 30px;
}
.opdesc{
color: white;
width: 200px;
} */
</style>
</head>
<body>
<!-- 參照 30_table練習完成圖.png 建立一個表格 -->
<!-- step1. 在<body>裡面放入一個表格 -->
<!-- (標題列)第一列： A B C D -->
<!-- 第二列： A1 B1 C1 D1 -->
<!-- 第三列： A2 B2 C2 D2 -->
<!-- 第四列： A3 B3 C3 D3 -->
<!-- 第五列： A4 B4 C4 D4 -->
<table>
<tr>
<th colspan="4">海賊王人物列表</th>
</tr>
<tr>
<td rowspan="2" about="魯夫">
<img src="img/op_01.jpg" alt="魯夫">
</td>
<td class="name">魯夫</td>
<td rowspan="2" about="索隆">
<img src="img/op_02.jpg" alt="索隆">
</td>
<td class="name">索隆</td>
</tr>
<tr>
<td class="desc">左眼下方有疤痕，是為了向<br>
「紅髮」傑克証明自己的勇<br>
敢，自己用刀劃傷而留下的</td>
<td class="desc">專長：迷路，和捲眉毛吵架</td>
</tr>
<tr>
<td rowspan="2" about="娜美">
<img src="img/op_03.jpg" alt="娜美">
</td>
<td class="name">娜美</td>
<td rowspan="2" about="騙人布">
<img src="img/op_04.jpg" alt="騙人布">
</td>
<td class="name">騙人布</td>
</tr>
<tr>
<td class="desc">據說尾田是參考老婆的樣子畫出娜美的</td>
<td class="desc">草帽海賊團的狙擊手</td>
</tr>
<!-- step2. 合併儲存格，並移除"被合併的儲存格" -->
<!-- step3. 放入圖片和對應文字 -->
<!-- 海賊王人物列表
魯夫：左眼下方有疤痕，是為了向「紅髮」傑克証明自己的勇敢，自己用刀劃傷而留下的
索隆：專長：迷路，和捲眉毛吵架
娜美：據說尾田是參考老婆的樣子畫出娜美的
騙人布：草帽海賊團的狙擊手 -->
<!-- step4. 調整字型顏色: #AC915D、white -->
<!-- step5. 欄位高度、欄位寬度：height: 30px (角色名)、width: 200px (說明欄) -->
<!-- step6. 加入網頁背景底圖：background-image: url("img/backimg.jpg") -->
</table>
</body>
</html>
完成圖：
使用者表格嘗試：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<p><a href="<https://www.w3schools.com/html/html_forms.asp>">HTML Forms</a></p>
<p><a href="<https://www.w3schools.com/html/html_form_elements.asp>">HTML Form Elements</a></p>
<hr>
<!-- 試試看，<select>、<option> -->
<!-- <select name=" " id=" "></select> -->
<!-- 這邊的name是給sever端使用 -->
<!-- 練習：選擇手機型號 -->
<!-- 標籤元素，用於標示選擇手機型號的標題 -->
<label for="phone">選擇手機型號:</label>
<!-- 下拉選單元素，用於讓使用者選擇手機型號 -->
<select id="phone">
<!-- 下拉選單中的選項，代表不同的手機型號 -->
<option>iphone 14</option>
<option>iphone 15</option>
<option>pixel 7</option>
<option>pixel 8</option>
</select>
<br>
<hr>
<!-- 試試看，<select>、<optgroup>、<option> -->
<!-- 標籤元素，用於標示選擇手機型號的標題 -->
<label for="phone2">選擇手機型號:</label>
<!-- 下拉選單元素，用於讓使用者選擇手機型號 -->
<select id="phone2">
<!-- 選項群組，標示為 "apple"，包含兩個選項 -->
<optgroup label="apple">
<option>iphone 14</option>
<option>iphone 15</option>
</optgroup>
<!-- 選項群組，標示為 "google pixel"，包含兩個選項 -->
<optgroup label="google pixel">
<option>pixel 7</option>
<option>pixel 8</option>
</optgroup>
</select>
<br>
<hr>
<br>
<!-- 試試看，<datalist>、<option> -->
<p>
輸入喜歡的電影：<br>
<input type="text" list="movies">
<br>
<!-- 定義一個datalist，用於提供輸入框的預定義選項 -->
<datalist id="movies">
<option value="蜘蛛人">
<option value="奇異博士">
<option value="復仇者聯盟">
<!-- 當option元素有value屬性時，
且在datalist元素中有對應的value值時不需要結束標籤 -->
</datalist>
</p>
</body>
</html>
依照此表格練習
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 參照 20_form_input_types_完成圖.png 製作一份表單 -->
<!-- step1: 標題 -->
<!-- step2: 加入一個表單 <form> -->
<!-- step3. 在<form>表單內加入<fieldset>群組並給予說明 -->
<!-- step4. 在表單<form>內加入姓名和輸入框 -->
<!-- step5. 在表單<form>內加入電話和輸入框 -->
<!-- step6. 加入職業和單選框 -->
<!-- step7. 加入年紀和單選框、交通工具和複選框，步驟和 step6. 類似 -->
<h1>
通勤工具使用者調查
</h1>
<form>
<fieldset>
<legend>基本資料</legend>
<!-- 輸入使用者姓名 -->
<label for="UserName">姓名：</label>
<input type="text" id="userName" name="userName" required>
<br>
<!-- 輸入使用者電話號碼 -->
<label for="phone">電話：</label>
<input type="tel" id="userPhone" name="userPhone" required>
<br>
</fieldset>
<!-- 選擇職業 -->
職業：
<input name="job" type="radio" id="student">
<label for="student">學生</label>
<input name="job" type="radio" id="teacher">
<label for="teacher">教師</label>
<input name="job" type="radio" id="other">
<label for="other">其他</label>
<br>
<!-- 選擇年齡範圍 -->
年紀:
<input type="radio" id="age20to30" name="age">
<label for="age20to30">20-30</label>
<input type="radio" id="age30to40" name="age">
<label for="age30to40">30-40</label>
<input type="radio" id="age40to50" name="age">
<label for="age40to50">40-50</label>
<input type="radio" id="over50" name="age">
<label for="over50">50+</label>
<br>
<!-- 選擇交通工具 -->
交通工具:
<input type="checkbox" id="bike" name="transportation">
<label for="bike">腳踏車</label>
<input type="checkbox" id="motorcycle" name="transportation">
<label for="motorcycle">機車</label>
<input type="checkbox" id="ship" name="transportation">
<label for="ship">船</label>
<input type="checkbox" id="other" name="transportation">
<label for="other">其他</label>
<br>
<!-- 提交表單 -->
<input type="submit" value="送出">
</form>
</body>
</html>
一句話總結：能讓CSS幫JAVASCRIPT做一些簡單的互動
參考網址：CSS 偽類 --- CSS Pseudo-classes (w3schools.com)
虛擬類別（Pseudo-classes） 是 CSS 中的特別類別，用來定義元素在特定狀態下的樣式。它們不是實際存在於 HTML 標籤中的類別，而是根據元素的狀態或位置來應用樣式。