表格標簽
表格的主要作用
表格主要用于顯示、展示資料,因為他可以讓資料顯示的非常的規整,可讀性非常的好,特別是后臺展示資料的時候,能夠熟練運用表格就顯得很重要,一個清爽簡約的表格能夠把繁雜的資料表現得很有條理,
例如:

表格的基本語法

<table> </table>是用于定義表格的標簽,<tr> </tr>標簽用于定義表格里面的行,必須嵌套在<table> </table>標簽中,<td> </td>用于定義表格中的單元格,必須嵌套在<tr> </tr>標簽中,- td指表格資料(table data),即資料單元格的內容
示例代碼:
<table>
<tr>
<td>姓名</td>
<td>性別</td>
<td> 年齡</td>
</tr>
<tr>
<td>劉德華</td>
<td>男</td>
<td> 56</td>
</tr>
<tr>
<td>張學友</td>
<td>男</td>
<td> 58</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td> 51</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td> 57</td>
</tr>
</table>
表頭單元格標簽
一般表頭單元格位于表格的第一行或第一列,表頭單元格里面的文本內容會加粗居中顯示,
<th>標簽表示HTML表格的表頭部分(table head 的縮寫)

例如:

示例代碼:
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th> 年齡</th>
</tr>
<tr>
<td>劉德華</td>
<td>男</td>
<td> 56</td>
</tr>
<tr>
<td>張學友</td>
<td>男</td>
<td> 58</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td> 51</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td> 57</td>
</tr>
</table>
表格結構標簽
使用場景:因為表格可能很長,為了更好的表示表格的語意,可以將表格分割成表格頭部和表格主體兩大部分,
在表格標簽中,分別用:<thead>標簽 表格的頭部區域、<tbody>標簽 表格的主體區域,這樣可以更好的分清表格結構,
<thead> </thead>:用于定義表格的的頭部,<thead>內部必須擁有<tr>標簽,一般位于第一行,<tbody> </tbody>:用于定義表格的主體,主要用于方資料本體,- 以上標簽都是放在
<table> </table>標簽中,
注意:<thead> ≠ <th>
示例:

示例代碼:
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<tbeda>
<tr>
<th>姓名</th>
<th>性別</th>
<th> 年齡</th>
</tr>
</tbeda>
<tdaby>
<tr>
<td>劉德華</td>
<td>男</td>
<td> 56</td>
</tr>
<tr>
<td>張學友</td>
<td>男</td>
<td> 58</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td> 51</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td> 57</td>
</tr>
</tdaby>
</table>
表格的相關屬性
表格標簽的屬性在實際開發中并不常用,一般通過CSS來設定,
| 屬性名 | 屬性值 | 描述 |
|---|---|---|
| align | left、center、right | 規定表格相對周圍元素的對齊方式, |
| border | 1 或 "" | 規定表格單元是否擁有邊框,默認為"",表示沒有邊框, |
| cellpadding | 像素值 | 規定單元格與其內容之間的空白,默認1像素, |
| cellspacing | 像素值 | 規定單元格之間的空白,默認2像素, |
| width | 像素值或百分比 | 規定表格的寬度, |
| hight | 像素值或百分比 | 規定表格的高度, |
示例代碼:
<!-- 這些屬性要寫到表格標簽table 里面去 -->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249">
<tr>
<th>姓名</th>
<th>性別</th>
<th> 年齡</th>
</tr>
<tr>
<td>劉德華</td>
<td>男</td>
<td> 56</td>
</tr>
<tr>
<td>張學友</td>
<td>男</td>
<td> 58</td>
</tr>
<tr>
<td>郭富城</td>
<td>男</td>
<td> 51</td>
</tr>
<tr>
<td>黎明</td>
<td>男</td>
<td> 57</td>
</tr>
</table>
合并單元格
特殊情況下,需要把多個單元格合并為一個單元格,
示例:

合并單元格的方式:
- 跨行合并:rowspan="合并單元格的個數"
- 跨列合并:colspan="合并單元格的個數"

目標單元格:(寫合并代碼)
- 跨行:最上側單元格為目標單元格,寫合并代碼
- 跨列:最左側單元格為目標單元格,寫合并代碼

