📢 本文由 gemini-2.5-flash 翻譯
前言
HTML 學習一 - 基礎:
https://blog.yexca.net/archives/146
HTML 學習二 - 清單、表格與表單:
https://blog.yexca.net/archives/150
HTML 學習三 - 網頁版面配置:
https://blog.yexca.net/archives/195
清單
清單分為無序、有序清單和定義清單
無序清單
unordered list -> list
1
2
3
4
5
| <ul>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ul>
|
效果如下
有序清單
ordered list -> list
1
2
3
4
5
| <ol>
<li>第一項</li>
<li>第二項</li>
<li>第三項</li>
</ol>
|
效果如下
- 第一項
- 第二項
- 第三項
定義清單
個人記憶: define list -> define title -> define describe
1
2
3
4
5
6
7
8
| <dl>
<dt>第一標題</dt>
<dd>1.1 描述</dd>
<dd>1.2 描述</dd>
<dt>第二標題</dt>
<dd>2.1 描述</dd>
<dd>2.2 描述</dd>
</dl>
|
效果如下
- 第一標題
- 1.1 描述
- 1.2 描述
- 第二標題
- 2.1 描述
- 2.2 描述
dl 標籤裡只能包含 dt 和 dd 標籤，而 dt 和 dd 標籤裡可以包含任何內容
表格
| 標籤 | 說明 | 個人記憶 |
|---|
| table | 定義表格 | |
| tr | 表格的列 | table row |
| th | 表頭儲存格 | table head |
| td | 內容儲存格 | table data |
以下結構標籤可以省略，主要用於瀏覽器
| 標籤 | 說明 |
|---|
| thead | 定義標頭內容 |
| tbody | 定義表格主體 |
| tfoot | 定義表格底部，彙總資訊 |
表格範例
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| <table>
<thead>
<tr>
<th>\</th>
<th>x</th>
<th>y</th>
<th>total</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>50</td>
<td>50</td>
<td>100</td>
</tr>
<tr>
<td>b</td>
<td>50</td>
<td>50</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</tfoot>
</table>
|
效果如下
| \ | x | y | total |
|---|
| a | 50 | 50 | 100 |
| b | 50 | 50 | 100 |
| total | 100 | 100 | 100 |
儲存格合併
表格合併分為跨行合併與跨列合併，合併後應刪除被合併的儲存格
| 屬性 | 說明 |
|---|
| rowspan | 跨行合併，值為合併的行數 |
| colspan | 跨列合併，值為合併的列數 |
例如將以上表格第二列的第二個儲存格與第三列的第二個儲存格進行跨行合併，最後一列的最後三個儲存格跨列合併
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
| <table>
<thead>
<tr>
<th>\</th>
<th>x</th>
<th>y</th>
<th>total</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<!-- 此處增加跨行合併屬性 -->
<td rowspan="2">50</td>
<td>50</td>
<td>100</td>
</tr>
<tr>
<td>b</td>
<!-- 此內容可以刪除，此處註解 -->
<!--<td>50</td>-->
<td>50</td>
<td>100</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>total</td>
<!-- 此處增加跨列合併屬性 -->
<td colspan="3">100</td>
<!-- 此內容可以刪除，此處註解 -->
<!--<td>100</td>
<td>100</td>-->
</tr>
</tfoot>
</table>
|
效果如下
| \ | x | y | total |
|---|
| a | 50 | 50 | 100 |
| b | 50 | 100 |
| total | 100 |
如果使用了結構標籤 (thead, tbody, tfoot)，則不能跨結構合併，例如以上表格第三列不能和最後一列合併
表單
一個表單需要使用 form 標籤來劃定表單的範圍，以下所述標籤需要放在 form 標籤內
大多數表單使用 input 標籤實作，根據 type 屬性值的不同，能實作不同功能
| type 屬性值 | 說明 |
|---|
| text | 文字方塊 |
| password | 密碼方塊 |
| radio | 單選按鈕 |
| checkbox | 核取方塊 |
| file | 上傳檔案 |
佔位文字
佔位文字即提示資訊，文字方塊和密碼方塊可以使用
1
| <input type="text" placeholder="提示資訊" />
|
效果如下
單選按鈕 (radio)
以下程式碼實作性別選擇
1
2
3
| 性別：
<input type="radio" name="gender" checked />男
<input type="radio" name="gender" />女
|
效果如下
性別：
男
女
檔案上傳
預設情況下，file 類型只能上傳一個檔案，若要上傳多個檔案，可以新增 multiple 屬性
1
| <input type="file" multiple />
|
核取方塊 (checkbox)
又稱複選方塊，預設選取可以使用屬性 checked
1
2
3
4
| <input type="checkbox" checked /> a
<input type="checkbox" /> b
<input type="checkbox" /> c
<input type="checkbox" /> d
|
下拉式選單
1
2
3
4
5
6
7
| <select>
<option>CN</option>
<option>USA</option>
<option>UK</option>
<!-- selected 指定預設選取 -->
<option selected>JP</option>
</select>
|
文字區域
實作多行輸入文字的表單控制項，一般為個人簡介
1
| <textarea>提示資訊</textarea>
|
label 標籤
用於網頁中某個標籤的說明文字，還可以將文字和表單控制項綁定，以增大表單控制項的點擊範圍
例如上述性別單選按鈕只有選取圓圈才能選取，而使用此標籤後，選取文字也能選取單選按鈕
方法一
input 標籤新增 id 屬性，label 標籤新增 for 屬性，兩個屬性值相同
1
2
3
4
| <input type="radio" name="gender" id="male"/>
<label for="male">男</label>
<input type="radio" name="gender" id="female"/>
<label for="female">女</label>
|
方法二
直接使用 label 標籤包覆文字和表單控制項
1
2
| <label><input type="radio" name="gender" />男</label>
<label><input type="radio" name="gender" />女</label>
|
支援 label 標籤以增大點擊範圍的控制項包括：文字方塊、密碼方塊、上傳檔案、單選按鈕、核取方塊、下拉式選單、文字區域等
按鈕
button 標籤根據 type 屬性值的不同，功能也會不同
| type 屬性值 | 說明 |
|---|
| submit | 預設功能，提交資料到後端 |
| reset | 重設按鈕，將表單控制項恢復預設值 |
| button | 一般按鈕，需搭配 JavaScript 使用 |
1
| <button type="">按鈕</button>
|