快速全面掌握HTML語法（下）
阿新 • • 發佈：2020-12-18
HTML 標籤（下）
HTML上半部分知識點整理筆記請移步快速全面掌握HTML語法（上）
如果覺得博文對你有些幫助，請關注點贊，你們的肯定是我更新的動力，不定時更新it方面的知識和筆記。
一、表格標籤
1.1 表格的主要作用
表格主要是用來顯示、展示資料，不是用來佈局的。
1.2 表格的基本語法
- 語法
<table> <caption>標題</caption> <thead> <tr> <th>表頭內容</th> <th>表頭內容</th> </tr> </thead> <tbody> <tr> <td>單元格內容</td> <td>單元格內容</td> </tr> </tbody> </table> - 標籤詳解
<table>：定義表格的標籤。
<caption>：定義表格標題的標籤，內容會根據表格居中顯示，在表格上方，不在表格框內。
<thead>：定義表格頭的標籤，內容會居中、加粗顯示，可以多行，在表格框內部。<tbody>：定義表格體的標籤。
<tr>：定義表格行，一般將 <th>、<td> 放入其中，必須套在<table>中。
<th>：定義表頭單元格的標籤，可以在表格頭部分，也可在表格體中，可以不再 <tr>中。
<td>：定義表單元格的標籤，可以在表格頭部分，也可在表格體中，可以不再 <tr>中。
td 是表格資料（table data）的縮寫。
1.3 表格的基本屬性
| 屬性名 | 描述 | 屬性值 |
|---|---|---|
| align | 表格水平對齊方式 | left、ecnter、right，預設為靠左 |
| border | 邊框 | 1 或 “”，預設無邊框 |
| cellpadding | 單元格上下左右內邊距 | 畫素值，預設是1畫素 |
| cellspacing | 單元格上下左右內間距 | 畫素值，預設是2畫素 |
| width | 寬度 | 畫素值或百分比，預設內容填充 |
| bgcolor | 背景顏色 | 顏色值 |
| frame | 控制表格外邊框的 | void、above、below、lhs、rhs、hsides、vsides、box、border |
1.4 合併單元格
特殊情況下,可以把多個單元格合併為一個單元格, 這裡跨行合併：rowspan=“合併單元格的個數”，跨列合併：colspan=“合併單元格的個數”。
- 合併單元格三步曲：
- 先確定是跨行還是跨列合併。
- 找到目標單元格. 寫上合併方式 = 合併的單元格數量。比如：<td colspan=“2”></td>。
- 刪除多餘的單元格。
<table cellpadding=10px cellspacing=10px border="1" width=500px >
<caption>個人簡歷</caption>
<thead>
<tr>
<th colspan="5">個人資訊</th>
</tr>
</thead>
<tbody>
<tr>
<td>姓名</td>
<td></td>
<td>性別</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr>
<td>婚姻狀況：</td>
<td></td>
<td>出生年月：</td>
<td></td>
</tr>
<tr>
<td>名族：</td>
<td></td>
<td>政治面貌：</td>
<td></td>
</tr>
<tr>
<td>身高：</td>
<td></td>
<td>學歷：</td>
<td></td>
</tr>
</tbody>
</table>
二、列表標籤
表格是用來顯示資料的，那麼列表就是用來佈局的。 列表最大的特點就是整齊、整潔、有序，它作為佈局會更加自由和方便。 根據使用情景不同，列表可以分為三大類：無序列表、有序列表和自定義列表。
2.1 無序列表
- 有序列表的語法
<ul> 標籤表示 HTML 頁面中專案的無序列表，一般會以專案符號呈現列表項，而列表項使用 <li> 標籤定義。 無序列表的基本語法格式如下:<ul> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ul> - 無序列表的特點
- 無序列表的各個列表項之間沒有順序級別之分，是並列的。
- <ul></ul> 中只能巢狀 <li></li>，直接在 <ul></ul> 標籤中輸入其他標籤或者文字的做法是不被允許的。
- <li> 與 </li> 之間相當於一個容器，可以容納所有元素。
- 無序列表會帶有自己的樣式屬性，但在實際使用時，我們會使用 CSS 來設定。
2.2 有序列表
- 有序列表的語法
有序列表即為有排列順序的列表，其各個列表項會按照一定的順序排列定義。在 HTML 標籤中，<ol> 標籤用於定義有序列表，列表排序以數字來顯示，並且使用 <li> 標籤來定義列表項。 有序列表的基本語法格式如下:<ol> <li>列表項1</li> <li>列表項2</li> <li>列表項3</li> </ol> - 有序列表的特點
- <ol></ol>中只能巢狀<li></li>，直接在<ol></ol>標籤中輸入其他標籤或者文字的做法是不被允許的。
- <li> 與 </li>之間相當於一個容器，可以容納所有元素。
- 有序列表會帶有自己樣式屬性，但在實際使用時，我們會使用 CSS 來設定。
2.3 自定義列表
-
自定義列表的使用場景:
自定義列表常用於對術語或名詞進行解釋和描述，定義列表的列表項前沒有任何專案符號。
-
自定義列表的基本語法
在 HTML 標籤中，<dl> 標籤用於定義描述列表(或定義列表)，該標籤會與 <dt>(定義專案/名字)和 <dd>(描述每一個專案/名字)一起使用。其基本語法如下:<dl> <dt>名詞1</dt> <dd>名詞1解釋1</dd> <dd>名詞1解釋2</dd> </dl> -
自定義列表的特點
- <dl></dl> 裡面只能包含 <dt> 和 <dd>。
- <dt> 和 <dd>個數沒有限制，經常是一個<dt> 對應多個<dd>。
三、表單標籤
3.1 表單的功能
現實生活中去銀行辦理業務需要填表單，它是為了收集使用者資訊的，那麼在網頁中，我們的表單同樣是為了收集使用者資訊的，可以起到跟使用者進行互動的作用。
3.2 表單的組成
在 HTML 中，一個完整的表單通常由表單域、表單控制元件(也稱為表單元素)和提示資訊3個部分構成。
- 表單域
表單域是一個包含表單元素的區域。在 HTML 標籤中，<form> 標籤用於定義表單域，以實現使用者資訊的收集和傳遞。 <form> 會把它範圍內的表單元素資訊提交給伺服器。
常用屬性表<form action=“url地址” method=“提交方式” name=“表單域名稱"> 各種表單元素控制元件 </form>屬性 描述 值 action 規定當提交表單時向何處傳送表單資料 URL method 規定用於傳送表單資料的 HTTP 方法 get、post name 規定表單的名稱 form_name accept-charset 規定伺服器可處理的表單資料字符集 charset-set enctype 規定在傳送表單資料之前如何對其進行編碼 application/x-www-form-urlencoded、multipart/form-data、text/plain target 規定在何處開啟 action URL _blank、_self、_parent、_top、framename - 表單控制元件
在表單域中可以定義各種表單元素，這些表單元素就是允許使用者在表單中輸入或者選擇的內容控制元件。input 輸入表單元素、select 下拉表單元素、textarea 文字域元素。
3.3 <input> 表單元素
<input>標籤是一個單標籤，是讓使用者輸入資訊的一種表單控制元件，其中包含一個 type 屬性，根據輸入內容的不同，選擇不同的屬性值、例如有文字欄位、複選框、掩碼後的文字控制元件、單選按鈕、按鈕等。
- type 屬性的屬性值及其描述
屬性值 描述 button 定義可點選按鈕（多數情況下，用於通過 JavaScript 啟動指令碼） checkbox 複選框 file 輸入欄位和 “ 瀏覽 ” 按鈕，供檔案上傳 hidden 隱藏的輸入欄位 image 定義影象形式的提交按鈕 password 定義密碼欄位，該欄位中的字元被掩碼 radio 定義單選按鈕 reset 定義重置按鈕，重置會清除表單中所有資料 submit 定義提交按鈕，提交按鈕會吧表單資料傳送到伺服器 text 定義單行輸入欄位，使用者可在其中輸入文字，預設寬度為20個字元 - 除了 type 屬性外，<input>標籤海域其他很多屬性，常用屬性如下：
屬性 屬性值 描述 name 使用者自定義 定義 input 元素的名稱 value 使用者自定義 規定 input 元素的值 checked checked 規定此 input 元素首次載入時應當被選中 maxlength 正整數 規定輸入欄位中的字元的最大長度。 - 【注意】
- name 和 value 是每個表單元素都有的屬性值，主要是給後臺人員使用的。
- name 表單元素的名字，要求單選按鈕和複選框都要有相同的 name 值。
- checked 用於單選按鈕和複選框的，當頁面開啟的時候預設選擇的此按鈕。
- maxlength 是使用者可以在表單元素輸入的最大字元數，一般比較少用。
<-- 省略基本骨架程式碼 -->
<form action="xxx.php" method="GET">
文字框-使用者名稱：<input type="text" name="username" value="請輸入使用者名稱"> <br>
密碼框-密碼：<input type="password" name="pwd"> <br>
單選按鈕-性別：男<input type="radio" name="sex" value="男" checked="checked"> 女<input type="radio" name="sex" value="女"> <br>
複選按鈕-愛好：打籃球<input type="checkbox" name="happy" value="bool" checked="checked"> 睡覺 <input type="checkbox" name="happy" value="sleep"> 打遊戲 <input type="checkbox" name="happy" value="game"> <br>
提交按鈕：<input type="submit"> <input type="submit" value="提交上面資料"> <br>
重置按鈕：<input type="reset"> <input type="reset" value="重新填寫"> <br>
普通按鈕button: <input type="button"> <input type="button" value="獲取簡訊驗證碼"> <br>
上傳檔案：<input type="file"> <br>
</form>
點選提交按鈕，會把使用者填寫的資料提交到表單域定義的 action 值裡，這裡是隨便寫的 xxx.php。後面會跟著使用者填寫的資料，提交給後臺程式設計師使用，如下圖所示。
- <label> 標籤
<label> 標籤用於繫結一個表單元素的，當點選 <label> 標籤內的文字時，瀏覽器會自動將焦點游標定位到對應的表單元素上，用來增加使用者的體驗。
語法：<form action="xxx.php" method="GET"> <label for="nan">男</label><input type="radio" name="sex" id="nan"> <label for="nv">女</label><input type="radio" name="sex" id="nv"> </form>
3.4 <select> 下拉表單元素
- 使用場景
在頁面中，如果有多個選項讓使用者選擇，並且想要節約頁面空間時，我們就可以使用 <select> 標籤空間定義下拉列表。例如我們在網頁中選擇籍貫，年月日等場景。 - 語法
1.<select>中至少包含一對 <option>。<form action="xxx.php" method="GET"> <select> <option>選項一</option> <option selected="selected">選項二</option> <option>選項三</option> <option>選項四</option> </select> </form>
2.在<option> 中定義selected=“selected” 時可以把當前項設定為預設選中項。
3.5 <textarea> 文字域元素
- 使用場景
當用戶需要輸入大量的內容時，就不能再使用文字框表單了，此時我們可以使用 <textarea> 標籤，它可以定義多行文字輸入。例如留言板，評論。 - 語法
1.cols=“每行中的字元數”，rows=“顯示的行數”，在實際開發中很少使用，會用 CSS 來改變大小。<form action="xxx.php" method="GET"> 請留言 <textarea rows="3" cols="20">文字內容</textarea> </form>