【HTML】--- 列表、表格、form表單標籤
Html經常使用標籤(2)
上篇博客講了些經常使用的html標籤 :【HTML】---經常使用標籤(1)html
這裏主要講 列表、表格標籤和 form表單標籤。佈局
1、列表、表格標籤
一、列表標籤
概念 把內容以列表的形式展示。列表最大的特色就是 整齊 、整潔、 有序。post
示例字體
<!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>
運行結果網站
二、表格標籤
表格的如今仍是較爲經常使用的一種標籤，但不是用來佈局。常見用於處理、顯示錶格式數據。編碼
基本語法url
<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 -->
示例spa
<!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>
運行結果3d
合併單元格 在表格操做的時候咱們可能會有合併單元格的操做，以下示例code
<!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>
運行結果
2、form表單標籤
做用 用於收集用戶信息，如：登陸、註冊等場景。
form表單裏主要包含的標籤有：form表單域、input標籤、 select 標籤、label標籤、textarea標籤。
一、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"，類型，
才能完成傳遞文件數據。
二、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: 禁用狀態。
三、 select 標籤
select標籤是一個下拉框的形式讓用戶進行選擇選項，因此select標籤中必須包含option標籤才能顯示屬性
基本語法
<select> <option>選項1</option> <option>選項2</option> <option>選項3</option> ... </select>
四、label標籤
做用 用於綁定一個表單元素, 當點擊label標籤的時候, 被綁定的表單元素就會得到輸入焦點。
示例
<!-- for 屬性規定 label 與哪一個表單元素綁定。綁定後若是點擊"男"也會表明選中這個單選 --> <label for="male">Male</label> <input type="radio" name="sex" id="male" value="男">
五、textarea(文本域)
text文本框只能寫一行文本，而textarea文本域能夠輸入大量文本的信息。
基本語法
<textarea cols="每行中的字符數" rows="顯示的行數"> 文本內容 </textarea>
六、完整示例
爲了方便理解，這裏來一個完整的示例。
<!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)
相關文章
- 1. html表格、列表標籤
- 2. 前端基礎-html 列表標籤,表格標籤,表單標籤
- 3. 《-------------------Form表單標籤-------------------》
- 4. form表單標籤
- 5. 黑馬pink前端HTML(二) —— 表格 - 列表 - 表單標籤
- 6. html表格標籤
- 7. HTML表格標籤
- 8. HTML—表格、列表、表單
- 9. 複習HTML中的表單(form)標籤
- 10. HTML table、form表單標籤的介紹
- 更多相關文章...
- • XSL-FO 表格 - XSL-FO 教程
- • ASP.NET Web Pages - HTML 表單 - ASP.NET 教程
- • IntelliJ IDEA代碼格式化設置
- • TiDB 在摩拜單車在線數據業務的應用和實踐
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
