Day3 作业

链接元素举例：

    <a href="https://www.php.cn/" target="_self">点这里跳转web</a><br />
    <a href="3html_use2.md" target="_self">点这里查看本地文件</a><br />
    <a href="3html_use2.zip">点这里下载文件</a><br />
    <a href="3html_use2.zip" download="readme.zip"
      >点这里下载并重命名文件名</a
    ><br />
    <a href="tel:123456">点这里拨打电话</a><br />
    <a href="mailto:123456@163.com">点这里发邮件</a><br />
    <a href="#anchor">跳转到当前页的锚点</a><br />
    <h1 id="anchor" style="margin-top: 1000px;">锚点</h1>

---

列表元素举例

        <h3>无序列表</h3>
        <ul>
          <li>无序列表1</li>
          <li>无序列表2</li>
          <li>无序列表3</li>
        </ul>
        <hr />
        <h3>有序列表</h3>
        <ol start="0">
          <li>有序列表1</li>
          <li>有序列表2</li>
          <li>有序列表3</li>
        </ol>
        <hr />
        <h3>自定义列表</h3>
        <dl>
          <dt>HTML</dt>
          <dd>超文本标记语言</dd>
          <dd>页面是由多个元素组成</dd>
          <dt>CSS</dt>
          <dd>层叠样式表</dd>
        </dl>

---

表格元素举例：

    <table border="1" cellpadding="5" cellspacing="0" width="90%" align="center">
        <colgroup bgcolor=lightpink>
            <col bgcolor="gray">
            <col bgcolor="lightgreen" span="3">
            <col>
            <col>
            <col>
        </colgroup>
        <caption style="font-size: 2.0rem;margin-bottom: 20px">
            11期学生信息表
        </caption>
        <thead bgcolor="lightblue">
            <tr>
                <th>序号</td>
                <th>学号</td>
                <th>姓名</td>
                <th>手机</td>
                <th>地址</t>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>88001</td>
                <td>jeven1</td>
                <td>18123682836</td>
                <td rowspan="3" align="center">广州</td>
            </tr>
            <tr>
                <td>2</td>
                <td>88002</td>
                <td>jeven2</td>
                <td>18123682836</td>
                <!-- <td>广州</td> -->
            </tr>
            <tr>
                <td>3</td>
                <td>88003</td>
                <td>jeven3</td>
                <td>18123682836</td>
                <!-- <td>广州</td> -->
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>4</td>
                <td>88004</td>
                <td>jeven4</td>
                <td>18123682836</td>
                <td rowspan="3" align="center">深圳</td>
            </tr>
            <tr>
                <td>5</td>
                <td>88005</td>
                <td>jeven5</td>
                <td>18123682836</td>
                <!-- <td>深圳</td> -->
            </tr>
            <tr>
                <td>6</td>
                <td>88006</td>
                <td>jeven6</td>
                <td>18123682836</td>
                <!-- <td >深圳</td> -->
            </tr>
        </tbody>
        <tfoot>
            <tr bgcolor="wheat">
                <td>总人数：</td>
                <td colspan="4" align="center">6人</td>
            </tr>
        </tfoot>
    </table>

---

表单元素举例：

    <h3>用户注册</h3>
    <form action="register.php">
      <section>
        <label for="username">用户名：</label>
        <input
          type="text"
          id="username"
          name="username"
          placeholder="输入手机号"
          maxlength="11"
          required
        />
      </section>
      <section>
        <label for="pass">密码：</label>
        <input
          placeholder="6-12位"
          size="12"
          maxlength="12"
          type="password"
          id="pass"
          name="pass"
        />
      </section>
      <section>
        <label for="female">性别：</label>
        <div class="box">
          <input type="radio" name="gender" id="male" value="male" />
          <label for="male">男</label>
          <input type="radio" name="gender" id="female" value="female" />
          <label for="female">女</label>
        </div>
      </section>
      <section>
        <label for="long1">降龙十八掌</label>
        <div class="box">
          <input type="checkbox" name="long1" id="long1" value="long1" />
          <label for="male">见龙在田</label>
          <input type="checkbox" name="long2" id="long2" value="long2" />
          <label for="female">长龙吸水</label>
          <input type="checkbox" name="long2" id="long2" value="long2" />
          <label for="female">飞龙在天</label>
          <input type="checkbox" name="long2" id="long2" value="long2" />
          <label for="female">龙跃在渊</label>
          <input
            type="checkbox"
            name="long2"
            id="long2"
            value="long2"
            checked
          />
          <label for="female">亢龙有悔</label>
        </div>
      </section>
    </form>