HTML系列之表格、表单综合案例

鱼馅饼

已于 2023-07-31 10:37:02 修改

阅读量987

点赞数

文章标签： html 前端开发语言

于 2023-07-01 16:35:55 首次发布

本文链接：https://blog.csdn.net/StayAlive1887/article/details/131492068

版权

1.综合案例-学生信息表

要求：用HTML实现下面的效果
在这里插入图片描述
完整的Code：

<table border="1" width="300" height="300">
        <caption><strong>优秀学生信息表</strong></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.综合案例-表单

要求：用HTML实现下面的效果

在这里插入图片描述
完整的Code:

<h1>青春不常在，抓紧谈恋爱</h1>
    <hr>
    <form action="">
        昵称：<input type="text">
        <br>
        性别：<input type="radio" name="gender" checked id="nan"> <label for="nan">男</label>
        <input type="radio" name="gender" id="nv"> <label for="nv">女</label>
        <br>
        所在城市：<select >
            <option value="" selected>上海</option>
            <option value="" >北京</option>
            <option value="" >深圳</option>
            <option value="" >广州</option>
        </select>
        <br>
        婚姻状况：<input type="radio" name="hunyin" id="weihun" checked><label for="weihun">未婚</label>
        <input type="radio" name="hunyin" id="yihun"><label for="yihun">已婚</label>
        <input type="radio" name="hunyin" id="baomi"><label for="baomi">保密</label>
        <br>
        喜欢的类型：<input type="checkbox" checked>可爱 <input type="checkbox" checked>性感
        <input type="checkbox">御姐 <input type="checkbox">萝莉 <input type="checkbox">小鲜肉
        <input type="checkbox">大叔
        <br>
        个人介绍：
        <br>
        <textarea name="" id="" cols="100" rows="10"></textarea>
        <br>

        <h2>我承诺</h2>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
        </ul>
        <input type="checkbox">我同意所有条款
        <br>
        <input type="button" value="免费注册">
        <input type="reset">
    </form>