《Java Web程序设计》实验报告二学习使用HTML标签、表格、表单

目录

一、实验目的

二、实验环境

三、实验步骤和内容

1、小组成员分工（共计4人）

2、实验方案

3、实验结果与分析

4、项目任务评价

四、遇到的问题和解决方法

五、实验总结

一、实验目的

1、HTML基础知识、基本概念

2、使用HTML标签、表格进行网页布局

3、使用HTML表单标签设计表单

4、完成个人简历的前端页面设计、后端表单设计

二、实验环境

1、硬件要求：笔记本电脑一台。

2、软件要求：Windows操作系统，使用Eclipse编译环境、Tomcat服务器以及Microsoft Edge浏览器。

3、网络要求：能访问互联网。

三、实验步骤和内容

1、小组成员分工（共计4人）

（1）组长——锦鲤

完成小组内部成员的分工以及前端界面的设计和把控，制定相关的组内合作机制，组内项目的构建遵从“四模四合三并一详”制度，即“四模”为相关项目的制作分为四个模块，每一个人负责一个模块的制作；“四合”为组内四人之间相互合作，将项目开展过程中出现的问题及时的反馈到小组群内，小组成员一起解决；“三并”为以3天为一个期限合并一次代码，检测代码之间以及网页之间是否能够正常的进行衔接和跳转，即每周周三和周六各进行一次小的代码合并工作，将过程中出现的问题发到小组群里让对应负责的同学进行修改和完善，最后在每周的周天进行一次大型的代码合并，此时所有成员必须全部到场，对运行过程中和演练过程中可以改进的地方进行记录，全部演示完毕后对自己负责的模块再进行相应的完善工作；“一详”为组内所有代码都要有相应的注释，确保组内成员都可以看懂各自负责模块的代码，方便进行后期代码的修改工作。

使用Eclipse编译软件设计一个小组成员介绍的专属网页，在该网页中实现各个成员的分工部署以及标题、段落、链接、CSS、图像、列表、区块、布局标签、单文本框、单选框、复选框、下拉列表框、文本域、按钮、边框表单等功能并设计一个表格形式的单独的个人简历。

（2）组员——唐僧

使用Eclipse编译软件设计个人的表格形式的个人简历，个人简历实现标题、图像、列表、区块、布局标签、文本域、按钮、边框表单等功能并完成小组页面的邮箱信息和团队简历小方块图标的设计。

（3）组员——猪八戒

使用Eclipse编译软件设计个人的表格形式的个人简历，个人简历实现标题、段落、链接、图像、列表、区块、布局标签、边框表单等功能并完成小组页面精美图片和联系方式小方块图标的设计。

（4）组员——孙悟空

使用Eclipse编译软件设计个人的表格形式的个人简历，个人简历实现标题、段落、链接、图像、边框表单等功能并完成小组页面头部内容的设计。

2、实验方案

1、根据课本、PPT和老师课堂中讲解的内容，使用Eclipse编译软件设计各自的表格样式。

2、表格设计完成以后以页面链接的形式嵌入到小组的网页之中并检测各个网页之间的衔接以及对其进行修改和完善。

3、在表格中添加一些属性以及对相应的文字进行修饰，让自己的简历更加的美观。

4、定期讨论并总结项目制作过程中出现的问题，对出现的问题进行归纳总结。

5、完成最终的项目以及各自的实验报告，最后进行实验报告排版的检测并提交。

3、实验结果与分析

1、在实验一视频网页的基础之上建立一个链接，通过链接实现其他页面的访问，小组简历链接端口界面如图5-1：

图5-1 小组简历链接端口界面

2、点击链接端口后进入小组简历的网页，在页面中通过CSS来渲染页面，并将图片作为页面的背景，在页面的不同位置设计对应的标题和语句样式并在页面内设计区块和布局标签，小组简历开始界面如图5-2：

图5-2 小组简历开始界面

3、进入小组简历的首页后在页面最底部设计了个人的详细简历的链接，对应的简历也是通过html单独实现的一个页面，在最下端通过标签<a></a>将其进行链接，点击后实现对应页面的切换，个人简历链接端口界面如图5-3：

图5-3 个人简历链接端口界面

4、在团队简历模块内设计另一个切换页面，使之点击该页面后响应自己所设计的小组简历页面，在小组简历页面通过段落标签进行小组成员分工的介绍，并将各自的证件照以图片的形式进行插入，通过盒子对内容进行封装，团队简历分工界面如图5-4：

图5-4 团队简历分工界面

5、通过对数据的拟定化统计设计一个水平条形图，展现小组内部的整体实力，使用盒子对相关的内容进行封装，让其页面更加的规整合理，团队信息数据分析界面如图5-5：

