课程表、用户注册及 css 预习
课程表效果图如下：
下面是代码区：
<!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>* {text-align: center;}</style></head><body><!-- cellpadding 属性规定的是单元边沿与单元内容之间的空间cellspacing 属性规定的是单元之间的空间 --><table border="1" style="width: 90%; " cellspacing="0" cellspadding="5"><!-- 定义表格标题 --><caption style="font-size: 2em;">课程表</caption><!-- 表格的页眉 --><thead style="background-color: aquamarine;"><!-- 定义表头 --><th>时间</th><th>星期一</th><th>星期二</th><th>星期三</th><th>星期四</th><th>星期五</th></thead><!-- 表格主体 --><tbody><!-- 课程内容 --><tr><td rowspan="4" style="background-color: cornflowerblue;">上午</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="6" style="background-color: darkslategray;">午休</td></tr><tr><td rowspan="2" style="background-color: cornflowerblue;">下午</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 style="background-color: forestgreen;"><td>备注：</td><td colspan="5">每天下午16：00-17：00写完作业再回家</td></tr></tbody></table></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>用户注册</title></head><body><form action="" style="display: grid; gap: 0.5em" method="POST"><fieldset><legend>必填选项</legend><div><label for="username">用户名:</label><!-- autofocus是光标自动定位到编辑框，required是必填选项 placeholder是提示内容文本--><input type="text" name="username" id="username" autofocus required placeholder="这里填账号"></div><div><label for="password">密 码:</label><input type="password" name="password" id="password" required placeholder="这里填密码"></div><div><label for="email">邮 箱:</label><input type="email" name="email" id="email" required placeholder="这里填邮箱"></div></fieldset><div><label for="secret">性别：</label><input type="radio" name="gender" id="male" value="male"><label for="gender">男</label><input type="radio" name="gender" id="female" value="female"><label for="gender">女</label><input type="radio" name="gender" id="secret" value="secret" checked><label for="gender">保密</label></div><div><label for="">兴趣爱好</label><input type="checkbox" name="aihao[]" id="lvyou" value="lvyou"><label for="lvyou">旅游</label><input type="checkbox" name="aihao[]" id="diaoyu" value="diaoyu"><label for="diaoyu">钓鱼</label><input type="checkbox" name="aihao[]" id="huwai" value="huwai"><label for="huwai">户外</label><input type="checkbox" name="aihao[]" id="youyong" value="youyong"><label for="youyong">游泳</label></div><div><label for="">人生目标</label><select name="" id=""><option value="1">PHP终极目标光头佬</option><option value="2" selected>PHP从入门到放弃</option><option value="3">PHP从入门到精通</option></select></div><div><button type="submit">提交</button></div></form></body></html>
css预习部分
- CSS是Cascading Style Sheets的缩写，即层叠样式表，也被称作“串样式表”、“级联样式表”等。CSS是一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言！
参考资料~MDN
参考资料~菜鸟
参考资料~w3school
