Html常用標簽(2)
上篇博客講了些常用的html標簽 :【HTML】---常用標簽(1)
這里主要講 列表、表格標簽和 form表單標簽。
一、列表、表格標簽
1、列表標簽
概念 把內容以列表的形式展現。列表最大的特點就是 整齊 、整潔、 有序。
示例
<!DOCTYPE html>
<html>
<head>
<title>列表標簽</title>
</head>
<body bgcolor="#FFFF00">
<!-- 無序列表 -->
2017年心願
<ul type="circle"> <!--無序序列<ul> ，無序有circle：圓點，square：小方塊-->
<li>父母身體健康</li>
<li>寶寶健康成長</li>
<li>媳婦健健康康</li>
</ul>
<!-- 有序列表 -->
2017年大事件
<ol type="1" start="2"> <!--有序的標簽是<ol>,有序有五種：1,A,a ,i,I，start代表從什么時候開始等於2代表從2開始-->
<li>老婆要生小孩了</li>
<li>自己換工作了</li>
<li>要賣掉一套房</li>
</ol>
<!-- 自定義列表 -->
<dl> <!--在自定義列表<dl> </dl>中使用<dt> </dt>表示小標題，使用<dd> </dd>表示列表項-->
<dt>時刻告訴自己</dt>
<dd>不抱怨</dd>
<dd>零負能量</dd>
<dd>該與不該</dd>
</dl>
</body>
</html>
運行結果
2、表格標簽
表格的現在還是較為常用的一種標簽，但不是用來布局。常見用於處理、顯示表格式數據。
基本語法
<table> </table> <!-- 用於定義一個表格 -->
<tr> </tr> <!-- 用於定義表格中的一行，必須嵌套在 table標簽中，在 table中包含幾對 tr，就有幾行表格 -->
<td> </td> <!-- 標簽用於表示列 必須嵌套在<tr></tr>標簽中，一對 <tr> </tr>中包含幾對<td></td>，就表示該行中有多少列 -->
<th> </th> <!-- 標簽用於表示表格的標題，用法和 <td> </td>一樣只是里面的內容會自動加大加粗 -->
<caption> <!-- 表頭名</caption>用於表示表頭 -->
<!--=====================列表屬性======================-->
border <!-- 設置表格邊框的寬度，單位為pixel -->
width <!-- 設置表格寬度，單位為pixel -->
height <!-- 設置表格高度，單位為pixel -->
cellspacing <!-- 設置單元格之間的距離,就指表格表格邊框的間距 -->
cellpadding <!-- 設置文字距離單元格邊框的距離 -->
bgcolor <!-- 設置表格的背景顏色 -->
align <!-- 用於設置對齊方式，比如center，left，right -->
示例
<!DOCTYPE html>
<html>
<head>
<!-- 原創作者：雨點的名字 -->
<title>table標簽</title>
</head>
<body>
<!--這里的center表示該表格在頁面的中間位置--> <!--這里的背景色標簽是bgcolor-->
<table border="1" width="360" height="240" cellspacing="1" cellpadding="1" align="center" bgcolor="red">
<caption><h2>我的好朋友</caption>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
<th>愛好</th>
</tr>
<!--這里的center表示的是表格里面的字體居中-->
<tr align="center">
<td>小紅</td>
<td>女</td>
<td>20</td>
<td>跳舞</td>
</tr>
<tr align="center">
<td>小舵</td>
<td>女</td>
<td>24</td>
<td>唱歌</td>
</tr>
</table>
</body>
</html>
運行結果
合並單元格 在表格操作的時候我們可能會有合並單元格的操作，如下示例
<!DOCTYPE html>
<html>
<head>
<title>table中合並單元格</title>
</head>
<body>
<table border="1" width="300" height="200"
align="center" background="first.jpg" > <!--background代表的是背景圖片，bgcolor代表背景色完全不一樣-->
<tr align="center" width="100" >
<td>1</td>
<td colspan="2">占兩列</td> <!--當colspan="2"表示在同一行中，兩列並一列，那么在它下面少寫一個<td></td>標簽-->
<!-- 刪除掉此<td></td> -->
<td>2</td>
</tr>
<tr align="center" width="100">
<td rowspan="2">占兩行</td> <!--當 rowspan="2"表示在同一列中 兩行並一行，那么在同一列中刪掉一個<td></td>標簽-->
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr align="center" width="100" >
<!-- 刪除掉此<td></td> 因為行已經被上面占掉，所以在這里要少一行-->
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</table>
</body>
</html>
運行結果
二、form表單標簽
作用 用於收集用戶信息，如：登錄、注冊等場景。
form表單里主要包含的標簽有：form表單域、input標簽、 select 標簽、label標簽、textarea標簽。
1、form表單域
基本語法
<form id="" action="" method="post" enctype="">
<input name="nickname">
<input type="submit" value="提交">
</form>
action 提交地址動作。與input標簽中的submit屬性相關聯。
method 提交方法，有 get 和 post 兩種提交方法。
enctype 表單數據提交時編碼類型，默認"pplication/x-www-form-urlencoded"，如果表單中有上傳文件，編碼類型需要使用"multipart/form-data"，類型，
才能完成傳遞文件數據。
2、input標簽
<input />標簽為單標簽，type屬性為其最基本的屬性類型 ,其取值不同代表不同的控件類型。
基本語法
<input type="text" name =""> <!-- 普通文本，標簽的默認屬性時text -->
<input type="password" name=""> <!-- 密文文本，輸入的內容不顯示 -->
<input type="radio" name="" value=""> <!-- 單選按鈕 同一組單選它們的name值必須相同value都不相同-->
<input type="checkbox" name="" value=""> <!-- 復選框 同樣如果是同一組多選那么它們的name必須相同value都不相同-->
<input type="button" name=""> <!-- 普通按鈕 -->
<input type="submit" name=""> <!-- 提交按鈕。要與action一起用。 -->
<input type="reset" name=""> <!-- 重置按鈕 -->
<input type="image" src="first.jpg" alt="1"> <!-- 圖片方式提交按鈕 -->
<input type="email" name=""> <!-- 郵箱按鈕 -->
<input type="file"multiple="multiple"> <!-- 文件上傳按鈕 -->
選擇完input類型type屬性后，還有些常用的屬性值：
name: 指定名字，因為提交的是鍵值對，所以必須要指定名字，否則無法提交，即使提交了也沒有意義
value: input控件的默認文本值。
size: 控件的寬度。
checked: 定義選擇控件默認被選中。
maxlength: 運行輸入的文本最大長度。
placeholder: 文本的提示內容。
readonly: 只讀模式，設置后無法修改輸入框的內容。
disabled: 禁用狀態。
3、 select 標簽
select標簽是一個下拉框的形式讓用戶進行選擇選項，所以select標簽中必須包含option標簽才能顯示屬性
基本語法
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
4、label標簽
作用 用於綁定一個表單元素, 當點擊label標簽的時候, 被綁定的表單元素就會獲得輸入焦點。
示例
<!-- for 屬性規定 label 與哪個表單元素綁定。綁定后如果點擊"男"也會代表選中這個單選 -->
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="男">
5、textarea(文本域)
text文本框只能寫一行文本，而textarea文本域可以輸入大量文本的信息。
基本語法
<textarea cols="每行中的字符數" rows="顯示的行數">
文本內容
</textarea>
6、完整示例
為了方便理解，這里來一個完整的示例。
<!DOCTYPE html>
<head>
<title>form表單</title>
</head>
<body>
<!--form 指的是表單標簽 當前標簽的內容在提交的時候都會被自動提交 action=""是指把當前表單提交的位置-->
<!--onSubmit只有當返回為true是才能提交表單，可以先校驗這個表單-->
<form action="Myservlet" method="post" onSubmit="return submitFun();">
<fieldset> <!--主要會在相關表單元素周圍繪制邊框-->
<legend>用戶注冊</legend> <!--在上面繪制的邊框繪制的位置寫上“用戶注冊”-->
用戶名:<input type="text" name="username" placeholder="請輸入用戶名" /><br/> <!--input text 輸入框 placeholder 提示語-->
密碼 :<input type="password" name="password"/><br/> <!--password代表輸入的文字顯示為黑點-->
<!--value是指當前表單提交后 獲取的值 checked設置默認選中的情況 同一單選name相同-->
性別:男性<input type="radio" name="sex" value="male" checked="checked">
女性<input type="radio" name="sex" value="female"><br/>
學歷: <select name="education"> <!--select代表下來列表,同一組name也要想同-->
<option value="gz">博士</option> <!--option代表每一個值，取名gz為了后台獲取-->
<option value="yjs">研究生</option>
<option value="bk" selected="selected">本科</option> <!--select代表默認選中，本科會顯示到界面-->
<option value="zk">專科</option>
</select> <br/><br/>
興趣愛好:<input type="checkbox" name="likes" value="bike" />騎車 <!--checkbox復選框,checked代表默認選中-->
<input type="checkbox" name="likes" value="sleep" checked="checked" />睡覺
<input type="checkbox" name="likes" value="eat" />吃飯
<input type="checkbox" name="likes" value="daima" />敲代碼 <br/>
備注:<textarea cols="40" rows="5" name="bz"></textarea> <br/><br/> <!--textarea文本域設置行和列-->
個人頭像:<input type="file"><br> <!--代表可以在電腦上宣文件-->
<!--disabled代表不可編輯，不可編輯狀態后台是無法取到這個value值的，想要獲得就要在提交時改變為可編輯-->
個人網站:<input type="url" value="www.baidu.com" disabled="disabled"> <br>
<!--郵箱格式-->
個人郵箱:<input type="email"><br>
<!--代表只能輸入數字-->
身體體重:<input type="number"><br>
<!--可選年月日-->
出生日期:<input type="date"><br>
<!--這個隱藏標簽有很大的作用，可以不顯示在界面，但后台可以獲取值-->
隱藏項： <input type="hidden" value="你們看不到我"><br>
<input type="button" value="填寫完畢"> <!--普通的button按鈕-->
<input type="reset" value="重置信息"> <!--reset代表一按重置所以信息清空-->
<input type="submit" value="完成注冊"> <!--submi代表所以信息提交到后台,如果上面調用了onSubmit方法，那么返回為true才提交-->
</fieldset>
</form>
</body>
</html>
運行結果
``` 你如果願意有所作為，就必須有始有終。(2) ```