合并單元格三部曲:
- 先確定跨行還是跨列合并,
- 找到目標單元格,寫上 合并方式 = 合并單元格數量,比如:
<td colspan="2"> </td> - 洗掉多余的單元格
示例代碼:
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
串列標簽
表格標簽是用來顯示資料的,那么串列就是用來布局的,
串列最大的特點就是整齊、整潔、有序,它作為布局會更加自由和方便,
根據使用情景不同,串列可以分為三大類:無序串列,有序串列和自定義串列,

無序串列
<ul>標簽表示HTML頁面中專案的無序串列,一般會議專案符號呈現串列項,而串列項使用<li>標簽定義,
無序串列的基本語法格式如下:

- 無序串列的各個串列項之間沒有順序級別之分,是并列的,
<ul> </ul>中只能嵌套<li></li>,直接在<ul></ul>標簽中輸入其他標簽或文字的做法是不被允許的,<li>與</li>之間相當于一個容器,可以容納所有元素,- 無序串列會帶有自己的樣式屬性,但實際使用中,我們會使用CSS來設定,
代碼示例:
<ul>
<li>榴蓮</li>
<li>臭豆腐</li>
<li>螺螄粉</li>
<li>
<p>123</p>
</li>
</ul>
有序串列
有序串列即為有排列順序的串列,其各個串列項會按照一定的順序排列帶定義,
在HTML中,<ol>標簽用于定義有序串列,串列以數字來顯示,并且使用<li>標簽來定義串列項,
有序串列的基本語法格式如下:

<ol> </ol>中只能嵌套<li></li>,直接在<ul></ul>標簽中輸入其他標簽或文字的做法是不被允許的,<li>與</li>之間相當于一個容器,可以容納所有元素,- 有序串列會帶有自己的樣式屬性,但實際使用中,我們會使用CSS來設定,
代碼示例:
<h4>粉絲排行榜</h4>
<ol>
<li>劉德華 10000</li>
<li>劉若英 1000</li>
</ol>
自定義串列
自定義串列常用于對術語或名詞進行解釋和描述,定義串列的串列項前乜有任何專案符號,

在HTML標簽中,<dl>標簽用于定義描述串列,該標簽會與<dt>(定義專案/名字)和<dd>(描述每一個專案/名字)一起使用,
基本語法如下:

<dl></dl>里面只能包含<dt>和<dd>,<dt>和<dd>個數沒有限制,經常一個<dt>對應多個<dd>
表單標簽
現實中的表單,我們去銀行辦理信用卡填寫的單子,

網頁中的表單展示

為什么需要表單
使用表單的目的是為了收集用戶資訊,
在我們網頁中,我們也需要跟用戶進行互動,收集用戶資料,此時我們就需要表單,
表單的組成
在HTML中,一個完整的表單通常由表單域、表單控制元件(也稱表單元素)和提示資訊3個部分組成,

表單域
表單域是一個包含表單元素的區域
在HTML標簽中,<form>標簽用于定義表單域,以實作用戶資訊的收集和傳遞,
<form>會把它范圍內的表單元素資訊提交給服務器,
基本語法如下:

常用屬性:
| 屬性 | 屬性值 | 作用 |
|---|---|---|
| action | url地址 | 用于指定接收并處理表單資料的服務器程式的URL地址, |
| method | get/post | 用于設定表單資料的提交方式,其取值為get或post, |
| name | 名稱 | 用于指定表單的名稱,以區分同意個頁面中的多個表單域, |
示例代碼:
<form action="demo.html" method="POST" name="name1">
</form>
p.s.:這里我們暫時不用表單域提交資料,只需要寫上form標簽即可,
在表單域中可以定義各種表單元素,這些表單元素就是允許用戶在表單中輸入或者選擇的內容控制元件,
- input表單元素
- select下拉表單元素
- textarea文本域元素
input表單元素
英文單詞input是輸入的意思,而在表單元素中<input>標簽用于收集用戶資訊,
在<input>標簽中,必須包含一個type屬性,根據不同的type屬性值,輸入欄位擁有很多形式(可以是文本欄位、復選框、掩碼后的文本控制元件、單選按鈕等),
語法格式如下:

