第三课：表单、CSS选择器作业

一、表单

 <h2>用户注册</h2>
      <fieldset >
        <legend>必须填</legend>
    <!-- post：数据不在url中，安全、可发送大量数据、文件上传； -->
    <!-- GET：数据在url中，不安全，数据不超过4K -->
    <form action="check.php" method="GET">
      <label for="username">账号：</label>
      <!-- for与input中的id对应 -->
      <!--input中的name与method的传递有关 -->
      <!-- require属性：提醒未输入（必须输入后才可以提交） -->
      <!-- auto属性：自动获取焦点 -->
      <!-- value属性：默认值 -->
      <input type="text" id="username" name="username" required autofocus />
      <br />
      <label for="psw">密码：</label>
      <input
        type="password"
        id="psw"
        name="psw"
        placeholder="不少于8位"
        required
      /></br>
      <div>
        <label for="">性别：</label>  
        <input type="radio"name="gender" id="male "value="male" /><label for="male" >男</label>
        <input type="radio"name="gender" id="female" value="female" checked /><label for="female">女</label>
        <input type="radio"name="gender" id="secert" value="secret" /><label for="secret">保密</label>
      </div>
      <div>
        <label for="">爱好：</label>  
        <input type="checkbox"name="hobby[]" id="game" value="game" /><label for="game" >游戏</label>
        <input type="checkbox"name="hobby[]" id="trave" value="trave" checked /><label for="旅游">旅游</label>
        <input type="checkbox"name="hobby[]" id="shoot" value="shoot" /><label for="摄影">摄影</label>
      </div>
      <div>
        <select name="level" id="">
            <option value="1">铜牌会员</option>
            <option value="2">银牌会员</option>
            <option value="3">金牌会员</option>
            <option value="4" selected>永久会员</option>
        </select>
      </div>
      <div>
          <label for="">搜索关键字</label>
          <input type="search" name="search" list="keywords">
        <datalist  id="keywords">
            <option value="铜牌会员"></option>
            <option value="2"></option>
            <option value="3"></option>
            <option value="4"></option>
        </datalist>
      </div>
      <button>提交</button>
    </form>
</fieldset>

二、CSS选择器

1. / 标签选择器：标签名称 /
2. / 属性选择器：[属性=值]{} /
3. / ID选择器：#id /
4. / 类选择器：.类 /
5. / 优先级：!important>行内>id(百位)>class（十位>标签（个位） /
6. / 子元素：> /
7. / 后代元素：空格 /
8. / 相邻元素：+ /
9. / 所有兄弟元素：~+ /