北邮信网html静态网页实验报告

题目:基于html的静态网页制作姓名学院专业 班级 学号 班内序号实验主题主题及功能：在这次实验中，我设计的网页主题是高考，是一个面向广大高三考生的网页，在网页中提供有督促考生努力学习的励志视频；有各大教育机构的超链接，可以让考生们在遇到问题时找到老师求助；还有各大大学院校主页的超链接，意在让考生们明确自己的目标，这样才能够有更多学习的动力；还有让考生们能够暂时放松一下的轻音乐；最重要的是还有大号的高考倒计时，让考生们能够把握好复习的节奏；最下方还有百度的连接，方便考生。运行流程：首先在第一张网页上可以观看励志视频，成功登陆后进入主网页，即可看到上述的各种功能和信息。直接点击网页中表格中的教育机构名称即可进入到各个教育机构的主页；点击播放键可播放音乐，点击播放时间可以后退30s；点击屏幕下方的心形图案即可进入各大大学院校的主页了；点击baidu即可进入百度首页。功能实现和html技术：网页中的文字使用了不同的颜色、背景色、字号和字体，文字之间存在换行操作，该功能使用了HTML中的文本和段落技术；网页中会播放音乐和视频，且网页中包括很多图片，该功能用到了HTML的多媒体技术；主网页的教育机构链接布局使用了表格来进行布局，使用了HTML的插入表格的技术；网页中链接到其他HTML页面、百度、各大教育机构的功能使用了HTML的超链接技术。网页中有需要登陆的部分，该功能使用了HTML的表单技术。结合div和css，对布局和内容进行美化和分配。实验内容运行结果播放视频：登陆：高考倒计时（会左右摇摆）：各教育机构链接：播放音乐： 各大大学院校链接：当天日期、制作者名字缩写、百度链接：部分代码：插入背景图片：body{background-image:url(gaokao1.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:50%50%;background-size:100%;}插入图片：<imgsrc="too.gif"width="40px";height="40px";style="position:absolute;left:1200px;top:200px;">插入超链接：<td><ahref="/"target="view_window">新东方培优</a></td>插入音乐：<audiocontrols="controls"><sourcesrc="summer.mp3"type="audio/mp3"/><sourcesrc="summer.ogg"type="audio/ogg"/></audio>插入图片超链接：<ahref="/publish/newthu/index.html"target="view_window"><imgsrc="too.gif"width="40px";height="40px";/></a>实验心得与感受实验总体上进行的相对比较顺利，但是也出现过一些问题。在编写页面时背景图片的插入存在重叠的问题，后来加入background-size:100%后，问题得到解决。在插入视频时一开始没找到网页上视频的html地址，后来发现优酷网站上有直接的链接，问题得到了解决。通过实验我发现，HTML语言很有趣很有意思，而且本次实验自主性和可操作性很强，可以根据自己的兴趣来确定主题。