<input>標簽為單標簽- type屬性設定不同的屬性值用來指定不同的控制元件型別
input標簽的屬性及描述
type屬性的屬性值及其描述如下:
| 屬性值 | 描述 |
|---|---|
| button | 定義點擊按鈕(多數情況下,用于通過js啟動腳本), |
| checkbox | 定義復選框, |
| file | 定義輸入欄位和“瀏覽”按鈕,供檔案上傳, |
| hidden | 定義隱藏的輸入欄位, |
| image | 定義影像形式的提交按鈕, |
| password | 定義密碼欄位,該欄位中的字符唄掩碼, |
| radio | 定義單選按鈕, |
| reset | 定義重置按鈕,重置按鈕會清除表單中的所有資料, |
| submit | 定義提交按鈕,提交按鈕會把表單資料發送到服務器, |
| text | 定義單行的輸入欄位,用戶可在其中輸入文本,默認寬度為20個字符, |
除type屬性外,<input>標簽還有其他很多屬性,其常用屬性如下:
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| name | 由用戶自定義 | 用于定義input元素的名稱, |
| value | 由用戶自定義 | 用于定義input元素的值, |
| checked | checked | 規定此input元素首次加載時應當被選中, |
| maxlength | 正整數 | 規定輸入欄位中的字符的最大長度, |
- input之type屬性文本框和密碼框
<form>
<!-- text 文本框 用戶可以里面輸入任何文字 -->
用戶名: <input type="text"> <br>
<!-- password 密碼框 用戶看不見輸入的密碼 -->
密碼: <input type="password"> <br>
</form>
- input之type屬性單選框和復選框
<form>
<!-- radio 單選按鈕 可以實作多選一 -->
性別: 男 <input type="radio"> 女 <input type="radio"> <br>
<!-- checkbox 復選框 可以實作多選 -->
愛好: 吃飯 <input type="checkbox"> 睡覺 <input type="checkbox"> 打豆豆 <input type="checkbox">
</form>
- input之name和value屬性
<form>
<!-- text 文本框 用戶可以里面輸入任何文字 -->
用戶名: <input type="text" name="username" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/請輸入用戶名"> <br>
<!-- password 密碼框 用戶看不見輸入的密碼 -->
密碼: <input type="password" name="pwd"> <br>
<!-- radio 單選按鈕 可以實作多選一 -->
<!-- name 是表單元素名字 這里性別單選按鈕必須有相同的名字name 才可以實作多選1 -->
性別: 男 <input type="radio" name="sex" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/男"> 女 <input type="radio" name="sex" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/女" > <br>
<!-- checkbox 復選框 可以實作多選 -->
愛好: 吃飯 <input type="checkbox" name="hobby" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/吃飯"> 睡覺 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" >
</form>
- input之checked和maxlength屬性
<form>
<!-- text 文本框 用戶可以里面輸入任何文字 -->
用戶名: <input type="text" name="username" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/請輸入用戶名" maxlength="6"> <br>
<!-- password 密碼框 用戶看不見輸入的密碼 -->
密碼: <input type="password" name="pwd"> <br>
<!-- radio 單選按鈕 可以實作多選一 -->
<!-- name 是表單元素名字 這里性別單選按鈕必須有相同的名字name 才可以實作多選1 -->
<!-- 單選按鈕和復選框可以設定checked 屬性, 當頁面打開的時候就可以默認選中這個按鈕 -->
性別: 男 <input type="radio" name="sex" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/男"> 女 <input type="radio" name="sex" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/女" checked="checked"> <br>
<!-- checkbox 復選框 可以實作多選 -->
愛好: 吃飯 <input type="checkbox" name="hobby" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/吃飯"> 睡覺 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
</form>
- input之type屬性提交和重置按鈕
<form action="xxx.php" method="get">
<!-- text 文本框 用戶可以里面輸入任何文字 -->
用戶名: <input type="text" name="username" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/請輸入用戶名" maxlength="6"> <br>
<!-- password 密碼框 用戶看不見輸入的密碼 -->
密碼: <input type="password" name="pwd"> <br>
<!-- radio 單選按鈕 可以實作多選一 -->
<!-- name 是表單元素名字 這里性別單選按鈕必須有相同的名字name 才可以實作多選1 -->
<!-- 單選按鈕和復選框可以設定checked 屬性, 當頁面打開的時候就可以默認選中這個按鈕 -->
性別: 男 <input type="radio" name="sex" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/男"> 女 <input type="radio" name="sex" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/女" checked="checked"> <br>
<!-- checkbox 復選框 可以實作多選 -->
愛好: 吃飯 <input type="checkbox" name="hobby" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/吃飯"> 睡覺 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 點擊了提交按鈕,可以把 表單域 form 里面的表單元素 里面的值 提交給后臺服務器 -->
<input type="submit" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/免費注冊">
<!-- 重置按鈕可以還原表單元素初始的默認狀態 -->
<input type="reset" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/重新填寫">
</form>
- input之type屬性普通按鈕和檔案域
<form action="xxx.php" method="get">
<!-- text 文本框 用戶可以里面輸入任何文字 -->
用戶名: <input type="text" name="username" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/請輸入用戶名" maxlength="6"> <br>
<!-- password 密碼框 用戶看不見輸入的密碼 -->
密碼: <input type="password" name="pwd"> <br>
<!-- radio 單選按鈕 可以實作多選一 -->
<!-- name 是表單元素名字 這里性別單選按鈕必須有相同的名字name 才可以實作多選1 -->
<!-- 單選按鈕和復選框可以設定checked 屬性, 當頁面打開的時候就可以默認選中這個按鈕 -->
性別: 男 <input type="radio" name="sex" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/男"> 女 <input type="radio" name="sex" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/女" checked="checked"> <br>
<!-- checkbox 復選框 可以實作多選 -->
愛好: 吃飯 <input type="checkbox" name="hobby" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/吃飯"> 睡覺 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked">
<br>
<!-- 點擊了提交按鈕,可以把 表單域 form 里面的表單元素 里面的值 提交給后臺服務器 -->
<input type="submit" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/免費注冊">
<!-- 重置按鈕可以還原表單元素初始的默認狀態 -->
<input type="reset" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/重新填寫">
<!-- 普通按鈕 button 后期結合js 搭配使用-->
<input type="button" value="https://www.cnblogs.com/pure3417/archive/2021/04/26/獲取短信驗證碼"> <br>
<!-- 檔案域 使用場景 上傳檔案使用的 -->
上傳頭像: <input type="file">
</form>
select表單元素
在頁面中,如果有多個選項讓用戶選擇,并且想要節約頁面的空間時,我們可以使用<select>標簽控制元件定義下拉串列,
示例:

