HTML基础 实例

于 2019-01-11 21:34:59 发布
阅读量3.7k 收藏 31
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41532872/article/details/86319544
版权

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        tr {
            line-height: 0;
        }
    </style>
</head>
<body background="gz/binfensaoe01.gif">
    <h2 align="center">小猴相册</h2>
    <table align="center">
        <tr>
            <td><img src="gz/27125326.jpg" alt=""></td>
            <td><img src="gz/27125327.jpg" alt=""></td>
            <td><img src="gz/27125328.jpg" alt=""></td>
        </tr>
        <tr>
            <td><img src="gz/27125329.jpg" alt=""></td>
            <td><img src="gz/27125330.jpg" alt=""></td>
            <td><img src="gz/27125331.jpg" alt=""></td>
        </tr>
        <tr>
            <td><img src="gz/27125332.jpg" alt=""></td>
            <td><img src="gz/27125333.jpg" alt=""></td>
            <td><img src="gz/27125334.jpg" alt=""></td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .table {
            margin-top: -2px;
        }
    </style>
</head>
<body>
    <h1 align="center">学生基本情况登记表</h1>
    <table align="center" width="900px" border="1px" cellpadding="0" cellspacing="0">
        <tr height="30px" align="center">
            <td width="12%">姓名</td>
            <td width="17%"></td>
            <td width="12%">曾用名</td>
            <td width="17%"></td>
            <td width="12%">出生年月</td>
            <td width="17%"></td>
            <td width="14" rowspan="5">照片</td>
        </tr>
        <tr height="30px" align="center">
            <td>性别</td>
            <td></td>
            <td>民族</td>
            <td></td>
            <td>政治面貌</td>
            <td></td>
        </tr>
        <tr height="30px" align="center">
            <td>年龄</td>
            <td></td>
            <td>籍贯</td>
            <td></td>
            <td>政治面貌</td>
            <td></td>
        </tr>
        <tr height="30px" align="center">
            <td rowspan="2" colspan="2">基本情况</td>
            <td>毕业院校</td>
            <td colspan="3"></td>
        </tr>
        <tr height="30px" align="center">
            <td>家庭住址</td>
            <td colspan="3"></td>
        </tr>
    </table>
    <table class="table" align="center" width="900px" border="1px" cellspacing="0" cellpadding="0">
        <tr height="45px" align="center">
            <td rowspan="6" width="7%">成绩</td>
            <td colspan="2" width="14%">第一学期</td>
            <td colspan="2" width="14%">第二学期</td>
            <td colspan="2" width="14%">第三学期</td>
            <td colspan="2" width="14%">第四学期</td>
            <td colspan="2" width="14%">第五学期</td>
            <td colspan="2" width="14%">第六学期</td>
            <td rowspan="4" width="">毕业设计</td>
        </tr>
        <tr height="30px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td width="6.5%"></td>
            <td width="6.5%"></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr height="30px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr height="30px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr height="30px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td rowspan="2"></td>
        </tr>
        <tr height="30px">
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr align="center" height="100px">
            <td>何时何地受过何种惩罚</td>
            <td colspan="6"></td>
            <td>何时何地受过何种奖励</td>
            <td colspan="6"></td>
        </tr>
        <tr height="100px" align="center">
            <td colspan="2">备注</td>
            <td colspan="12"></td>
        </tr>
    </table>
</body>
</html>

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#">
    <table border="1px" cellpadding="7" cellspacing="0" align="center" width="550px">
        <caption><h1>用户注册表</h1></caption>
        <tr>
            <th>用户名</th>
            <td>
                <input type="text" id="username">
                <span></span>
            </td>
        </tr>
        <tr>
            <th>密码</th>
            <td>
                <input type="password" id="password">
                <span></span>
            </td>
        </tr>
        <tr>
            <th>确认密码</th>
            <td>
                <input type="password" id="password-again">
                <span></span>
            </td>
        </tr>
        <tr>
            <th>电子邮箱</th>
            <td>
                <input type="text" id="email">
                <span></span>
            </td>
        </tr>
        <tr>
            <th>手机号码</th>
            <td>
                <input type="text" id="tel-number">
                <span></span>
            </td>
        </tr>
        <tr>
            <th>性别</th>
            <td>
                <input type="radio" name="sex" checked>男
                <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <th>是否有房</th>
            <td>
                <input type="radio" name="house" checked>有
                <input type="radio" name="house">没有
            </td>
        </tr>
        <tr>
            <th>爱好</th>
            <td class="like">
                <input type="checkbox">范冰冰
                <input type="checkbox" checked>刘亦菲
                <input type="checkbox">佟丽娅
                <input type="checkbox">杨颖
                <input type="checkbox">柳岩
            </td>
        </tr>
        <tr>
            <th>户籍</th>
            <td>
                <select name="city" id="city">
                    <option value="01">北京</option>
                    <option value="02">上海</option>
                    <option value="02">内蒙古</option>
                    <option value="03">广东</option>
                    <option value="04">湖北</option>
                    <option value="04">黑龙江</option>
                    <option value="05">四川</option>
                    <option value="06">重庆</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>课程</th>
            <td>
                <select name="course" id="" size="4" multiple>
                    <option value="001">JavaEE</option>
                    <option value="002">web前端</option>
                    <option value="003">数据结构</option>
                    <option value="004">C++</option>
                    <option value="005">汇编语言</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>头像</th>
            <td>
                <input type="file">
            </td>
        </tr>
        <tr>
            <th>个人介绍</th>
            <td>
                <textarea cols="35" rows="6" value="我是textarea的默认值"></textarea>
            </td>
        </tr>
        <tr>
            <th>验证码</th>
            <td>
                <input type="text">
                <span>8888</span>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="checkbox"> 是否阅读并同意协议
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <input type="submit" value="提交">
                <input type="reset" value="重置">
            </td>
        </tr>
    </table>
</form>
</body>
</html>
司天宏
关注
  • 4
    点赞
  • 踩
  • 31
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值