1. 制作一个你的课程表；
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>课表</title></head><style type="text/css">*{margin: 0 auto;padding:0;border:0;box-sizing:border-box;font-size: 12px;}table{border-collapse: collapse;width:680px;text-align: center;line-height: 30px;}table caption{padding:6px;font-weight: bold;font-size: 16px;}table tr th,table tr td{border:1px solid lightblue;}thead tr{background-color:lightseagreen;}table tr th:hover,table tr td:hover{background-color: mediumaquamarine;}table tr th:hover,table tr th[rowspan="4"]{background-color:mediumslateblue;}table tr th:hover,table tr th[rowspan="2"]{background-color:mediumslateblue;}table tbody tr td:nth-of-type(1){padding: 0 12px;}</style><body><table><!-- 标签定义表格的页脚 --><caption>课表</caption><!-- 标签定义表格的表头 --><thead><!-- th表头单元格 --><tr><th colspan="2">课程</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><!-- 标签定义表格的页脚tfoot --><tfoot><tr><td colspan="7" >晚自习</td></tr></tfoot><tbody><!-- td标准单元格 rowspan 行合并 colspan：列合并 --><tr><th rowspan="4">上午</th><td>1</td><td>大语</td><td>高数</td><td>模拟电路</td><td>汇编语言</td><td>c语言</td></tr><tr><td>2</td><td>操作系统</td><td>计算机网络原理</td><td>数据库系统</td><td>面相对象的程序设计</td><td>概率论与数理统计</td></tr><tr><td colspan="6">课间操</td></tr><tr><td>3</td><td>数据结构</td><td>模拟电路</td><td>汇编语言</td><td>计算机网络原理</td><td>大语</td></tr><tr><th colspan="7">午间休息</th></tr><tr><th rowspan="2">下午</th><td >4</td><td>汇编语言</td><td>高数</td><td>高数</td><td>模拟电路</td><td>大语</td></tr><tr><td>5</td><td>模拟电路</td><td>高数</td><td>软件工程</td><td>计算机网络原理</td><td>模拟电路</td></tr></tbody></table></body></html>
效果：
2.将课堂上提及所有表单控件全部实例演示一遍
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style type="text/css">*{margin:0;padding:0;border:0;box-sizing:border-box;outline: none;font-size: 14px;}form{padding: 20px;width:400px;}form input,select{width:300px;border:1px solid lightblue;margin: 6px 0;}textarea{border:1px solid lightblue;outline: none;vertical-align:top;margin: 6px 0;resize: none;}button{width:300px;border:1px solid lightblue;margin: 6px 0;background-color: #ffffff;border-radius: 3px;}</style></head><body><form action="index.php" id="form1" autocomplete="off" method="POST" enctype="multipart/form-data"><div><input type="text" id="name" name="name" required /></div><div><input type="file" name="up" required /></div><div><select name="selec" id="selec"><optgroup label="我的分类"><option value="文艺">文艺</option><option value="表演">表演</option></optgroup><optgroup label="商家"><option value="taobao">淘宝</option><option value="jingdong">京东</option></optgroup></select></div><label for="sex">性别:</label><!-- 单选按钮 --><div><label for="male">男</label><input type="radio" name="gender" value="male" id="male" /><label for="female">女</label> <input type="radio" name="gender" value="female" id="female" /></div><label for="game">兴趣:</label><div><!--复选框的--><label for="game">游戏</label><input type="checkbox" name="bby[]" value="game" id="game" checked /><br/><label for="o2ot">跑步</label><input type="checkbox" name="bby[]" value="shoot" id="shoot" checked /><br/><label for="o2ot">读书</label><input type="checkbox" name="bby[]" value="shoot" id="sho"/></div><!-- 文本域 --><label for="desp">简述:</label><textarea name="desp" id="desp" cols="30" rows="10"></textarea><!-- <fieldset> 标签可以将表单内的相关元素分组 --><!-- <legend> 标签为 <fieldset> 元素定义标题。 --><fieldset><legend>产品分类</legend>height: <input type="text" name="height"/>weight: <input type="text" name="weight" /></fieldset><button>发送</button></form></body></html>
效果：
