【HTML&CSS】综合案例

1、学生信息表

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

2、表单

    <h1>青春不常在，抓紧谈恋爱</h1>
    <hr>

    <form action="">
        昵称：<input type="text" name="" id="" placeholder="请输入昵称">
        <br>
        <br>

        性别：
        <label><input type="radio" name="gender">男</label>
        <label><input type="radio" name="gender" checked>女</label>
        <br>
        <br>

        所在城市：
        <select name="city">
            <option>北京</option>
            <option>上海</option>
            <option>广州</option>
            <option selected>武汉</option>
        </select>
        <br>
        <br>

        爱好：
        <label><input type="checkbox" name="hobby" checked>读书</label>
        <label><input type="checkbox" name="hobby">听歌</label>
        <label><input type="checkbox" name="hobby">写字</label>
        <label><input type="checkbox" name="hobby">看剧</label>
        <label><input type="checkbox" name="hobby">观影</label>
        <label><input type="checkbox" name="hobby">游戏</label>

        <br>
        <br>

        个人介绍
        <br>
        <br>
        <textarea name="" id="" cols="50" rows="10" placeholder="请输入自我介绍"></textarea>
        <br>

        <h3>我承诺</h3>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>

        <label><input type="checkbox" name="rule" checked>我同意所有条款</label>
        <br>
        <br>

        <button type="submit">免费注册</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <button type="reset">重置</button>

    </form>