- 实验目的
- 熟悉JSP程序开发环境的搭建与使用
- 了解HTML文件的结构；
2、掌握HTML常用标签的用法。
- 实验内容
- 1．创建一个JSP页面文件，实现用户注册页面。
-
2．创建一个JSP页面文件，实现登录界面：有用户名和密码输入、提交按钮、重置按钮，及转向注册页面的超链接。
-
3. 创建一个Web信息系统的主页面，使用框架划分窗口实现页面布局。
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <h2>用户注册</h2> <form action="register-zh.jsp" method="post"> <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="password">密码:</label><br> <input type="password" id="password" name="password"><br> <input type="submit" value="提交"> </form> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户登录</title> </head> <body> <h2>用户登录</h2> <form action="login-zh.jsp" method="post"> <label for="username">用户名:</label><br> <input type="text" id="username" name="username"><br> <label for="password">密码:</label><br> <input type="password" id="password" name="password"><br> <input type="submit" value="提交"> <input type="reset" value="重置"> <a href="register-zh.jsp">注册</a> </form> </body> </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Web信息系统主页面</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f4; } .container { margin: 0 auto; width: 1200px; padding: 20px; background-color: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .sidebar { float: left; width: 300px; height: 100vh; background-color: #333; color: #fff; } .content { margin-left: 320px; padding: 20px; background-color: #f4f4f4; } .header { background-color: #4CAF50; color: #fff; padding: 20px; text-align: center; } </style> </head> <body> <div class="container"> <div class="header"> <h1>Web信息系统</h1> </div> <div class="sidebar"> <h3>导航栏</h3> <ul> <li><a href="#">链接1</a></li> <li><a href="#">链接2</a></li> <li><a href="#">链接3</a></li> <li><a href="#">链接4</a></li> </ul> </div> <div class="content"> <h2>欢迎来到Web信息系统主页面！</h2> <p>这是一些介绍性文字。</p> </div> </div> </body> </html>