Web:学生课程表表格/用户注册表单

一.学生课程表

1.课程表模样

2.课程表html代码块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>2020新学期课程表</title><style type="text/css">caption {/*定义标题加粗*/font-weight: bold;}table,th,td {/*定义表格样式*/border: 1px solid red;border-collapse: collapse;text-align: center;}.themorning {/*定义字体颜色和背景*/color: fuchsia;background-color: lightpink;}.theafternoon {/*定义字体颜色和背景*/color: goldenrod;background-color: lightcyan;}thead {/*定义背景颜色*/background-color: lightcoral;}tfoot {/*定义背景颜色*/background-color: lemonchiffon;}</style></head><body><div><table><!-- 表格标题 --><caption>2020新学期课程表</caption><!-- 表格头部 --><thead><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></thead><!-- 表格体部上午 --><tbody><tr><td rowspan="4" class="themorning" id="top1">上午</td><td class="themorning">语文</td><td class="themorning">英语</td><td class="themorning">数学</td><td class="themorning">音乐</td><td class="themorning">数学</td></tr><tr><!-- <td class="themorning"></td> --><td class="themorning">音乐</td><td class="themorning">美术</td><td class="themorning">语文</td><td class="themorning">英语</td><td class="themorning">语文</td></tr><tr><!-- <td class="themorning"></td> --><td class="themorning">美术</td><td class="themorning">阅读</td><td class="themorning">体育</td><td class="themorning">数学</td><td class="themorning">英语</td></tr><tr><!-- <td class="themorning"></td> --><td class="themorning">英语</td><td class="themorning">音乐</td><td class="themorning">科学</td><td class="themorning">美术</td><td class="themorning">科学</td></tr></tbody><!-- 表格体部下午 --><tbody><tr><td rowspan="4" class="theafternoon" id="top2">下午</td><td class="theafternoon">语文</td><td class="theafternoon">英语</td><td class="theafternoon">数学</td><td class="theafternoon">音乐</td><td class="theafternoon">数学</td></tr><tr><!-- <td class="theafternoon"></td> --><td class="theafternoon">音乐</td><td class="theafternoon">美术</td><td class="theafternoon">语文</td><td class="theafternoon">英语</td><td class="theafternoon">语文</td></tr><tr><!-- <td class="theafternoon"></td> --><td class="theafternoon">美术</td><td class="theafternoon">阅读</td><td class="theafternoon">体育</td><td class="theafternoon">数学</td><td class="theafternoon">英语</td></tr><tr><!-- <td class="theafternoon"></td> --><td class="theafternoon">音乐</td><td class="theafternoon">美术</td><td class="theafternoon">语文</td><td class="theafternoon">英语</td><td class="theafternoon">语文</td></tr></tbody><!-- 表格部尾部 --><tfoot><tr><td>备注：</td><td colspan="5">每天下午17：00放学，作业在晚上20：00提交到群内</td></tr></tfoot></table></div></body>
</html>

二.用户注册表单

####1.用户注册表单模样

####2.用户注册表单html代码块

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>用户注册表单</title><style type="text/css">div {border: 1px solid coral;width: 245px;height: 35px;}#submit {text-align: center;}</style></head><body><div><form method="POST" action=""><!-- maxlength 设置最大长12位数 minlength 设置最小6位数 autofocus 设置自动焦点 required 设置必填项 --><div><label for="usserneme"> 账号:*</label><inputtype="text"id="usserneme"name="usserneme"minlength="6"maxlength="12"placeholder="*号必填项6-8位数"autofocusrequired/></div><div><!-- input type password 是密码框选项可以隐藏文本输入 --><label for="password"> 密码:*</label><inputtype="password"name="password"id="password"placeholder="*号必填项字母+数字"minlength="8"maxlength="12"required/></div><div><label for="emali">邮箱:*</label><inputtype="email"name="emali"id="emali"placeholder="*号必填项admin@qq.com"required/></div><div><!-- 单选框使用 input type radio  --><label for="secret">性别:</label><input type="radio" name="gender" id="male" value="male" /><label for="male">男</label><input type="radio" name="gender" id="female" value="female" /><label for="female">女</label><inputtype="radio"name="gender"id="secret"value="secret"checked/><label for="secret">保密</label></div><div><label for="">爱好:</label><input type="checkbox" name="hobby[]" id="lvxing" value="lvxing" /><label for="lvxing">旅行</label><inputtype="checkbox"name="hobby[]"id="yumaoqiu"value="yumaoqiu"checked/><label for="yumaoqiu">羽毛球</label><input type="checkbox" name="hobby[]" id="lanqiu" value="lanqiu" /><label for="lanqiu">篮球</label></div><div><!-- 复选框 select要配合option一起使用 selected是默认选一个值  --><label for="">想学习:</label><select name="" id=""><option value="html">html</option><option value="css">css</option><option value="JavaScript">JavaScript</option><option value="php" selected>php</option></select></div><div><!-- 这是一个input+select 下拉列表+文本框  --><label for="">关键字:</label><inputtype="search"name="search"id=""list="my-key"placeholder="请输入文字搜索"/><datalist id="my-key"><option value="php中文网"></option><option value="百度一下"></option><option value="新浪微博"></option></datalist></div><div id="submit"><!-- input type submit 提交按钮 --><input type="submit" value="提交" /></div></form></div></body>
</html>