表格和表單
表格標籤<table></table>
表格標籤（table）概述
1.具有使網頁展示表格形式內容的標籤-------table標籤
2.表格標籤爲雙標籤，寫法如下： <table></table>
3.表格標籤默認情況是一個“類似於塊級標籤的table類型"，即在他會佔據整行。（雖然有點特殊，給上一個邊框他沒法完全佔據一行，顯示的加上display:block，又能獨佔一行）
<table>的完整格式
完整的表格爲：表頭+表體+表尾
通過標籤屬性對錶格進行控制
-
border：給表格加上邊框，其值爲一個邊框大小，默認單位爲像素。border屬性 -
cellspacing與cellpadding
單元格與單元格之間的距離(cellspacing),
單元格與內容之間的距離 (cellpadding)
-
width、height
Width與height用於設置表格的寬度(width),高度(height)，
寬度高度的值可以爲具體的像素，也可以爲一個百分比。
（百分比的意思是讓當前元素的高寬佔據父元素的相應百分比的高寬）
-
background與 bgcolor
background設置表格背景圖片
bgcolor設置背景的顏色
注意：如果兩個屬性都給了的話，一般而言，背景圖片會覆蓋背景顏色
-
align
align設置表格對齊方式或單元格內容的對齊方式
注意：
當align設置在單元格里面時，會起作用的是單元格內容
當align設置在表格中時，起作用的是整個表格
-
rowspan 與 colspan
colspan 用於設置跨列 , rowspan 用於設置跨行
跨行時，將rowspan屬性寫在要跨行的列上，其值爲要跨的行數：
跨列時，將colspan屬性寫在要跨列的列上，其值爲要跨的列數：
表格標籤總結
(1)<table>的基本格式
(2)<table>的完整格式
(3)thead, tbody, tfoot標籤的作用
更加語義化/讓大表格(table)在下載的時候可以分段的顯示/讓表格行從頭到尾顯示/符合主流開發規範.
(4)通過屬性設置表格樣式
① 給表格設置邊框【border屬性】
② 設置表格單元格之間的距離(cellspacing),
③ 單元格與內容之間的距離 (cellpadding)
表單
表單標籤概述
1.form標籤爲具有接收用戶輸入並提交的功能的標籤
2.form標籤爲雙標籤，寫法如下： <form></form>
3.form默認情況是一個“塊級標籤"，他會佔據整行空間
4.它裏面的input,button等標籤是行內塊元素
表單標籤<form>基本寫法
基本表單 == 外層的form標籤 + 在form裏面的表單元素標籤
其中，表單元素一般要放置於表單標籤<form>中，不然某些表單元素將會失效，如：“提交"按鈕和“重置"按鈕。
1.表單標籤<form>的主要屬性
最常用屬性：action，method，target
-
action
規定當提交表單時向何處發送表單數據，它的屬性值應該是一個“URL"。
這樣當我們點擊提交按鈕後，網頁就會跳轉到url所代表的站點或頁面處。
-
method
規定用於發送表單數據的方法，值爲 : get / post , 默認爲get方式.
注意：
1.發送數據時，input標籤的name屬性一定要加上，
否則數據就無法發送出去。
- get / post 的比較
① 可見性
get方式發送的數據會直接附加到表單的action屬性所指的URL的後面，用戶可見！
post方式發送的數據會放置在header裏發送到action屬性所指的URL地址處。用戶不可見。
② 數據量
get傳送的數據量較小，不能大於2KB。post傳送的數據量
③ 安全與效率
get安全性低於post，但效率高於post
④ 作用
一般而言：get 用於查詢居多，post用於更新居多。
-
target
規定在何處打開“action"中設定的URL。和a標籤一樣，具有以下值：
_blank 【在新窗口打開】
_self 【就在當前窗口打開】
_parent 【在父窗口打開】
_top 【在頂層窗口打開】
<iframe>的“name"【在某個iframe中打開】
2.位於form內的一些標籤
-
1.<label>標籤
-
用於顯示一些說明/提示信息，行內元素，不會佔據整行。
-
就顯示效果上而言，加了和沒加並沒什麼區別，但是對搜索引擎會更加的友好
For屬性可以和對應的input綁到一起
<label for="inp1">用戶名：</label> <input id="inp1" placeholder="請輸入你的用戶名..." name="username" />
-
2.<input>標籤
用於接收用戶輸入，爲行內塊元素。他不僅僅是接收文本的輸入，通過type屬性的設置我們還可以接收不同類型值的輸入。
<input>標籤的type屬性
input標籤的type屬性的一些常用可選值：
| 屬性 | 描述 |
|---|---|
| text | 普通文本 |
| search | 搜索框 |
| password | 密碼 |
| radio | 單選按鈕 |
| checkbox | 複選框 |
| file | 文件上傳 |
| image | 定義圖像作爲提交按鈕 |
| button | 按鈕類型 |
| submit | 普通提交按鈕 |
| reset | 重置按鈕 |
| hidden | 隱藏輸入域 |
Value屬性
設置“文本類型"的輸入框中默認顯示的值內容。
maxlength 屬性
規定輸入字段中的字符的最大長度。
Readonly屬性
Readonly屬性使表單元素成爲“只讀"狀態，在這個狀態下只能讀取元素內容，而不能進行編輯。
Disabled屬性
使表單元素成爲“禁用"狀態，表單元素將“失效"
Size屬性
規定文本框可見字符顯示的寬度，但不同瀏覽器對此的支持有所不同，我們現在基本都是使用CSS去控制
placeholder 屬性
提示文本
autofocus 屬性
自動聚焦
-
3.多行文本域<textarea>標籤
- 用於輸入多行文本的標籤對，
- 行內塊元素，不會佔據整行。
- 標籤是雙標籤，它擁有閉合標籤。
<textarea>文本</textarea>
- 它顯示文本內容是通過標籤的內容，而非“value"屬性。
- 它可以通過“cols"和“rows"屬性來設置顯示的尺寸
-
下拉框<select>標籤- 用於顯示單選和多選的下拉菜單，
<option>是它必須的子菜單，否則將不能提供任何可選項 - 可以通過“size"屬性設置該標籤在一個選項菜單中可見的選項個數，當它的值設爲“1"時，將顯示爲默認的
<select>下拉菜單的樣式 - 其他屬性：multiple，selected
multiple：允許選中多個option
selected:設置默認選中的option - 對下拉菜單進行分組
<optgroup></optgroup>
- 用於顯示單選和多選的下拉菜單，
-
按鈕<button>標籤對1.標籤對和其它表單元素一樣，爲行內（塊）標籤
2.button它是一個雙標籤。
3.通過type屬性可以設置其類型 【button/submit/reset】
input type=“button” value="">與
<button>的區別(1)``
按鈕文本是放置於該標籤的內容上，而```是將按鈕文本設置於它的“value"屬性上<input type="button" name="btn" value="提交"/> 與 <button>提交</button>
(2)<button>標籤對內可以同時顯示文本、圖片、表格甚至是多媒體，而<input>標籤顯示內容要單調很多。
<button>
<a href=""></a>
//
<image src=""/>
//.....
</button>
(3)<button>標籤的“type"屬性不進行設置的話，
在“IE瀏覽器"中將默認設爲“button"，
而在其它瀏覽器中（包括 W3C 規範）都會默認設爲“submit"
所以，爲了統一瀏覽器的行爲，我們通常都會爲<button>的屬性“type"設置一個初始值
2.實現表單文字對齊
通過CSS實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
label{
border: 0px solid red;
display: inline-block;
width: 100px;
text-align: right;
}
</style>
/head>
<body>
<form>
<div>
<label>用戶名：</label>
<input placeholder="請輸入用戶名..." />
</div>
<div>
<label>暱稱：</label>
<input placeholder="請輸入暱稱..." />
</div>
<div>
<label>密碼：</label>
<input placeholder="請輸入密碼..." />
</div>
</form>
</body>
</html>