語法格式:

<select>中至少包含一對<option>- 在
<option>中定義selected="selected",當前項即為默認選中項,
示例代碼:
<form>
籍貫:
<select>
<option>山東</option>
<option>北京</option>
<option>天津</option>
<option selected="selected">火星</option>
</select>
</form>
textarea文本域元素
當用戶輸入內容較多的情況下,我們就不能使用文本框表單了,此時我們可以使用<textarea>標簽,
在表單元素中,<textarea>標簽是用于定義多行為本輸入的控制元件,
使用多行文本輸入控制元件,可以輸入更多的文字,該控制元件常見于留言板,評論,
語法如下:

- 通過
<textarea>標簽可以輕松的創建多行文本輸入框, - cols= "每行中的字符數",rows="顯示的行數",實際開發中并不會使用,都是用CSS來控制大小,
代碼示例:
<form>
太難了:
<textarea cols="50" rows="5">來都來了,不關注一波</textarea>
</form>
label標簽
<label>標簽為input元素定義標注(標簽),
<label>標簽用于系結一個表單元素,當點擊<label>標簽內的文本時,瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上,用來增加用戶體驗,
語法如下:

核心:<label>標簽的for屬性應于 相關元素的i<label>相同,
示例代碼:
<label for="text"> 用戶名:</label> <input type="text" id="text">
<input type="radio" id="nan" name="sex"> <label for="nan">男</label>
<input type="radio" id="nv" name="sex"> <label for="nv">女</label>
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/280525.html
標籤:其他
下一篇:演算法學習:二分法從入門到精通
