HTML之链接、列表、表格、表单 2020.4.3作业

链接

 <a href="https://www.php.cn">php中文网</a>

无序列表

<ul>
      <li>c</li>
      <li>c++</li>
      <li>java</li>
      <li>php</li>
    </ul>

有序列表

<ol>
      <li>张三</li>
      <li>李四</li>
      <li>王五</li>
      <li>赵六</li>
    </ol>

表格

<table
      border="1"
      cellpadding="5"
      cellspacing="0"
      width="400px"
      align="center"
    >
      <colgroup>
        <col bgcolor="lightgreen" />
        <col bgcolor="lightyellow" span="2" />
        <col bgcolor="red" />
      </colgroup>
      <caption style="font-size: 30px; margin-bottom: 6px;">
        成绩单
      </caption>
      <tr bgcolor="lightblue">
        <th>学号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>成绩</th>
      </tr>
      <tr>
        <td>0101</td>
        <td>李华</td>
        <td>男</td>
        <td>100</td>
      </tr>
      <tr>
        <td>0102</td>
        <td>张磊</td>
        <td>男</td>
        <td>98</td>
      </tr>
      <tr>
        <td>0103</td>
        <td>田甜</td>
        <td>女</td>
        <td>100</td>
      </tr>
      <tr bgcolor="yellow">
        <td>说明</td>
        <td colspan="3" align="center">本次成绩仅作为参考</td>
      </tr>
    </table>

表单

 <form action="demo1.php" method="GET">
      <section>
        <label for="user">账号</label>
        <input
          type="text"
          name="user"
          id="user"
          placeholder="请输入账号"
          required
          autofcous
        />
      </section>
      <section>
        <label for="password">密码</label>
        <input
          type="password"
          name="password"
          id="password"
          placeholder="请输入密码"
          required
        />
      </section>
      <section>
        <div class="box">
          <label for="secret">性别</label>
          <input type="radio" name="gender" value="male" id="male" />
          <label for="male">男</label>
          <input type="radio" name="gender" value="female" id="female" />
          <label for="female">女</label>
          <input
            type="radio"
            name="gender"
            value="secret"
            id="secret"
            checked
          />
          <label for="gender">保密</label>
        </div>
      </section>
      <section>
        <div class="box">
          <label for="">兴趣</label>
          <input type="checkbox" name="hobby[]" value="program" id="program" />
          <label for="program">编程</label>
          <input type="checkbox" name="hobby[]" value="sport" id="sport" />
          <label for="sport">运动</label>
          <input type="checkbox" name="hobby[]" value="music" id="music" />
          <label for="music">音乐</label>
          <input
            type="checkbox"
            name="hobby[]"
            value="sleep"
            id="sleep"
            checked
          />
          <label for="sleep">睡觉</label>
        </div>
      </section>
      <button>提交</button>
    </form>

效果展示

0403作业