HTML小结~

今天老师讲完了HTML,总的来说HTML还是比较简单的,但还是得多练多敲代码,所谓熟能生巧麽~

下午的时候老师布置了周末的作业,要求如下:

index.html
页面登录页面:
1、页面有背景图
2、有一个登录表单(用户名,密码,登录按钮,注册按钮)
3、点击登录按钮跳转到学生信息表页面
4、点击注册按钮跳转的注册页面
    (仿新浪邮箱注册页面,点击注册跳转到学生信息表页面)

stuTable.html
学生信息表页面:
1、只有一个表格,标题是学生信息表
    表头为:姓名、性别、年龄、生日、查看详情
2、点击查看详情跳转到类似简历的页面的指定学生位置

stuInfo.html
学生详情页面:
1、将所有学生信息放到这个页面
2、顺序排放,学生信息展示方式自定义,要有头像
(可以是表格,也可以标题段落)
3、学生信息支持下载

已经完成了~心里小小的成就感~

代码如下:登录页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>登录页面</title>
    </head>
    <body background="img/1.jpg"><br /><br /><br /><br /><br />
        <center><div style="width: 400px; height: 400px; "><center>
            <form>
            <table border="0" cellspacing="0" cellpadding="0"><br /><br /><br />
                 <tr>
                     <td><b><h4>用户名</h4></b></td>
                     <td colspan="4"><input type="text" id="" name=""></td>
                 </tr>
                   <tr>
                     <td><b><h4>密码</h4></b></td>
                     <td colspan="4"><input type="password" id="" name=""></td>
                 </tr>
                   <tr>
                     <td></td>
                     <td colspan="2"><a href="stuTable.html" target="_self"><input type="button" value="登录"></a></td>                    
                     <td colspan="2"><a href="xinxizhuce.html" target="_self"><input type="button" value="注册"></a></td>                    
                 </tr>
            </table>
        </form></center>
        </div></center>
    </body>
</html>
注册页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>注册页面</title>
    </head>
    <body>
        <form name="zhuce" action="index.html" method="get">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="submit" value="注册新浪邮箱" style=" width: 115px; height: 40px;">
            <input type="submit" value="注册手机邮箱" style=" width: 115px; height: 40px;">
        <table>
            <tr>
                <td align="right"><h4>邮箱地址:</h4></td>
                <td colspan="3"><input type="text" id="" name="" class=""></td>
                <td colspan="2">
                    <select>
                        <option selected="">@sina.com</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right"><h4>密码</h4></td>
                <td colspan="5"><input type="password" id="" name="" class="" style="width: 235px;"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td align="right"><h4>确认密码</h4></td>
                <td colspan="5"><input type="password" id="" name="" class="" style="width: 235px;"></td>
            </tr>
            <tr>
                <td align="right"><h4>手机号码</h4></td>
                <td colspan="5"><input type="text" id="" style="width: 235px;"></td>
            </tr>
            <tr>
                <td align="right"><h4>图片验证码</h4></td>
                <td colspan="3"><input type="text" id="" name="" class="" style="width: ;"></td>
                <td colspan="2"><img src="img/2.png" style="width: 120px;"></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="2"><input type="submit" value="免费获取短信验证码"></td>
                <td></td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td align="right"><h4>短信验证码:</h4></td>
                <td colspan="5"><input type="text" id="" style="width: 235px;"></td>
            </tr>
            <tr>
                <td></td>
                <td colspan="5"><img src="img/3.png" align="left"></td>
            </tr>
        </table>
        <h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <input type="radio" name="jieshou"/>我已阅读并接受《新浪网络使用服务协议》和《新浪免费邮箱服务条款》</h5>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="stuTable.html"><input type="submit" value="立即注册" style=" height: 50px; width: 90px;"></a>
    </form>
    </body>
</html>

