![[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
<!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><link rel="stylesheet" href="zycss/zy.css" /></head><body><!-- 页眉 --><div id="header"><header class="zc">用户注册表</header></div><div id="container"><!-- 左边栏 --><aside class="left"></aside><!-- 中间栏 --><main class="content"><form class="bd" action="" method="get" onsbmit="return false"><!-- 用户注册 账号 密码 邮箱 文本框 input标签 --><fieldset><legend>必填项</legend><div><label for="username"> 账号：</label><inputtype="text"id="username"name="username"requiredautofocusplaceholder="不得少于6位"/></div><div><label for="emil">邮箱：</label><inputtype="email"name="email"id="email"requiredplaceholder="ass@email.com"/></div><div><label for="psw"> 密码：</label><inputtype="password"id="psw"name="psw"requiredplaceholder="建议密码包含大小写"/></div></fieldset><!-- 性别单选按钮 --><div><!-- 单选按钮 --><label for="secret">性别</label><input type="radio" name="gender" value="nan" /><label for="">男</label><input type="radio" name="gender" value="nue" /><label for="">女</label><inputtype="radio"name="gender"value="secret"checkedid="secret"/><label for="">保密</label></div><div class="Habby"><!-- 复选框 input type="checkbox"--><!-- 所有复选框的name属性标签必须写成数组格式 --><label for="game">爱好</label><input type="checkbox" name="Habby[]" id="game" checked /><label for="game">游戏</label><input type="checkbox" name="Habby[]" id="film" /><label for="film">电影</label><input type="checkbox" name="Habby[]" id="music" /><label for="music">音乐</label><input type="checkbox" name="Habby[]" id="read" /><label for="read">阅读</label><!-- input标签中 添加checked 属性则默认选中 --></div><div class="school"><!-- 下拉列表 --><label for="">所在的学校:</label><select name="school" id=""><option value="1">深圳大学</option><option value="1">北京大学</option><option value="1">清华大学</option></select></div><div><!-- 自定义下拉列表, select + input = datalist --><label for="">所属的社团:</label><input type="search" name="societies" list="societies" /><datalist id="societies"><option value="街舞社"></option><option value="魔术社"></option><option value="模特社"></option></datalist></div><div><button>提交</button></div></form></main><!-- 右边栏 --><aside class="right"></aside></div><!-- 页脚 --><footer class="yw">备注：请大家尽快注册,明天下午6点之前完成</footer></body></html>
@import url(main.css);@import url(footer.css);@import url(header.css);
#container {margin: 5px 0;display: flex;justify-content: center;}#container .left,#container .right {min-width: 40%;min-height: 600px;}#container .content {flex: 1;margin: 0 5px;}#container div{text-align: left;}/* 使用上下文选择器 对下拉框选择 */.school>select{width: 180px;}.bd{display:grid;gap: 5em;}
.zc{width: 100%;vertical-align: middle;text-align: center;font-size: 40px;}
.yw{width: 100%;vertical-align: middle;text-align: center;font-size: 40px;}
<!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>Document</title><style>/* 后代选择器 子子孙孙都会选中 */.sg li{background-color: aquamarine;}.sg>li{background-color: blue;}.cm+li{background-color: blueviolet;}.cm~li{background-color: brown;}</style></head><body><ul class="sg"><li>苹果<ul><li>大苹果</li><li>小苹果</li></ul></li><li>香蕉</li><li>西瓜</li><li class="cm">草莓</li><li>樱桃</li><li>龙眼</li></ul></body></html>
学习了Form标签和input标签的应用，单选和多选框，下拉框和自定义下拉框的应用，结合前面所学的元素布局以及CSS的模块化如何应用在案例中
熟悉了CSS的标签，属性和上下文选择器