![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
天蓬老师Correction status：qualified
Teacher's comments：
Collection
Collection
作业内容：1. 制作一张课程表，或者商品列表，用户信息表，要求用到行与列的合并 2. 制作 一张用户注册表单 ，要求用到常用的表单控件
笔记：
制作表格应用<table>标签，其中<tr>表示行，<td>表示列。
<border>表示表格边框。
cellspacing可以设置表格边框，可设置为0，将表格边框折叠。
cellpadding可设置表格内容和表格边框的距离。
<caption>标签可对表格标题进行设置。可在style中将font-weight设置为bolder，加粗表格标题。设置margin-bottom，使得表格标题和表格有距离，使表格更美观。
其中rowspan和colspan可对表格的行和列单元格进行合并，用法就是找到要合并的单元格位置起点设置要合并的单元格数量。
<table border="1" cellspacing="0" cellpadding="5" width="80%"><caption style="font-weight: bolder; margin-bottom: 1em;">课程表</caption><tr><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr><tr><td rowspan="2" bgcolor="lightblue">上午</td><td>语文</td><td>数学</td><td>英语</td><td>体育</td><td>美术</td></tr><tr><td>政治</td><td>音乐</td><td>历史</td><td>英语</td><td>数学</td></tr><tr><td rowspan="2" bgcolor="lightgreen">下午</td><td>语文</td><td>英语</td><td>历史</td><td>数学</td><td>美术</td></tr><tr><td>政治</td><td>数学</td><td>美术</td><td>英语</td><td>数学</td></tr><tr><td colspan="6" bgcolor="red">备注：早上8点上课，下午两点开始上课。</td></tr></table>
<!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></head><body><form style="display: grid; gap: 0.5em;"><!-- 文本输入框 --><fieldset><legend>必填项</legend><div><label for="username">帐号:</label><input type="text" id="username" placeholder="不能为空"></div><div><label for="password">密码:</label><input type="password" id="password" placeholder="必须同时包含字母和数字"></div><div><label for="email">邮箱:</label><input type="email" id="email" placeholder="格式为：xxx@xx.com"></div></fieldset><!-- 单选按钮：多选1 --><div><label for="secret">性别:</label><input type="radio" name="gender" value="male" id="male" /><label for="male">男</label><input type="radio" name="gender" value="female" id="female" /><label for="female">女</label><input type="radio" name="gender" value="secret" id="secret" /><label for="female">保密</label></div><!-- 复选框 --><div><label for="">爱好</label><input type="checkbox" name="hobby[]" id="programmer" checked><label for="programmer">编程</label><input type="checkbox" name="hobby[]" id="game" ><label for="game">游戏</label><input type="checkbox" name="hobby[]" id="shot" ><label for="shot">摄影</label></div><!-- 下拉列表 --><select name="level" id=""><option value="1">铜牌会员</option><option value="2">银牌会员</option><option value="3" selected>金牌会员</option><option value="4">钻石会员</option></select><!-- 输入框+下拉列表 --><div><label for="">关键字：</label><input type="search" name="search" id="" list="key"/><datalist id="key"><option value="html"></option><option value="css"></option><option value="javascript"></option></datalist></div><div><button>提交</button></div></form></body></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>map</title></head><body><a href="https://j.map.baidu.com/61/g" target="map">北京</a><a href="https://j.map.baidu.com/5f/7" target="map">合肥</a><a href="https://j.map.baidu.com/45/g" target="map">上海</a><hr/><iframe srcdoc="<em>地图显示区</em>" frameborder="1" width="500" height="500" name="map"></iframe></body></html>