学生表页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>学生信息表页面</title>
    </head>
    <body>
        <table border="1" cellpadding="10" cellspacing="2" width="80%">
            <caption><h4>学生信息表</h4></caption>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>生日</th>
                <th>备注</th>
            </tr>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>28</td>
                <td>1989.10</td>
                <td><a href="stuInfo.html#one" target="_blank">查看详情</a></td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>27</td>
                <td>1990.6</td>
                <td><a href="stuInfo.html#two" target="_blank">查看详情</a></td>
            </tr>
            <tr>
                <td>王二麻子</td>
                <td>男</td>
                <td>24</td>
                <td>1993.10</td>
                <td><a href="stuInfo.html#three" target="_blank">查看详情</a></td>
            </tr>
            <tr>
                <td>王培佩</td>
                <td>女</td>
                <td>27</td>
                <td>1990.5</td>
                <td><a href="stuInfo.html#four">查看详情</a></td>
            </tr>
        </table>
    </body>
</html>
学生信息页

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>学生详细信息</title>
    </head>
    <body>
        <a id="one"></a>
        <table border="2" cellpadding="5" cellspacing="2" width="80%">
            <caption><h4>学生详情</h4></caption>
            <tr>
                <td>姓名</td>
                <td>张三</td>
                <td>性别</td>
                <td>男</td>
                <td>民族</td>
                <td>汉族</td>
                <td colspan="2" rowspan="3" align="center"><img src="img/张三.jpg" style="width: 200px; height: 200px;"></td>
            </tr>
            <tr>
                <td>出生年月</td>
                <td>1989.10</td>
                <td>政治面貌</td>
                <td>党员</td>
                <td>籍贯</td>
                <td>山东淄博</td>
            </tr>
            <tr>
                <td>毕业院校</td>
                <td>山东大学</td>
                <td>系别</td>
                <td>计算机系</td>
                <td>学历</td>
                <td>研究生</td>
            </tr>
            <tr>
                <td>主修专业</td>
                <td>计算机信息科学</td>
                <td>身高</td>
                <td>183cm</td>
                <td>毕业时间</td>
                <td colspan="3">2012年10月6日</td>
            </tr>
            <tr>
                <td>兴趣爱好</td>
                <td colspan="7">篮球、足球、羽毛球</td>                
            </tr>
            <tr>
                <td>教育背景</td>
                <td colspan="7">全日制本科</td>
            </tr>
            <tr>
                <td>社会实践</td>
                <td colspan="7">经历了将近一周的社会实践,我感慨颇多,我们见到了社会的真实一面,实践生活中每一天遇到的情况还在我脑海里回旋,它给我们带来了意想不到的效果,社会实践活动给生活在都市象牙塔中的大学生们提供了广泛接触社会、了解社会的机会。</td>
            </tr>
            <tr>
                <td>在校实习</td>
                <td colspan="7">实习的时间快而又短暂,不知不觉实习的时间很快就过去了。回想这段日子,我真的有很失落过,也有很认真过,

很高兴过,而现在就是很珍惜这段经验。马上就要毕业了,还有很多事情等着我去做,现在重要的就是要对这段实习

