相关标签
基本的：table(表格) tr（行） td（列） th（表头列）
语义化的：caption (标题) thead tbody tfoot
表格
最简单的表格
<table width="400" border="1px">
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
</tr>
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
</tr>
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
</tr>
</table>
列合并 colspan="2" 表示合并几列
例子
<table width="400" border="1px">
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>密码</td>
</tr>
<tr>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>密码</td>
</tr>
<tr>
<td>合计</td>
<td colspan="3">用户名</td>
</tr>
</table>
行合并 rowspan="2" 表示合并几行
注意：rowspan也要写在td上,合并下面的几行
课堂练习
<table border="1" width="300">
<tr>
<td width="20%">1</td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
<tr>
<td>2</td>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
<tr>
<td>4</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
caption表标题 thead表头,tbody表格体,tfoot 表格脚
代码可以不按顺序放，但是显示的效果一定是caption---》 thead---》 tbody---》 tfoot 顺序
<table border="1" width="300">
<!-- 标题，居中 -->
<caption>员工信息表</caption>
<tfoot>
<tr>
<td>表格脚</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<thead>
<tr>
<td width="20%">表格头</td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
和如下代码效果相同
<table border="1" width="300">
<!-- 标题，居中 -->
<caption>员工信息表</caption>
<thead>
<tr>
<td width="20%">表格头</td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表格脚</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
这里面的tbody重点掌握
表标题
<caption>员工信息表</caption>
<th> 字体自动加粗、居中，一般用在thead tfoot里
cellpadding="0" cellspacing="0" 内填充和外填充都为0，表格变为实心
cellpadding--类似margin cellpadding--padding
<table border="1" width="300" cellpadding="0" cellspacing="0">
<caption>员工信息表</caption>
<tfoot>
<tr>
<th>123</th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>
<thead>
<tr>
<td width="20%">11</td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
<td width="20%"></td>
</tr>
</thead>
<tbody>
<tr>
<td>2</td>
<td rowspan="2" colspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td>3</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
汇总
table标签（表格）、tr标签（行）、td标签（标准单元格）th标签（表头单元格）caption表标题 thead表头,tbody表格体,tfoot 表格脚 rowspan 行合并 colspan 列合并
表单
html4.0 用户的输入必须放在表单里才能提交到后台
表单<form></form>
单选框 radio
多选框 checkbox
下拉列表框 select option
普通文本输入框 text
密码输入框 password
提交按钮 submit 会把表单内容提交到后台处理
重置按钮 reset 会把表单内容清空
<form action="" >
性别(单选框)：<input type="radio" name="sex" />男
<input type="radio" name="sex" />女<br>
爱好(复选框)：
<input type="checkbox" name="hobby" >吃串
<input type="checkbox" name="hobby" >喝酒
<input type="checkbox" name="hobby" >打豆豆<br>
家乡(下拉列表框)：
<select name="hometon">
<option>请选择</option>
<option>沈阳</option>
<option>抚顺</option>
<option>本溪</option>
<option>丹东</option>
</select><br>
账号（文本框）:<input type="text" name="username"/><br>
密码（密码框）:<input type="password" name="pwd"/><br>
确认密码（密码框）:<input type="password" name="repwd"/><br>
<input type="submit"/>
<input type="reset"/>
</form>
文本域textarea rows行数 cols列数
label标签
readonly
disabled
hidden
文本域textarea
个人简介:
<textarea rows="3" cols="50"></textarea>
label标签
readonly：readonly readonly="readonly" readonly="true" 只读的
disabled:不可用的
hidden:隐藏的
<input type="hidden" name="id" value=""/>
再来个实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="#">
<table border="1px" cellpadding="0px" cellspacing="0px" width="80%">
<tr>
<td width="20%">性质</td>
<td><input type="radio" name="cate" value="">人</input>
<input type="radio" name="cate" value="">公司</input>
</td>
</tr>
<tr>
<td width="20%">爱好</td>
<td><input type="checkbox" name="hobby" value="">看电视</input>
<input type="checkbox" name="hobby" value="">写代码</input>
<input type="checkbox" name="hobby" value="">学习</input>
<input type="checkbox" name="hobby" value="">打篮球</input>
</td>
</tr>
<tr>
<td>昵称：</td>
<td>
<!-- type="text"普通文本框 -->
<input type="text" />
</td>
</tr>
<tr>
<td>密码：</td>
<!-- type="password"密码输入框 隐藏用户输入真实值 -->
<td><input type="password" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td> <input type="password" /></td>
</tr>
<tr>
<td>电子邮箱：</td>
<!-- type="email"邮箱类型输入框 h5新增加的类型-->
<td><input type="email" /></td>
</tr>
<tr>
<td>单位（个人）名称：</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>上传头像：</td>
<!-- type="file"文件上传,可以选择本地文件夹下的文件 -->
<td><input type="file"/></td>
</tr>
<tr>
<td>所属国家：</td>
<td>
<select name="country">
<option value=""> 请选择</option>
<option value="1">中华人民共和国</option>
<option value="2">日本</option>
<option value="3">韩国</option>
</select>
</td>
</tr>
<tr>
<td>所属省份：</td>
<td></td>
</tr>
<tr>
<td>所属城市：</td>
<td></td>
</tr>
<tr>
<td>手机：</td>
<td><input type="tel" name="tel"/></td>
</tr>
<tr>
<td>固定电话：</td>
<td><input type="text" name="phone"/></td>
</tr>
<tr>
<td>想要留言：</td>
<td><textarea cols="100" rows="5"></textarea></td>
</tr>
<tr>
<td><input type="submit"/></td>
<td><input type="reset"/></td>
</tr>
</table>
</form>
</body>
</html>
下表列出了输入限制
image.png
上面的标签汇总
<!-- type="text"普通文本框 -->
<!-- type="password"密码输入框 隐藏用户输入真实值 -->
<!-- type="email"邮箱类型输入框 h5新增加的类型-->
<!-- type="file"文件上传,可以选择本地文件夹下的文件 -->
<!-- <input type="submit"/> 提交按钮-->
<!-- <input type="reset"/> 重新输入-->
<!-- <select name="country"> 上拉列表框
<option value=""> 请选择</option> 下拉列表选项
</select> -->
<!-- textarea文本域 cols列数 rows行数
<textarea cols="100" rows="5"></textarea> -->
<!-- radio 单选框通过name属性确定选项为一组
<input type="radio" name="cate">人</input>
<input type="radio" name="cate">公司</input> -->