2020.9.27 表格、表单

1.表格

（1）表格标签构成
		table:表格区域
				width bgcolor background 就近原则
				align：控制表格在本行中的水平位置
				valign：设置内容的垂直位置  middle（默认） top  bottom
				cellpadding（填充）：内边距  内容到边框的距离
				cellspacing（间距）：外边距  单元格与单元格之间的距离
		tr：定义表格行
				width bgcolor background 就近原则
				align：控制表格在本行中的水平位置
				valign：设置内容的垂直位置  middle（默认） top  bottom
		td：表格的单元格
				width bgcolor background 就近原则
				align：控制表格在本行中的水平位置
				valign：设置内容的垂直位置  middle（默认） top  bottom
		th：表格的表头
				width bgcolor background 就近原则
				align：控制表格在本行中的水平位置
				valign：设置内容的垂直位置  middle（默认） top  bottom
		caption：表格标题

<table border="1" width="500" height="200" cellpadding="0" cellspacing="0">
			<caption>学生信息表</caption>
			<tr>
				<th>姓名</th>
				<th>性别</th>
				<th>年龄</th>
			</tr>
			<tr align="center">
				<td>张三</td>
				<td>男</td>
				<td>21</td>
			</tr>
			<tr align="center">
				<td>李四</td>
				<td>男</td>
				<td>22</td>
			</tr>
		</table>

（2）合并单元格
		colspan属性（跨列合并单元格）：colspan="合并的数量"   
								   	记得删除多余的单元格
		rowsapn属性（跨行合并单元格）：rowspan="合并的数量"				

<table border="1" width="500" height="800" cellspacing="0" align="center">
			<caption>个人简历</caption>
			<tr>
				<td width="80" bgcolor="aqua" align="center">姓名</td>
				<td width="100"></td>
				<td width="80" bgcolor="aqua" align="center">性别</td>
				<td width="100"></td>
				<td rowspan="5" align="center">照片</td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center">出生年月</td>
				<td></td>
				<td bgcolor="aqua" align="center">籍贯</td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center">政治面貌</td>
				<td></td>
				<td bgcolor="aqua" align="center">民族</td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center">健康状况</td>
				<td></td>
				<td bgcolor="aqua" align="center">婚姻状况</td>
				<td></td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center">联系电话</td>
				<td></td>
				<td bgcolor="aqua" align="center">电子邮箱</td>
				<td align="center">www.51jianli.com</td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center">求职意向</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center" height="300">工作经历</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center" height="70">教育经历</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center" height="70">英语水平</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center" height="70">计算机水平</td>
				<td colspan="4"></td>
			</tr>
			<tr>
				<td bgcolor="aqua" align="center" height="80">自我评价</td>
				<td colspan="4"></td>
			</tr>
		</table>

2.表单

（1）表单：就是从客户端可以向服务器发送数据的，
		表单中有许多可以输入或选择的组件，用户就可以在表单中输入信息，
		从而向服务器发送。
		form：表示一个表单，不显示
			action属性：action="向服务器端发送的地址"
			method属性：method="向服务器端发送数据方式"  get/post
（2）标签
		表单组件：
		input标签：输入  自闭合标签  单行文本输入框   type="text"默认文本
		id属性：唯一值 
		name属性：属性名可以重复   自定义值
		class属性：属性名可以重复    自定义值
		value属性：提交的值
		placeholder属性：提示信息  readouly="readouly"：只读
		size="30"：列数
		disabled属性：disabled="disabled"禁用组件，一旦组件被禁用了，
				值就不会向服务器端提交
		type="password"  输入的看不见
		type="file"   文本选择框     accept=".png"过滤文件
		type="radio" 单选   name 相同为一组，一组之内只能选一个
		type="checkbox" 多选框
		checked="checked"默认选择

<form>
			<label for="ID">账号：</label>
			<input type="text" id="ID" size="30" placeholder="请输入账号" /><br />
			<label for="passwordID">密码：</label>
			<input type="password" id="passwordID"  /><br />
			<label for="passwordID1">确认密码：</label>
			<input type="password" id="passwordID1" disabled="disabled" /><br />
			性别：
			<input type="radio" id="womanID" name="sex" value="女" checked="checked"/><label for="womanID">女</label>
			<input type="radio" id="manID" name="sex" value="男" /><label for="manID">男</label><br />
			课程：<br />
			<input type="checkbox" id="classID1" name="class" value="css"/><label for="classID1">css</label><br />
			<input type="checkbox" id="classID2" name="class" value="java" /><label for="classID2">java</label><br />
			<input type="checkbox" id="classID3" name="class" value="c" /><label for="classID3">c</label><br />
			<input type="checkbox" id="classID4" name="class" value="python" /><label for="classID4">python</label><br />
			<label for="附件ID">附件：</label>
			<input type="file" id="附件ID" accept=".png" />
		</form>

3.预习

（1）下拉框
		selec标签：下拉框
		option标签：选项
		selected="selected"默认选中
（2）多行文本域
		textarea标签：多行文本域
		cols属性：一行多少字
		rows属性：显示多少行
（3）按钮
		type="reset"   value="重填"
		type="submit" value="提交"    提交内容到服务器端
		type="button" value="按钮"     点击时触发