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>