【HTML基礎】表格和表單
阿新 • • 發佈：2017-10-03
天津 adding 文字 最小 words 常見 jpg checked 搜索引擎
本次博客的主要內容如下：
- meta和link
- 表格
- 表單
meta和link
meta
meta的屬性有兩種：name和http-equiv。
name屬性主要用於描述網頁內容，對應與網頁內容。
1.關鍵字，當搜索引擎在爬取內容的時候，會根據關鍵字判斷：
<head> <title></title> <meta name="keywords" content="豆瓣,廣播,登陸豆瓣"> </head>
2.網頁描述
<!-- 網頁描述 --> <meta name="description" content="提供圖書、電影、音樂唱片的推薦、評論和價格比較，以及城市獨特的文化生活。">
上面的例子來自於豆瓣，這裏我們在搜索引擎裏面搜“登錄豆瓣”，查看效果，網頁描述會被顯示：
3.網頁重定向
<meta http-equiv="refresh" content="3;url=http://www.google.com">
效果圖：
link
作用：引用外部css或者是title圖片
1.引用外部css
<link rel="stylesheet"type="text/css" href="1.css">
2.設置icon圖標
表格（table）
表格基礎和標準結構
表格可以更好的顯示數據，比如要顯示一個課程表，這個時候表格的作用就非常大了。
<body> <table> 表格 <tr> 行 <td></td> 列 <td></td> <td></td> </tr></table> </body>
屬性：
border="1" 單元格邊框的寬度
width="500" 表格的寬度
height="300" 表格的高度
cellspacing="2" 單元格與單元格的距離
cellpadding="2" 內容距邊框的距離
bgcolor="red" 背景顏色
align="left|right|center" 內容的的位置，也可以用於表格，如果直接給表格用align="center"，表格居中，如果給tr或者td使用，tr或者td內容居中。
有如下表格：
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table border="1" width="500" height="300" cellspacing="0" align="center" bgcolor="green"> <tr> <td>關宏峰</td> <td>30</td> <td>警察</td> </tr> </table> </body> </html>
效果圖：
表格的標準結構
<thead> 表格頭部，也就是第一行 <tr> <td></td> <td></td> </tr> </thead> <tbody> 表格主體 <tr> <td></td> <td></td> </tr> </tbody> <tfoot> 表格底部，也就是最後一行 <tr> <td></td> <td></td> </tr> </tfoot>
使用標準的表格主體，也易於搜索引擎的搜索。
表頭和單元格合並
現在有如下表：
<table border="1" cellspacing="0" width="500" height="300" align="center"> <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> </table>
為其加上表頭：
<table border="1" cellspacing="0" width="500" height="300" align="center"> <caption>課程表</caption>
效果圖：
合並同行的單元格：
<caption>課程表</caption> <tr> <td colspan="2"></td> <!-- <td></td> --> <td></td> <td></td> </tr>
使用屬性colspan可以合並同行的單元格，後面指定合並的單元格數目。
效果圖：
合並同列的單元格：
<tr> <td rowspan="2"></td> <td></td> <td></td> <td></td> </tr> <tr> <!-- <td></td> --> <td></td> <td></td> <td></td> </tr>
使用屬性rowspan可以合並同列的單元格，後面指定合並的單元格數目。
效果圖：
表格標題、邊框顏色、內容垂直對齊
表格標題使用<th></th>，和<td></td>的用法是一樣的，標題的文字自動加粗且水平居中對其。
<table border="1" cellspacing="0" width="500" height="300" align="center"> <tr> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>居住地</th> </tr> <tr align="center"> <td>周巡</td> <td>男</td> <td>30</td> <td>津港</td> </tr> <tr align="center"> <td>周舒桐</td> <td>女</td> <td>23</td> <td>津港</td> </tr> </table>
效果圖：
邊框顏色：
<table border="1" cellspacing="0" width="500" height="300" align="center" bordercolor="red">
bordercolor可以設置邊框顏色。
效果圖：
內容垂直對齊方式：
<td valign="bottom">周巡</td>
valign設置內容的垂直對齊方式，默認是居中(middle)，也可以是頂部垂直(top)和底部垂直(bottom)。
效果圖：
思路擴展：上面例子顯示的表格邊框的寬度都是2個像素，因為每個單元格的最小的寬度為1個像素，所以兩個單元格合並之後的寬度為2個像素，現在如果想要實現一個像素寬度的表格該怎樣寫呢？
實現方式如下：
<table bgcolor="red" width="400" height="300" cellspacing="1" > <tr bgcolor="white"> <th>姓名</th> <th>性別</th> <th>年齡</th> <th>居住地</th> </trb> <tr bgcolor="white" align="center"> <td>周巡</td> <td>男</td> <td>30</td> <td>津港</td> </tr> <tr bgcolor="white" align="center"> <td>周舒桐</td> <td>女</td> <td>23</td> <td>津港</td> </tr> </table>
解釋：
1.將表格背景設置為紅色，不用設置單元格邊框（也就是border不設置）。
2.將單元格的背景色設置為白色，單元格之間的距離設置為1即可。
效果圖：
表單（form）
常見的表單：比如各種賬號的註冊，學習錄入等等。
作用：主要負責數據的采集功能。
比如網易的郵箱註冊界面：
表單的組成：
提示信息：一個表單中通常還需要包含一些說明性的文字，提示用戶進行填寫和操作。
表單控件：包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、復選框、提交按鈕、重置按鈕等。
表單域：他相當於一個容器，用來容納所有的表單控件和提示信息，可以通過他定義處理表單數據所用程序的url地址，以及數據提交到服務器的方法。如果不定義表單域，表單中的數據就無法傳送到後臺服務器。
創建表單：
<form action="1.php" method="post"> </form>
表單屬性：
action：用來指定表單處理程序的位置，也就是將收集到數據發送的位置（服務器端腳本處理程序）
name：定義表單的名字
method：定義表單將數據傳送到服務器的方式，默認是get，但是get是通過地址欄提供信息的，安全性差，建議使用post，直接通過action指定的腳本來處理信息，安全性更高。
文本輸入框：
<form action="1.php" method="post"> 用戶名：<input type="text" name="username" maxlength="6" > </form>
屬性：
maxlength：指定輸入的字符最大長度
readonly="readonly"：將輸入框設置為只讀的狀態
disable="disable"：輸入框設置為未激活狀態
name="username"：輸入框的名稱
value="frank"：將輸入框的內容傳給處理的腳本，後面如果指定內容則為默認內容。
效果圖：
密碼輸入框：
密 碼：<input type="password" name="pwd" >
文本輸入框的屬性對密碼輸入框均有效。
效果圖：
單選框：
<input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender" >女
如果只需要在多個選項中選擇一個，只需要將name設置成一樣的即可，checked這裏設置代表默認選項。
效果圖：
下拉列表：
居住地：<select> <option>北京</option> <option>上海</option> <option selected="selected">天津</option> </select>
屬性：
multiple="multiple"：將下拉列表設置為多選項
selected="selected":設置為默認的選中項
效果圖：
使用optgroup標簽可以對下拉列表進行分組：
居住地：<select> <optgroup label="上海市"> <option>長寧區</option> <option>靜安區</option> <option>浦東新區</option> <option>奉賢區</option> <option>楊浦區</option> <option>普陀區</option> <option selected="selected">松江區</option> </optgroup> <optgroup label="安徽省"> <option>合肥市</option> <option>蕪湖市</option> <option>馬鞍山市</option> <option>安慶市</option> <option>宿州市</option> <option>阜陽市</option> </optgroup> </select>
label指定了組名，不能被選定：
多選框：
興趣愛好： <input type="checkbox" checked="checked">讀書 <input type="checkbox">看電影 <input type="checkbox">玩遊戲
效果圖：
多行文本框
自我介紹： <br /> <br /> <textarea cols="30" rows="10">這裏填寫自我介紹哦！</textarea>
屬性：
cols：控制輸入的字符個數
rows：控制輸入的行數
效果圖：
文件上傳控件
設置頭像： <br /> <br /> <input type="file">
可用於上傳文件。
效果圖：
文件提交按鈕
<input type="submit">
可以實現信息的提交功能。
效果圖：
普通按鈕
<input type="button" value="點我啊">
不能實現信息的提交，必須要配合JS的使用。
效果圖：
圖片按鈕
<input type="image" src="an.jpg">
能夠實現數據的提交。
效果圖：
重置按鈕
<input type="reset">
可以重置輸入的內容，也就是恢復到表單的原始狀態。
效果圖：
表單信息分組
<form action="1.php" method="post"> <fieldset> <legend>用戶信息註冊</legend> 用戶名：<input type="text" name="username" maxlength="6" > 密 碼：<input type="password" name="pwd" > <br /><br /> <input type="radio" name="gender" checked="checked">男 <input type="radio" name="gender" >女 <br /><br /> 居住地：<select> <optgroup label="上海市"> <option>長寧區</option> <option>靜安區</option> <option>浦東新區</option> <option>奉賢區</option> <option>楊浦區</option> <option>普陀區</option> <option selected="selected">松江區</option> </optgroup> <optgroup label="安徽省"> <option>合肥市</option> <option>蕪湖市</option> <option>馬鞍山市</option> <option>安慶市</option> <option>宿州市</option> <option>阜陽市</option> </optgroup> </select> <br /> <br /> 興趣愛好： <input type="checkbox" checked="checked">讀書 <input type="checkbox">看電影 <input type="checkbox">玩遊戲 </fieldset> </form>