链接，列表元素 表格学习

链接元素+列表元素

 <!-- 页眉 -->
    <header>
      <!-- 在新网页打开中文网的链接 -->
      <ul>
        <li>
          <a href="https://www.php.cn/" target="_blank" id="anchor"
            >php中文网</a
          >
        </li>
        <li>
          <a href="https://www.baidu.com/">百度</a>
        </li>
        <li>
          <a href="">main3</a>
        </li>
      </ul>
      <time>2020-4-6</time>
      <abbr title="具体地址">在这</abbr>
      <a href="#anchor"><h1 style="margin-top: 1000px;">返回顶部</h1></a>
    </header>

---

表格

<!-- 表格 -->
      <table
        border="1"
        cellpadding="5"
        cellspacing="0"
        width="500"
        align="center"
      >
        <colgroup bgcolor="lightpink">
          <col />
          <col bgcolor="lightgreen" />
          <col bgcolor="yellow" span="2" />
          <col />
        </colgroup>
        <caption style="font-size: 1.5rem; margin-bottom: 10px;">
          员工信息表
        </caption>
        <thead>
          <tr>
            <th>部门</th>
            <th>ID</th>
            <th>姓名</th>
            <th>职务</th>
            <th>手机</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="3">开发部</td>
            <td>101</td>
            <td>小王</td>
            <td>主管</td>
            <td>188345****</td>
          </tr>
          <tr>
            <!-- <td>开发部</!-->
            -->
            <td>102</td>
            <td>小张</td>
            <td>程序员</td>
            <td>158345****</td>
          </tr>
          <tr>
            <!-- <td>开发部</td> -->
            <td>103</td>
            <td>小李</td>
            <td>实习生</td>
            <td>134345****</td>
          </tr>
        </tbody>
        <tbody>
          <tr>
            <td rowspan="3">销售部</td>
            <td>104</td>
            <td>小马</td>
            <td>主管</td>
            <td>188345****</td>
          </tr>
          <tr>
            <!-- <td>销售部</!-->
            -->
            <td>105</td>
            <td>小刘</td>
            <td>客服</td>
            <td>178345****</td>
          </tr>
          <tr>
            <!-- <td>销售部</!-->
            -->
            <td>104</td>
            <td>小朱</td>
            <td>实习生</td>
            <td>188345****</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>备注:</td>
            <td colspan="4">所有员工离职必须提前30天提交书面申请</td>
            <!-- <td></!-->
            <!-- <td></td> -->
            <!-- <td></td> -->
          </tr>
        </tfoot>
      </table>

---

表单

<!-- 表单 -->
      <h3>用户注册</h3>
      <form action="" method="POST">
        <section>
          <label for="username">用户名：</label>
          <input
            type="text"
            id="username"
            name="username"
            placeholder="用户名不少于6位"
            required
            autofocus
            size="15"
          />
        </section>
        <section>
          <label for="password">密码：</label>
          <input
            type="password"
            id="password"
            name="password"
            placeholder="密码不少于8位"
            required
            size="10"
          />
        </section>
        <!-- 单选框 -->
        <section>
          <label for="secret">性别：</label>
          <div class="box">
            <input type="radio" name="gender" id="male" value="1" /><label
              for="male"
              >男</label
            >
            <input type="radio" name="gender" id="female" value="2" /><label
              for="female"
              >女</label
            >
            <input
              type="radio"
              name="gender"
              id="secret"
              value="3"
              checked
            /><label for="secret">保密</label>
          </div>
        </section>
        <!-- 复选框 -->
        <section>
          <div class="box">
            <label for="game">兴趣：</label>
            <input type="checkbox" name="hobby[]" id="game" /><label for="game"
              >游戏</label
            ><input type="checkbox" name="hobby[]" id="travel" checked /><label
              for="travel"
              >旅游</label
            >
          </div>
        </section>
      </form>