1. 写一个课程表, 要求用到行与列的合并
内容简介
行与列的合并：
- 水平方向合并： colspan
- 垂直方向合并： rowspan
代码格式化、注释清晰、带有效果图
示例如下：
<!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>/* 1、添加表格线：一定要添加到单元格中 */table td,table th {border: 1px solid #000;}/* 2、折叠表格线 */table {border-collapse: collapse;}/* 3、对表格进行一些布局设置 */table {width: 90%;/* margin-left: auto;margin-right: auto;margin: auto auto; */margin: auto;/* 块级元素在父级中的居中（水平居中） *//* 文本的水平居中：text-align */text-align: center;}table caption {margin-bottom: 0.5em;}table thead {background-color: aquamarine;}table tbody .period {background-color: aqua;}table tbody tr:first-of-type td:first-of-type {background-color: blanchedalmond;}table tbody tr:nth-of-type(6) td:first-of-type {background-color: blanchedalmond;}</style></head><body><table><caption><h3>课程表</h3></caption><thead><tr><th colspan="2">时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></tr></thead><tbody><tr><td colspan="2" rowspan="4" class="period">上午</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>音乐</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="9">午休（12:00~14:00）</td></tr><tr><td colspan="2" rowspan="3">下午</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>劳动</td><td>无</td><td>品德</td><td>品德</td><td>无</td></tr></tbody><tfoot><tr><td>备注</td><td colspan="6">值日生打扫卫生</td></tr></tfoot></table></body></html>
输出结果，截图如下：
2. 写一个注册表单
内容简介：
form.enctype: 表单数据编码方式
form.onsubmit: 表单提交事件
input.type: 输入控件类型
input.type="text": 单行文本框(默认)
input.type="email": 邮箱控件
input.type="password": 密码控件(密文)
input.type="number": 数值控件
input.type="date": 日期控件
input.type="color": 拾色器
input.type="url": URL 控件
input.type="search": 搜索框控件
input.type="hidden": 隐藏域控件
input.type="file": 文本域控件
input.type="radio": 单选按钮
input.type="checkbox": 复选框
select.name+option.value: 下拉列表框
input.list+datalist.id: 预定义列表框
textarea.cols/rows: 文本域(多行文本框)
代码格式化、注释清晰、带有效果图
示例如下：
<!DOCTYPE html><html lang="zh-CN"><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>label{width: 100px;height: 50px;}</style></head><body><h1>用户注册</h1><form action="regiter.php" method="post" enctype="application/x-www-form-urlencoded" target="_blank" id="register"><!-- 表单控件分组 --><fieldset><legend>基本信息</legend><!-- type="text" 单行文本框 ,明文 --><div class="username"><label for="uname">用户名:</label><input type="text" id="uname" name="username" value="admin" placeholder="用户名不少于6位" required readonly form=""/></div><div class="gender"><label for="secret">性别:</label><!--* 1. name: 必须相同,以保住唯一性* 2. input.value <=> input.id <=> label.for* 3. checked: 默认选项* 4. 总标签label.for <=> checked--><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" checked><label for="secret">保密</label></div><div class="password"><label for="psw">密码:</label><input type="password" name="password" value="" id="psw" placeholder="不少于6位" required/></div><div class="email"><label for="email">邮箱:</label><input type="email" id="email" name="email" value="" placeholder="user@email.com" /></div><div class="age"><label for="age">年龄:</label><input type="number" value="18" min="18" max="80" step="10" />岁</div><div class="birthday"><label for="birthday">生日:</label><input type="date" name="birthday" value="2022-10-10" id="birthday" min="1949-10-01" max="2000-01-01" /></div><div class="blog"><label for="blog">博客:</label><input type="url" name="blog" placeholder="http://"></div><div class="color"><label for="color">拾色器:</label><input type="color" name="color" value="#FFFF00" id="color" onchange="getColor(this)" /><output>#FFFF00</output></div><div class="search"><label for="query">搜索:</label><input type="search" name="search" id="query" placeholder="输入关键字" /><button type="button">查询</button></div><div class="upload"><label for="upload">头像:</label><!-- ! 文件上传,必须将 form.enctype="multipart/form-data",method="POST" --><input type="file" name="user_pic" id="upload" /><button type="button">上传</button></div><div class="progrss"><label>进度:</labe><!-- min 不要给 --><progress name="progress" max="100" value="10"></progress><output>10%</output><button type="button" onclick="handle(this)">+1</button></div><div class="hobby"><label>爱好:</label><!--* 1. name: hobby[], 数组的语法形式,用于保存一个或多个值* 2. input.value <=> input.id <=> label.for,其实只需要input.id <==> label.for* 3. checked: 默认选项--><input type="checkbox" name="hobby[]" value="game" id="game" checked><label for="game">游戏</label><input type="checkbox" name="hobby[]" value="trave" id="trave"><label for="trave">旅游</label><input type="checkbox" name="hobby[]" value="shoot" id="shoot"><label for="shoot">摄影</label><input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">编程</label></div></fieldset><button type="submit">提交</button></form><script src="static/js/func.js"></script></body></html>
输出结果，截图如下：
3.总结
表格的作用：之前是用来做网页布局的，现在用来做数据展示
表格的优点：整体结构清晰，划分明确；数据展示整齐，可读性强