时间做个报告,也是对自己实习的鉴定。</td>
            </tr>
            <tr>
                <td>证书情况</td>
                <td colspan="7">英语四级、英语六级、计算机二级</td>
            </tr>
            <tr>
                <td>求职意向</td>
                <td colspan="7">网络工程师助理、软件工程师助理</td>
            </tr>
            <tr>
                <td>自我评价</td>
                <td colspan="7">本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃苦耐劳,尽职尽责,有耐心。具有亲和力,平易近人,善于与人沟通。</td>
            </tr>
        </table>
        <a href="张三简历.doc">下载</a>
        <a id="two"></a>
        <table border="2" cellpadding="5" cellspacing="2" width="80%">
            
            <tr>
                <td>姓名</td>
                <td>李四</td>
                <td>性别</td>
                <td>女</td>
                <td>民族</td>
                <td>汉族</td>
                <td colspan="2" rowspan="3" align="center"><img src="img/李四.jpg" style="width: 200px;height: 200px;"</td>
            </tr>
            <tr>
                <td>出生年月</td>
                <td>1990.6</td>
                <td>政治面貌</td>
                <td>党员</td>
                <td>籍贯</td>
                <td>山东淄博</td>
            </tr>
            <tr>
                <td>毕业院校</td>
                <td>山东大学</td>
                <td>系别</td>
                <td>计算机系</td>
                <td>学历</td>
                <td>研究生</td>
            </tr>
            <tr>
                <td>主修专业</td>
                <td>计算机信息科学</td>
                <td>身高</td>
                <td>183cm</td>
                <td>毕业时间</td>
                <td colspan="3">2012年10月6日</td>
            </tr>
            <tr>
                <td>兴趣爱好</td>
                <td colspan="7">篮球、足球、羽毛球</td>                
            </tr>
            <tr>
                <td>教育背景</td>
                <td colspan="7">全日制本科</td>
            </tr>
            <tr>
                <td>社会实践</td>
                <td colspan="7">经历了将近一周的社会实践,我感慨颇多,我们见到了社会的真实一面,实践生活中每一天遇到的情况还在我脑海里回旋,它给我们带来了意想不到的效果,社会实践活动给生活在都市象牙塔中的大学生们提供了广泛接触社会、了解社会的机会。</td>
            </tr>
            <tr>
                <td>在校实习</td>
                <td colspan="7">实习的时间快而又短暂,不知不觉实习的时间很快就过去了。回想这段日子,我真的有很失落过,也有很认真过,

很高兴过,而现在就是很珍惜这段经验。马上就要毕业了,还有很多事情等着我去做,现在重要的就是要对这段实习

时间做个报告,也是对自己实习的鉴定。</td>
            </tr>
            <tr>
                <td>证书情况</td>
                <td colspan="7">英语四级、英语六级、计算机二级</td>
            </tr>
            <tr>
                <td>求职意向</td>
                <td colspan="7">网络工程师助理、软件工程师助理</td>
            </tr>
            <tr>
                <td>自我评价</td>
                <td colspan="7">本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃苦耐劳,尽职尽责,有耐心。具有亲和力,平易近人,善于与人沟通。</td>
            </tr>
        </table>
        <a href="李四简历.doc">下载</a>
        <a id="three"></a>
        <table border="2" cellpadding="5" cellspacing="2" width="80%">
            
            <tr>
                <td>姓名</td>
                <td>王二麻子</td>
                <td>性别</td>
                <td>男</td>
                <td>民族</td>
                <td>汉族</td>
                <td colspan="2" rowspan="3" align="center"><img src="img/王二麻子.jpg" style="width: 200px;height: 200px;"></td>
            </tr>
            <tr>
                <td>出生年月</td>
                <td>1993.10</td>
                <td>政治面貌</td>
                <td>党员</td>
                <td>籍贯</td>
                <td>山东淄博</td>
            </tr>
            <tr>
                <td>毕业院校</td>
                <td>山东大学</td>
                <td>系别</td>
                <td>计算机系</td>
                <td>学历</td>
                <td>研究生</td>
            </tr>
            <tr>
                <td>主修专业</td>
                <td>计算机信息科学</td>
                <td>身高</td>
                <td>183cm</td>
                <td>毕业时间</td>
                <td colspan="3">2012年10月6日</td>
            </tr>
            <tr>
                <td>兴趣爱好</td>
                <td colspan="7">篮球、足球、羽毛球</td>                
            </tr>
            <tr>
                <td>教育背景</td>
                <td colspan="7">全日制本科</td>
            </tr>
            <tr>
                <td>社会实践</td>
                <td colspan="7">经历了将近一周的社会实践,我感慨颇多,我们见到了社会的真实一面,实践生活中每一天遇到的情况还在我脑海里回旋,它给我们带来了意想不到的效果,社会实践活动给生活在都市象牙塔中的大学生们提供了广泛接触社会、了解社会的机会。</td>
            </tr>
            <tr>
                <td>在校实习</td>
                <td colspan="7">实习的时间快而又短暂,不知不觉实习的时间很快就过去了。回想这段日子,我真的有很失落过,也有很认真过,

