HTML【综合案例】

一、表格系列标签

需求：实现下图效果

代码实现：

<table border="1">
        <caption><strong>优秀学生信息表</strong></caption>
    <tr>
        <th>年级</th>
        <th>姓名</th>
        <th>学号</th>
        <th>班级</th>
    </tr>
    <tr height="100">
        <td rowspan="2">高三</td>
        <td>张三</td>
        <td>110</td>
        <td>三年二班</td>
    </tr>
    <tr height="100">
        <td>赵四</td>
        <td>120</td>
        <td>三年二班</td>
    </tr>
    <tr>
        <td>评语</td>
        <td colspan="3">你们都很优秀</td>
    </tr>
</table>

二、表单系列标签

需求：实现下图效果

代码实现：

<h1>青春不常在，抓紧谈恋爱</h1>
<hr>
昵称：
<input type="text" placeholder="请输入昵称">
<br>
性别:
      <label ><input type="radio" name="sex">男</label>
      <label ><input type="radio" name="sex" checked>女</label>
<br>
所在城市:
<select >
    <option value="0">---请选择---</option>
    <option value="1" selected>上海</option>
    <option value="2">北京</option>
    <option value="3">武汉</option>
</select>
<br>
婚姻状况:
<input type="radio" name="marry" checked>未婚 
<input type="radio" name="marry">已婚
<input type="radio" name="marry" >保密
<br>
喜欢的类型:
<input type="checkbox" checked>可爱
<input type="checkbox" checked>性感
<input type="checkbox" >御姐
<input type="checkbox" >萝莉
<input type="checkbox" >小鲜肉
<input type="checkbox">大叔
<br>
个人介绍:
<br>
<textarea  cols="40" rows="10"></textarea>
<br>
<br>
<strong >我承诺</strong>
<ul>
    <li>年满18周岁，单身</li>
    <li>抱着严肃的态度</li>
    <li>真诚寻找另一半</li>
</ul>
<input type="checkbox" >我同意所有<link>条款
<br>
<input type="submit" value="免费注册"> <input type="reset" value="重置">