from :雙標籤，一般在此標籤裏面放置其他標籤（表單元素==表單控件）:
輸入框，密碼輸入框，按鈕，複選框，單選框，文件上傳
表單元素基本上都是input標籤
結合type屬性來使用
表單：提交數據信息
提交的數據其實提交的是表單元素裏面的value屬性值
form標籤：
action:信息提交的路徑（後臺，服務器）現在暫時用後臺文件代替（java,php);
method:提交數據的方式
get:會在地址欄裏面顯示提交的信息，不安全
post：不會顯示，相對安全
input標籤:
outline:none:去掉輪廓線
maxlength='6':最大長度
minlength='2':最小長度
type='text':輸入框（默認）
name='':將數據存儲在name屬性值裏面
value='':表單元素的值
在輸入框裏面，value是會隨着用戶的輸入的改變而改變
readonly="readonly":只讀（只能看不能修改）
disabled='disabled':該元素不可使用
placeholder='替代文字'：佔位符
提交按鈕：
input標籤：
type='submit'
value='':表單元素的值
圖片提交按鈕：不會觸發提交操作
<input type='image' src='im.jpg'/>
普通按鈕：不會觸發提交操作
input標籤：
type='button'
button按鈕：在其他地方常用，在表單裏面使用，會觸發提交操作
<button>提交</button>
重置按鈕：將表單元素裏面的所有內容迴歸爲默認狀態
type='reset'
單選按鈕：只能選一個
如果單選按鈕要想只選一個，只需要將input標籤的name屬性值設置爲一樣的
input標籤，type='radio',checked="checked"(默認選中)
label..for..:label是雙標籤，裏面防止的是點擊的內容，for是屬性，屬性
值是對應你要選中的表單元素的id值
<label for='man'>男</label><input type='radio' name='sex' value='男' checked id="man"/>
單選按鈕：多選
type='checkbox'
文件上傳：
type='file'
<!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">
<title>Document</title>
</head>
<body>
<!-- 表單 -->
<form action="1.php" method="get">
<!-- 輸入框 -->
用戶名：<input class="" name="username" type="text" password="false" maxlength="140" value="123456" />
</br>
<!-- 提交按鈕 -->
<input type="submit" value="登錄">
</form>
</body>
</html>
文本域：
本質上也是一個輸入框，可以支持換行，一般放置大量的文本內容（個人簡介）
textarea
可以自己控制大小，也可以設置默認大小
rows:文字多少行
cols:文字多少列
<textarea name="" id="" cols="30" rows="10"></textarea>
下拉列表:select：
列表項：option
name屬性寫到select標籤，value屬性一般寫到option裏面
默認選中，selected屬性
還支持多選，一般不用，multiple
<!--分組下拉列表-->
<!-- 分組下拉列表-->
<form action="1.php" method="get">
籍貫：
<select name='sel'>
<optgroup label="江西省"></optgroup>
<option value='pingxiang'>萍鄉</option>
<option>南昌</option>
<option>九江</option>
<option>贛州</option>
<option>景德鎮</option>
<optgroup label="北京"></optgroup>
<option>東城區</option>
<option>西城區</option>
<option>石景山區</option>
<option>朝陽區</option>
</select>
<input type="submit" value="提交">
</form>
<form action="1.php" method="get">
<fieldset>
<legend>這是其他表單控件</legend>
<!-- 滑塊：默認是0-1 -->
<!-- min:滑塊最小值，max：最大值 value：默認值 -->
<input type="range" min="0" max="100" value="20">
<input type="submit" value="提交">
<fieldset>
</form>
fieldset：設置表單的區域，寫到from裏面
legend：說明表單的內容
表格：顯示數據（用來佈局--之前）
表格標籤：table,雙標籤
行：tr ,雙標籤
列：td ,雙標籤
行和列之間也是包含關係，是每行幾列
其實表格裏面是td作爲顯示的
table的屬性：
border:線框1
cellspacing:單元格的間隙
cellpadding：單元格的內邊距離（一般不用）
表格的大小默認情況下是內容的大小
每列的寬度默認情況下是該列內容最長的寬度
align:排練方式，left，center,right
給每個tr設置，則每個td的內容就是居中的
給table設置，該表格居中顯示
valign:設置每列文字的垂直顯示方式，top middle bottom
標籤屬性：
align
valign
css樣式屬性
text-align
vertical-align
css表格：
給table設置寬高，摺疊單元格使用border-collapse樣式屬性
border-collapse:collapse;(cellspacing)
<!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">
<title>Document</title>
</head>
<style>
tr{
text-align: center;
}
td{
border: 1px solid #ccc;
}
table{
width: 200px;
height: 200px;
border: 1px solid #ccc;
border-collapse: collapse;//單元格線摺疊在一起‘細線’
}
</style>
<body>
<!-- 四行四列-->
<table cellpadding='0'>
<tr>
<td>姓名</td>
<td>性別</td>
<td>籍貫</td>
<td>職業</td>
</tr>
<tr>
<td>bibi</td>
<td>男</td>
<td>贛州</td>
<td>挖掘機</td>
</tr>
<tr>
<td>vivi</td>
<td>女</td>
<td>江西</td>
<td>搬磚</td>
</tr>
</table>
</body>
</html>