Java企业级开发专业:信息安全
| 实验名称 | 实验一：HTML网页制作和发布 | 实验地点 | XXD-405 | 实验时间 | 2023.10.17 |
| |||||
-
- 编写两个网页，第一个文件名是license.html，功能是显示一个用户注册的网站声明；第二个网页是register.html，功能是显示一个用户注册信息输入网页。
- 在第一个页面license.html上，显示一个字体较大的标题：网站声明，然后用正常字体显示若干行声明内容，最下面显示一个链接：同意。同意链接点击后转到第二个网页register.html。注意：显示内容居中显示，可以用表格分成上中下三部分，并显示边框，边框颜色为蓝色，宽度为1。单元格间隙（cellspacing）设置为0。可参照下图：
-
- 网站参考文本内容为：
网站声明
知识产权声明
1.除特别指明外，本网站的设计思路、整体结构、网页设计、文字、图片、图表、软件、视音频文件、广告和其它信息等所有内容，其著作权均属本网站所有。任何他人或他方不得复制或在非本网站所属的服务器上做镜像或者以其它方式进行非法使用。
2.本网站著作权归属于本网站，他人或他方如需引用、摘录、转载或以其它方式使用，必须取得书面许可，并在使用时注明来源和著作权方。对于任何违反国家有关法律法规，不遵守本网站声明，未经本网站同意，擅自使用本网站内容并不注明出处的行为，保留追究其法律责任的机利。
3.道从知识产权法律法规和本网站内容的声明，您可在非商业用途的情况下浏览，下载本网站的内容。如出于商业用途的使用，则必须经过我们的书面许可，并在使用时注明来源和著作权方。对于不经本网站同意，擅自使用本网站内容并不注明出处的行为，保留追究其法律责任的机力。
4.本网站部分内容由其它组织、团体、机构或个人提供，这些内容的著作权属于相应的提供者，本网站引用、摘录或转载这些内容时均已获得著作权持有人的许可，并按约定注明。任何人需要使用本网站包含的由其它组织、团体、机构或个人提供的内容，请直接与著作权人联系，与之相关的任何事务以及法律责任均与本站点无关。
5.本网站引用、摘录或转载来自第三方内容，仅供访问者交流或参考，文中观点或信息与本网站无关。
6.本网站撞录或转载来自第三方内容时，均严格按照我国网络著作权相关法律、法规和司法解释确立的原则进行。任何人浏览本网站时如发现有关文章存在侵权事宜，请立即通知网络管理员，如果属侵权信息，本网站将立即在职责范围内予以清除。
免责声明：
1.任何在本网站出现的信息包括但不限于评论、预测、分析、指标、图表、直接的或暗示的指示均只作为参考，您须对您自主决定的行为负责。
2.本网站所提供的公司资料、基金、黄金、保险、债券、外汇、个股资料等信息，力求但不保证数据的准确性，如有错漏，请以监管机构指定的披露上市公司信息的报刊或网站为准。
3.互联网传输可能会受到干扰，中断、延迟或数据错误，本网站不负任何责任。
4.当地法律对责任限制及免除可能有强行性的规定，此种情况下，应以此类强行性的法律为准。如果您从境外访问本网站，则您有责任遵守所有您所在地的法律。
-
- 第二个页面register.html上显示用户注册必须输入的内容，包括用户名、密码、再次输入密码、真实姓名、性别（用单选框输入两个选项：男，女）、email、一个复选框，显示为“是否接受网站通知”、电话。网页最下方是两个按钮：一个是提交按钮：“注册”，另外一个是reset按钮“清空”。整个网页可以用表格来组织页面内容，显示边框，边框为单线，颜色为浅蓝色。可参照下图：
-
- 网页上适当增加颜色、图片等修饰。
在Idea软件中启动Tomcat，将网页资源发布到浏览器，观察运行效果。
License.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/1.css">
<title>网站声明</title>
</head>
<body>
<table>
<tr><th><h1>网站声明</h1></th></tr>
<tr>
<td>
<p>知识产权声明</p>
<ol>
<li>除特别指明外，本网站的设计思路、整体结构、网页设计、文字、图片、图表、软件、视音频文件、广告和其它信息等所有内容，其著作权均属本网站所有。任何他人或他方不得复制或在非本网站所属的服务器上做镜像或者以其它方式进行非法使用。</li>
<li>本网站著作权归属于本网站，他人或他方如需引用、摘录、转载或以其它方式使用，必须取得书面许可，并在使用时注明来源和著作权方。对于任何违反国家有关法律法规，不遵守本网站声明，未经本网站同意，擅自使用本网站内容并不注明出处的行为，保留追究其法律责任的权利。</li>
<li>根据知识产权法律法规和本网站内容的声明，您可以在非商业用途的情况下浏览、下载本网站的内容。如出于商业用途的使用，则必须经过我们的书面许可，并在使用时注明来源和著作权方。对于未经本网站同意、擅自使用本网站内容并不注明出处的行为，保留追究其法律责任的权利。</li>
<li>本网站部分内容由其它组织、团体、机构或个人提供，这些内容的著作权属于相应的提供者，本网站引用、摘录或转载这些内容时均已获得著作权持有人的许可，并按约定注明。任何人需要使用本网站包含的由其它组织、团体、机构或个人提供的内容，请直接与著作权人联系，与之相关的任何事务以及法律责任均与本网站无关。</li>
<li>本网站引用、摘录或转载来自第三方内容，仅供访问者交流或参考，文中观点或信息与本网站无关。</li>
<li>本网站引用、摘录或转载来自第三方内容时，均严格按照我国网络著作权相关法律、法规和司法解释确立的原则进行。任何人浏览本网站时如发现有关文章存在侵权事宜，请立即通知网络管理员，如果属侵权信息，本网站将立即在职责范围内予以清除。</li>
</ol>
<h3>免责声明：</h3>
<ol>
<li>任何在本网站出现的信息包括但不限于评论、预测、分析、指标、图表、直接的或暗示的指示均只作为参考，您须对您自主决定的行为负责。</li>
<li>本网站所提供的公司资料、基金、黄金、保险、债券、外汇、个股资料等信息，力求但不保证数据的准确性，如有错漏，请以监管机构指定的披露上市公司信息的报刊或网站为准。</li>
<li>互联网传输可能会受到干扰，中断、延迟或数据错误，本网站不负任何责任。</li>
<li>当地法律对责任限制及免除可能有强行性的规定，此种情况下，应以此类强行性的法律为准。如果您从境外访问本网站，则您有责任遵守所有您所在地的法律。</li>
</ol>
</td>
</tr>
<tr>
<td colspan="3" style="text-align: center;">
<a href="register.html">同意</a>
</td>
</tr>
</table>
</body>
</html>Register.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/2.css">
<title>用户注册</title>
</head>
<body>
<form>
<table cellspacing="0">
<tr>
<th colspan="2">用户注册</th>
</tr>
<tr>
<td>用户名：</td>
<td>
<input type="text" name="username" required>
</td>
</tr>
<tr>
<td>密码：</td>
<td>
<input type="password" name="password" required>
</td>
</tr>
<tr>
<td>再次输入密码：</td>
<td>
<input type="password" name="confirm_password" required>
</td>
</tr>
<tr>
<td>真实姓名：</td>
<td>
<input type="text" name="realname" required>
</td>
</tr>
<tr>
<td>性别：</td>
<td>
<input type="radio" name="gender" value="male" checked>男
<input type="radio" name="gender" value="female">女
</td>
</tr>
<tr>
<td>班级：</td>
<td>
<select>
<option value="">请选择班级</option>
<option value="class1">班级一</option>
<option value="class2">班级二</option>
<option value="class3">班级三</option>
<option value="class4">班级四</option>
</select>
</td>
</tr>
<tr>
<td>E-mail：</td>
<td>
<input type="email" name="email" required>
</td>
</tr>
<tr>
<td>是否接受邮件通知：</td>
<td>
<label>
<input type="checkbox" name="accept_notification">是
</label>
</td>
</tr>
<tr>
<td>电话：</td>
<td>
<input type="text" name="phone" required>
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<button type="submit" class="submit-btn">注册</button>
<button type="reset" class="reset-btn">清空</button>
</td>
</tr>
</table>
</form>
</body>
</html>1.css
body {
text-align: center;
}
table {
margin: auto;
border: 1px solid blue;
width: 80%;
border-collapse: collapse;
padding: 10px;
}
th, td {
padding: 10px;
border: 1px solid blue;
}
a {
font-size: 16px;
}2.css
table {
width: 600px;
margin: 0 auto;
border-collapse: collapse;
border: 1px solid lightblue;
}
th,
td {
padding: 10px;
text-align: left;
border: 1px solid lightblue;
}
th {
font-size: 24px;
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
input[type="password"],
input[type="email"] {
width: 300px;
height: 30px;
margin-right: 10px;
padding-left: 5px;
}
input[type="radio"] {
margin-right: 10px;
}
input[type="checkbox"] {
margin-right: 10px;
}
.submit-btn {
width: 80px;
height: 30px;
margin-top: 10px;
margin-right: 50px;
background-color: lightblue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.reset-btn {
width: 80px;
height: 30px;
margin-top: 10px;
background-color: lightblue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
536
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