图5-5 团队信息数据分析界面

6、点击页面最下方的个人链接端口后即可查看个人详细的相关详细，使用边框表单对各个模块内容进行分割，并设计对应的文字范围，让其可以在对应的小表格里合理的进行容纳，同时设计不同的背景颜色来区分各个属性模块，个人简历基本信息界面如图5-6：

图5-6 个人简历基本信息界面

7、使用一些标签属性对相关的字体和表单属性进行设置，使之让自己的个人简历更加的丰满，个人简历详细信息界面如图5-7：

图5-7 个人简历详细信息界面

8、在精美图片模块内设计另一个切换页面，使之点击该页面后响应自己所设计的小组日常工作图片页面，在页面通过复选框进行各个阶段图片页面的切换，并通过单选框使其让鼠标移动到图片上发生事件响应，进而展现各个图片的内容，精美图片小组实战界面如图5-8：

图5-8 精美图片小组实战界面

9、在联系方式模块内设计另一个切换页面，使之点击该页面后响应自己所设计的页面，在页面内设计对应的文本框，让其用户进行相关信息的输入，并通过按钮“提交信息并退出”完成信息的提交，联系方式信息提交界面如图5-9：

图5-9 联系方式信息提交界面

10、通过点击对应的文本框进行输入后会保存之前在文本框中输入的内容，只需要以下拉列表框的形式进行输入内容的选择即可完成信息的输入，联系方式列表输入界面如图5-10：

图5-10 联系方式列表输入界面

4、项目任务评价

1、组内成员之间的交流相比于之前有所增加，但是总体来说依然交流较少，导致对于项目的整体进度把握的不够充分，进而导致整体页面的布局过于零散，致使其他组员不能够很好的把控自己模块的布局位置，从而出现合并代码后页面嵌套或者拥挤导致换行的现象。

2、由于对HTML语言掌握力度不够导致经常会出现一些编译错误，特别是在使用HTML语言进行编写时会出现标签没有封闭也可以运行的情况，最后导致页面的排版出现问题，在寻找错误源头的过程中花费了一定的时间。

3、组内成员可以认真的完成自己负责的模块，并能够准时的提交自己完成的代码，使我们在进行代码合成的过程中节约了一定的时间，为我们进行页面预览和发现问题提供了充足的时间。

4、每次完成代码迭代更新后对应模块出现的问题大家都可以积极的进行解决，对于解决不了的问题也会在群里进行及时的反馈，进而组员之间相互合作、共同解决发现的问题，不但提高了对问题的解决效率，而且还加深了我们每一个人处理问题的能力。

5、每一个组员在编写代码的过程中都可以对自己的代码进行注释，每一期合成完毕后的代码组内的成员都可以看懂其他组员所编写的代码，这样组内的每一位成员都可以详细的了解我们整个项目的运行，并且在运行后可以比较快速的定位到出现错误的地方。

6、虽然在项目制作的过程中存在一定的问题，但是我们都会进行及时的调整，总的来说优点是大于缺点的，我们会继续保持好的的一方面，及时对缺点和不足进行改正和完善，让小组成员和自己的项目更加完善。

四、遇到的问题和解决方法

1、代码问题：在使用标签属性<a href=”page.html”>添加链接时点击链接后页面没有反应。

解决方法：查看代码后发现是因为将属性名称href写成了“herf”导致的，将其改正后点击对应模块可以正常实现对应的页面链接功能。

2、文件问题：HTML代码编写完成后点击运行无法成功实现网页展示。

解决方法：由于编写完代码后保存的文件格式为.txt文本格式，编译器无法对.txt文件进行运行，将对应文本的后缀改为.html后进行运行，页面可以正常进行显示。

3、运行问题：编写的代码在运行过程中出现了乱码现象。

解决方法：鼠标右击->Run As->Run Configurations->Common->在Other后填写gbk然后点击Run进行运行后中文可以正常输出。

4、运行问题：代码编写完成后进行运行发现网页无法进行页面加载，显示页面请求失败。

解决方法：由于没有在Tomcat服务器上进行运行所导致，先运行服务器然后再运行代码后页面可以正常加载。

5、运行问题：启动Tomcat的过程中，有时出现端口被占用的情况。

解决方法：对服务器进行配置，将服务器运行的端口号改为别的端口即可（找到Tomcat安装目录下的文件“/conf/server.xml”->使用记事本或写字板打开文件，在文件中找到“Connector port=8080”->将“8080”改为“8888”，然后保存配置文件->重启Tomcat服务器）。

6、代码问题：在编写网页的过程中使用<BR>换行标签后空出的位置过小。