很高兴过,而现在就是很珍惜这段经验。马上就要毕业了,还有很多事情等着我去做,现在重要的就是要对这段实习

时间做个报告,也是对自己实习的鉴定。</td>
            </tr>
            <tr>
                <td>证书情况</td>
                <td colspan="7">英语四级、英语六级、计算机二级</td>
            </tr>
            <tr>
                <td>求职意向</td>
                <td colspan="7">网络工程师助理、软件工程师助理</td>
            </tr>
            <tr>
                <td>自我评价</td>
                <td colspan="7">本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃苦耐劳,尽职尽责,有耐心。具有亲和力,平易近人,善于与人沟通。</td>
            </tr>
        </table>
        <a href="王二麻子简历.doc">下载</a>
        <a id=four></a>
        <table border="2" cellpadding="5" cellspacing="2" width="80%">
            
            <tr>
                <td>姓名</td>
                <td>王培佩</td>
                <td>性别</td>
                <td>女</td>
                <td>民族</td>
                <td>汉族</td>
                <td colspan="2" rowspan="3" align="center"><img src="img/王培佩.jpg" style="width: 200px;height: 200px;"></td>
            </tr>
            <tr>
                <td>出生年月</td>
                <td>1990.5</td>
                <td>政治面貌</td>
                <td>党员</td>
                <td>籍贯</td>
                <td>山东淄博</td>
            </tr>
            <tr>
                <td>毕业院校</td>
                <td>山东大学</td>
                <td>系别</td>
                <td>计算机系</td>
                <td>学历</td>
                <td>研究生</td>
            </tr>
            <tr>
                <td>主修专业</td>
                <td>计算机信息科学</td>
                <td>身高</td>
                <td>183cm</td>
                <td>毕业时间</td>
                <td colspan="3">2012年10月6日</td>
            </tr>
            <tr>
                <td>兴趣爱好</td>
                <td colspan="7">篮球、足球、羽毛球</td>                
            </tr>
            <tr>
                <td>教育背景</td>
                <td colspan="7">全日制本科</td>
            </tr>
            <tr>
                <td>社会实践</td>
                <td colspan="7">经历了将近一周的社会实践,我感慨颇多,我们见到了社会的真实一面,实践生活中每一天遇到的情况还在我脑海里回旋,它给我们带来了意想不到的效果,社会实践活动给生活在都市象牙塔中的大学生们提供了广泛接触社会、了解社会的机会。</td>
            </tr>
            <tr>
                <td>在校实习</td>
                <td colspan="7">实习的时间快而又短暂,不知不觉实习的时间很快就过去了。回想这段日子,我真的有很失落过,也有很认真过,

很高兴过,而现在就是很珍惜这段经验。马上就要毕业了,还有很多事情等着我去做,现在重要的就是要对这段实习

时间做个报告,也是对自己实习的鉴定。</td>
            </tr>
            <tr>
                <td>证书情况</td>
                <td colspan="7">英语四级、英语六级、计算机二级</td>
            </tr>
            <tr>
                <td>求职意向</td>
                <td colspan="7">网络工程师助理、软件工程师助理</td>
            </tr>
            <tr>
                <td>自我评价</td>
                <td colspan="7">本人性格热情开朗,待人友好,为人诚实谦虚。工作勤奋,认真负责,能吃苦耐劳,尽职尽责,有耐心。具有亲和力,平易近人,善于与人沟通。</td>
            </tr>
        </table>
        <a href="王培佩简历.doc">下载</a>
    </body>
</html>

posted @ 2017-09-22 19:57  落落无伤  阅读(133)  评论(0编辑  收藏  举报