4.30
web实验报告1
• 所花时间：1
• 代码行数：395
• 博客容量：1
• 代码如下：
一、实验目的
通过设计一个个人主页网站，学习常用的HTML标记，学习使用CSS对页面进行美化，掌握JavaScript的语法和常用的浏览器对象，初步学会使用Eclipse创建网站和编辑网页的方法。
二、实验内容和要求
1) 自己设计网页内容，做一张展示自己网页。要求展示的主要内容有：基本资料、学习经历、所得奖励、最新动态等。
2) 在网页的合适位置加入一些JavaScript特效，例如显示当前时间、图片定时切换、文本自动滚屏等。
3) 将网页源代码和浏览器截图写入实验报告并提交。
三、实验步骤
1) 打开idea软件，新建一个web项目Lab01，并设置其部署程序为Tomcat。
2) 编写具有个人主页。
3) 文件代码
4) <!DOCTYPE html>
5) <html lang="zh">
6) <head>
7) <meta charset="UTF-8">
8) <meta name="viewport" content="width=device-width, initial-scale=1.0">
9) <title>个人主页</title>
10) <style>
11) .button {
12) background-color: #4CAF50; /* 绿色 */
13) border: none;
14) color: white;
15) padding: 15px 32px;
16) text-align: center;
17) text-decoration: none;
18) display: inline-block;
19) font-size: 16px;
20) margin: 4px 2px;
21) cursor: pointer;
22) }
23) body {
24) font-family: Arial, sans-serif;
25) background-color: #FAFAFC ;
26) }
27) .container { width: 80%; margin: auto; }
28) header { background-color: #4CAF50; color: white; padding: 10px 0; text-align: center; }
29) section { margin: 15px 0; }
30) .profile { display: flex; justify-content: space-around; }
31) .profile-details { flex-basis: 70%; }
32) .profile-photo { flex-basis: 30%; }
33) .experience, .awards, .updates { margin-top: 20px; }
34) footer { background-color: #333; color: white; text-align: center; padding: 10px 0; }
35)
36) /* 调整表格样式 */
37) table {
38) width: 100%; /* 表格宽度100% */
39) border-collapse: collapse; /* 合并表格边框 */
40) }
41)
42) table, th, td {
43) border: 1px solid black; /* 设置表格和单元格边框 */
44) padding: 10px; /* 设置单元格内边距 */
45) text-align: center; /* 设置文本居中 */
46) }
47) </style>
48) </head>
49) <body>
50)
51) <div class="container">
52) <table>
53) <tr>
54) <td colspan="2">
55) <header>
56) <h1>我的个人主页</h1>
57) </header>
58) </td>
59) </tr>
60) <tr>
61) <td class="profile-details">
62) <h2>基本资料</h2>
63) <p>姓名：王凌霄</p>
64) <p>职业：在职带学生</p>
65) <!-- 更多基本资料 -->
66) </td>
67) <td class="profile-photo">
68) <!-- 个人照片 -->
69) <img src="images.jpg" alt="个人头像">
70) </td>
71) </tr>
72) <tr>
73) <td colspan="2">
74) <section class="experience">
75) <h2>学习经历</h2>
76) <!-- 调整表格样式 -->
77) <table>
78) <tr>
79) <th>时间</th>
80) <th>就读学校</th>
81) </tr>
82) <tr>
83) <td>2012-2016</td>
84) <td>余家寨小学</td>
85) </tr>
86) <tr>
87) <td>2016-2019</td>
88) <td>第五实验中学</td>
89) </tr>
90) <tr>
91) <td>2019-2022</td>
92) <td>邯郸二中</td>
93) </tr>
94) <tr>
95) <td>2022-今</td>
96) <td>石家庄铁道大学</td>
97) </tr>
98) </table>
99) </section>
100) </td>
101) </tr>
102) <tr>
103) <td colspan="2">
104) <button class="button" onclick="showAwards()">显示奖项</button>
105) <div id="awards" style="display:none;">
106) <h2>所获奖项</h2>
107) <p>1.呃，基本没有什么奖励</p>
108) <p>2.呃，基本没有什么奖励</p>
109) <p>3.呃，基本没有什么奖励</p>
110) <p>4.呃，基本没有什么奖励</p>
111) <p>5.呃，基本没有什么奖励</p>
112) <p>6.呃，基本没有什么奖励</p>
113) </div>
114) </td>
115) </tr>
116) <tr>
117) <td colspan="2">
118) <section class="updates" id="updates">
119) <h2>最新动态</h2>
120) <p style="display: block;">🥰🥰🥰🥰🥰😇😇😇😇😇我今天获得了五十原石🤩🤩🤩🤩🤩🥳🥳🥳🥳🥳</p>
121) <p style="display: block;">空空如也的个人介绍🥲🥲🥲
122) </p>
123) <p style="display: none;">🥰🥰🥰🥰🥰😇😇😇😇😇我爱铁皮！！！🤩🤩🤩🤩🤩🥳🥳🥳🥳🥳</p>
124) <p style="display: none;">空空如也的个人介绍 😘😘😘😘
125) </p>
126) </section>
127) </td>
128) </tr>
129) </table>
130)
131) <footer>
132) <p>当前时间：<span id="time"></span></p>
133) </footer>
134) </div>
135) <script>
136) function showAwards() {
137) var awards = document.getElementById('awards');
138) if (awards.style.display === 'none') {
139) awards.style.display = 'block';
140) } else {
141) awards.style.display = 'none';
142) }
143) }
144) function showTime() {
145) var date = new Date();
146) var time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds();
147) document.getElementById('time').innerHTML = time;
148) }
149) setInterval(showTime, 1000);
150)
151) var updates = document.querySelectorAll('.updates p'); // 获取所有动态内容
152) var currentIndex = 0; // 当前显示内容的索引
153)
154) function showNextUpdate() {
155) updates[currentIndex].style.display = 'none'; // 隐藏当前内容
156) currentIndex = (currentIndex + 1) % updates.length; // 更新索引
157) updates[currentIndex].style.display = 'block'; // 显示下一个内容
158) }
159) setInterval(showNextUpdate, 2000);
160) </script>
161) </body>
162) </html>
163)
164) 程序截图
//成功将web项目部署在tomcat本地
网页截图
四、心得体会
学会了如何使用 HTML 和 CSS 创建网页，并且学会了如何使用 JavaScript 添加交互功能。在这个过程中，我学会了设置页面布局、样式设计，以及如何处理动态内容和交互效果。这让我对前端开发有了更深入的了解，并且提升了我的实际操作能力。
五、自我评价
分数自评
序号 评分标准 总分
1 使用HTML+CSS+JavaScript完成了展示自己信息的主页 6
2 使用了图片、表格、列表、段落等多种HTML元素 2
3 添加了JavaScript代码 1
4 页面美观 1
合计 10
自评分 10
浙公网安备 33010602011771号