![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
PHPzCorrection status：qualified
Teacher's comments：关于后代选择器，可以理解为windows系统内一个文件夹内进行ctrl + a
Collection
Collection
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>基本选择器实例</title><style type="text/css">/* 1:基于标签选择 */ul {color: greenyellow;}/* 2:基于标签内的属性来选择class属性的快捷方式是'.' */.red{color: orangered;}/* id属性的快捷方式是'#' */#blue{color: cadetblue;}</style></head><body><ul><li class="red">demo22</li><li class="red">demo33</li><li>demo44</li><li>demo55</li><li id="blue">demo66</li><li id="blue">demo77</li></ul></body></html>
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>上下文选择器实例</title><style type="text/css">/* 1:后代全选,变相理解就是win系统里的'control+a’.他的快捷方式是空格键 */li {background-color: #FF4500;}/* 2:子选择器,只选中子一级,下面的儿子孙子都不会被选中. 他的快捷方式是'>' */body>ul>li{background-color: blueviolet;}/* 3:同级相邻选择器,选中的是下面一个同级的来操作,他的快捷方式是'+' */.tongji+li{background-color: cadetblue;}/* 4:同级全部选择器,选中的是同级全部,但不包括儿子孙子,快捷方式是'～' */.all~li{background-color: deeppink;}</style></head><body><ul><li class="all">demo2222</li><li>demo3333</li><li>demo4444</li><ul><li class="tongji">demo11111</li><li>demo22222</li><li>demo33333</li></ul><li>demo5555</li><li>demo6666</li><li>demo7777</li></ul></body></html>
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>用户注册</title></head><h1 align="center">用户注册</h1><body><form action="" method="get"><fieldset id=""><legend align="center">欢迎您的加入</legend><br><div><label for="username">账户：</label><input type="text" placeholder="请输入预想的用户名" id="username"></div></div><label for="password">密码：</label><input type="password" placeholder="请输入预想的密码" id="password"></div><div><label for="phone">电话：</label><input type="number" placeholder="请输入您的手机号" id="phone"></div><br><div><label for="">您的性别：</label><input type="radio" name="xingbie" id="" value="man" /> <label>男</label><input type="radio" name="xingbie" id="" value="girl" /> <label>女</label></div><br><div><label>爱吃的主食：</label><input type="checkbox" name="zhushi[]" id="" value="mifan" /> <label>米饭</label><input type="checkbox" name="zhushi[]" id="" value="miantiao" /> <label>面条</label><input type="checkbox" name="zhushi[]" id="" value="jiaozi" /> <label>饺子</label></div><br><div><label>请选择您需要注册的会员等级：</label><select name="vip"><option value="putong">普通会员</option><option value="zhongji">中级会员</option><option value="gaoji">高级会员</option></select></div><br><div><label>请输入您的职业：</label><input type="search" name="search" id="" value="" list="keywords"/><datalist id="keywords"><option value ="学生"></option><option value ="老师"></option><option value ="医生"></option><option value ="会记"></option><option value ="律师"></option><option value ="个体"></option></datalist></div></fieldset></form><br><button type="button" style="width: 600px;" >点击注册</button></body></html>
PHPz