![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：
Collection
Collection
主要是，表单，选择器，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>作业3</title><style>h3{background:yellowgreen;width: 400px;height: 30px;}input{background:thistle;}label[id="phone1"]{background:yellow;}label[class="nichen"]{background:sienna;}input.nichen_inp{background:springgreen;}input#psw{background:slategray;}/* 上下文选择器 号码区号的位置*/select option{background:tomato;}</style></head><body><h3>欢迎注册,欢乐每一天</h3><div><form action="check.php" method="GET" style="display: grid;gap: 1em";><fieldset><legend>必填项</legend><div><label for="nichen" class="nichen">昵称:</label><input type="text" class="nichen_inp" name="nichen" autofocus required placeholder="请输入你想要的名称" value="" id="nichen"/></div><div><label for="psw">密码:</label><input type="password" name="psw" placeholder="密码不可为空" id="psw"/></div><div><label for="phone" id="phone1">手机:</label><input type="tel" name="phone" placeholder="请输入你的11位手机号" id="phone"/></div><div><label for="email1">邮箱:</label><input type="email" name="email" id="email1" placeholder="请输入你的邮箱"/><!-- label中的for="email1" 对应的是 input中的 di="eamil1"的值 --></div></fieldset><fieldset><legend>下面为选填项</legend><div><label for="secret">性别:</label><label>男</label><input type="radio" name="gender" value="male" id=""><label>女</label><input type="radio" name="gender" value="female" id=""><label>保密</label><input type="radio" name="gender" value="secret" checked id="secret"></div><div><select name="" id=""><option value="86" selected>中国+86</option><option value="20">埃及+20</option><option value="32">比利时+32</option><option value="48">波兰+48</option></select><input type="tel" name="phone" placeholder="手机号"/></div><div><label for="">个人兴趣:</label><input type="checkbox" id="chess" name="hobby[]" checked><label for="chess">象棋</label></input><input type="checkbox" id="game" name="hobby[]" checked><label for="game">游戏</label></input><input type="checkbox" id="run" name="hobby[]" ><label for="run">跑步</label></input><input type="checkbox" id="swim" name="hobby[]" ><label for="swim">游泳</label></input></div><div><label for="">更多的兴趣:</label><input type="search" name="search" id="search" list="keys"><datalist id="keys"><option value="美女"></option><option value="野兽"></option><option value="美酒"></option><option value="帅哥"></option></datalist></div></fieldset><button>提交</button></form></div><div style="width: 80%; height: 20px; background:tomato;">上面的颜色太乱了</div><style>/* 后代选择器 */ul li{background:tomato;}/* 子选择器 */div > ul > li{background:rgb(7, 116, 206);}/* 同级相邻,作用于儿子3身上 */.son_2+li{background:rgb(128, 0, 49);}.son_6 ~ li{background:yellow;}</style><div><ul id="ul1" ><li>儿子1</li><li class="son_2">儿子2</li><li>儿子3</li><li>儿子4<ul><li class="son_4">孙子_1</li><li>孙子_2</li><li>孙子_3</li><li>孙子_4</li><li>孙子_5</li><li>孙子_6</li></ul></li><li>儿子5</li><li class="son_6">儿子6</li><li>儿子7</li><li>儿子8</li></ul></div></body></html>