表格（table）
- 不是佈局，是用來處理數據的
- 表格標籤
<table> #行標籤 <tr> <td>單元格標籤</td> </tr> </table>
#表格中沒有所謂的列標籤，只有行標籤<tr>和單元格標籤<td>
注意事項
- <tr>標籤只能嵌套<td>標籤
- <td>標籤中可以嵌套所有元素
表格屬性
- border：表格邊框
- cellspacing：設置單元格與單元格的空白間距(默認爲2像素 2px)
- cellpadding：設置單元格內容與單元格邊框的空白間距(默認爲1像素 1px)
- width
- height
- algin：設置表格在網頁中的水平對齊方式
表頭標籤
<table> #行標籤 <tr> <th>表頭標籤：文字會在單元格中自動加粗居中</th> </tr> </table>
表格結構
- thead：表頭部分
- tbody：主體部分
<table>
#表頭 <thead> <tr> <th>表頭標籤：文字會在單元格中自動加粗居中</th> </tr> </thead>
#主體
<tbody> <tr> <td>單元格標籤</td> </tr> </tbody> </table>
表格標題
- caption
<table> <caption>表格標題</caption> <thead>表頭</thead> <tbody>主體</tbody> </table>
合併單元格
- 跨行合併：rowspan
- 跨列合併：colspan
<tr> <td rowspan="2">單元格標籤1</td> <td>單元格標籤2</td> <td>單元格標籤3</td> </tr> <tr> <td colspan="2">單元格標籤23</td> </tr>
表單
- 爲了收集用戶信息
- 由3部分組成：
- 表單域
- 提示文本（表單控件前的提示信息）
- 表單控件（表單元素/表單）
表單控件
- 包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等
input 控件
- 單標籤
- 可以通過type屬性變換input的類型，變成各種表單控件
input 表單控件屬性
- type 詳細含義
<!--text:文本框--> 用戶名：<input type="text" value="文本框中的值" /> <!--password:密碼框--> 密 碼：<input type="password" maxlength="6"/> <!--radio：單選框--> <!--通過相同的name值來實現一組單選框--> 性別：<input type="radio" name="sex" />女 <input type="radio" name="sex" />男 <!--checkbox：複選框--> <!--可以同時選擇多個--> 愛好：<input type="checkbox" name="hobby" />足球 <input type="radio" name="hobby" />音樂 <input type="radio" name="hobby" />跳舞 <!--button：普通按鈕--> 搜索：<input type="button" value="搜索表單" /> <!--submit：提交按鈕--> <!--默認會顯示‘提交’兩個字--> 搜索：<input type="submit" value="提交表單" /> <!--reset：重置按鈕--> 搜索：<input type="button" value="重置表單" /> <!--image：圖片按鈕--> 搜索：<input type="image" src="img.jpg" /> <!--file：文件按鈕--> <!--用來選擇文件--> 搜索：<input type="file" />
label標籤
- label標籤爲input元素定義標註
- 作用：用於綁定一個表單元素，當點擊label標籤的時候，被綁定的表單元素就會獲得輸入焦點
- for屬性規定label與哪個表單元素綁定
<!-- 當只有一個input控件時，可以使用label直接進行包裹input --> <label>輸入賬號:
<input type="text">
</label> <!-- 當label中有多個表單時，想定位到某個表單中，可以通過for id 的格式來進行 --> <label for="two">輸入賬號:
<input type="text" id="two">
<input type="text">
</label>
textarea控件（文本域）
- 如果需要輸入大量的信息，就需要用到<textarea></textarea>標籤
<!-- <textarea cols="每行中的字符數，不常用，會被css樣式代替" rows="顯示的行數，不常用，會被css樣式代替"></textarea> --> <textarea>請輸入留言</textarea>
下拉菜單
- <select></select>中至少應包含一對<option></option>
- 在<option>中定義selected="selected"時，當前項即爲被默認選中項
籍貫： <select> <option>點擊選擇你的籍貫</option> <option selected="selected">陝西</option> <option>廣州</option> <option>上海</option> <option>北京</option> </select>
表單域（form）
區別
- 文本域：textarea 用來留言的
- 文件域：input type=”file“ 用來上傳文件
- 表單域：form 收集表單控件信息，並且提交的
表單域
<!-- <form action="url地址" method="提交方式" name="表單名稱"></form> --> <form action=""> <p>用戶名：<input type="text"/></p> <p>密 碼<input type="text"/></p> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form>
常用屬性
- action在表單接收到信息後，需要將信息傳給服務器進行處理；action屬性用於指定接受並處理表單數據的服務器程序的url地址
- method用於設置表單數據的提交方式，其取值爲get或post
- name用於指定表單的名稱，以區分同一個頁面中的多個表單
注意
- 每個表單都應該有自己的表單域