当前位置：首页 > 前端开发 > 正文

jsp中如何用html

admin
前端开发
2025-07-11
5

JSP中，可直接将 HTML代码嵌入其中，利用` 表达式输出动态内容，还能通过`等标签引入外部 HTML或JSP文件

JSP（Java Server Pages）中，HTML的使用是构建动态网页的基础，JSP允许将静态的HTML内容与动态的Java代码相结合，从而生成丰富且交互性强的网页,以下是如何在JSP中使用HTML的详细指南：

直接嵌入HTML代码

JSP页面本质上是一个特殊的HTML页面，它允许在其中嵌入Java代码和JSP标签,你可以直接在JSP文件中编写HTML代码来定义网页的结构和样式。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">My JSP Page</title> </head> <body> <h1>Welcome to My JSP Page!</h1> <p>This is a static HTML paragraph.</p> </body> </html>

在这个例子中，整个页面都是标准的HTML结构,但你可以在其中插入JSP特有的标签和脚本来实现动态内容。

结合使用HTML标签与JSP代码

JSP的强大之处在于能够将HTML标签与JSP代码结合使用，从而根据特定逻辑生成不同的HTML内容，这通常通过JSP脚本元素<% %>和表达式<%= %>来实现。

示例1：显示当前日期和时间

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">Current Date and Time</title> </head> <body> <h1>Current Date and Time</h1> <p>The current date and time is: <%= new java.util.Date() %></p> </body> </html>

在这个例子中，<%= new java.util.Date() %>是一个JSP表达式，它会在页面渲染时被服务器执行,并将结果插入到HTML中的相应位置。

示例2：动态生成列表

jsp中如何用html 第1张

这里，JSP脚本<% %>包含了一个Java循环，它遍历一个字符串数组，并使用out.println()方法将每个元素作为列表项输出到页面上。

通过JSP脚本输出HTML内容

除了直接在JSP页面中嵌入HTML代码外，你还可以通过JSP脚本生成和输出HTML内容，这通常用于更复杂的逻辑处理,比如从数据库获取数据并动态生成表格等。

示例：从数据库获取数据并显示

假设你有一个数据库连接，并且想从数据库中检索一些数据并在页面上显示,你可以这样做：

<%@ page import="java.sql." %> <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">Database Results</title> </head> <body> <h1>Database Results</h1> <table border="1"> <tr> <th>ID</th> <th>Name</th> </tr> <% Connection conn = null; Statement stmt = null; ResultSet rs = null; try { Class.forName("com.mysql.jdbc.Driver"); conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "user", "password"); stmt = conn.createStatement(); rs = stmt.executeQuery("SELECT id, name FROM mytable"); while(rs.next()) { out.println("<tr><td>" + rs.getInt("id") + "</td><td>" + rs.getString("name") + "</td></tr>"); } } catch(Exception e) { e.printStackTrace(); } finally { try { if(rs != null) rs.close(); } catch(Exception e) {} try { if(stmt != null) stmt.close(); } catch(Exception e) {} try { if(conn != null) conn.close(); } catch(Exception e) {} } %> </table> </body> </html>

在这个例子中，JSP脚本负责建立数据库连接、执行查询，并使用out.println()方法将查询结果动态地生成为HTML表格行。

jsp中如何用html 第2张

利用JSP标签库生成动态HTML

为了简化动态HTML内容的生成过程，JSP提供了标签库（如JSTL JavaServer Pages Standard Tag Library），使用这些标签库，你可以避免在页面中嵌入大量的Java代码,使代码更加清晰和易于维护。

示例：使用JSTL生成动态列表

确保在你的JSP页面中引入了JSTL标签库：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

你可以使用<c:forEach>标签来遍历一个集合,并在页面中输出每个元素：

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">Items List with JSTL</title> </head> <body> <h1>Items List</h1> <ul> <c:forEach var="item" items="${items}"> <li>${item}</li> </c:forEach> </ul> </body> </html>

在这个例子中，${items}是一个包含多个元素的集合（如ArrayList或数组），<c:forEach>标签会遍历这个集合,并为每个元素生成一个列表项。

结合使用JSP和HTML实现复杂页面

通过结合使用JSP和HTML，你可以实现复杂的动态网页，以下是一个包含表单、表格和动态内容的完整示例：

jsp中如何用html 第3张

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">JSP Complex Page</title> </head> <body> <h1>User Registration</h1> <form action="register.jsp" method="post"> <label for="username">Username:</label> <input type="text" id="username" name="username"><br><br> <label for="email">Email:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="Register"> </form> <h2>Registered Users</h2> <table border="1"> <tr> <th>Username</th> <th>Email</th> </tr> <c:forEach var="user" items="${users}"> <tr> <td>${user.username}</td> <td>${user.email}</td> </tr> </c:forEach> </table> </body> </html>

在这个示例中，创建了一个用户注册表单，并显示已经注册的用户列表，通过使用JSP脚本和JSTL标签库,可以轻松实现动态内容的生成和显示。

在JSP中使用外部HTML文件

将静态HTML内容放在外部文件中，并在JSP页面中引入它们是有益的，这样可以提高代码的可维护性和可复用性，你可以使用<%@ include file="header.html" %>指令来引入外部HTML文件。

示例：引入外部HTML文件

<%@ include file="header.html" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">JSP with External HTML</title> </head> <body> <h1>Main Content</h1> <p>This is the main content of the page.</p> <%@ include file="footer.html" %> </body> </html>

在这个例子中，header.html和footer.html是两个外部的HTML文件，它们被引入到JSP页面中，这样，你就可以将页面结构分解为多个独立的部分,便于管理和维护。

使用JSP和HTML实现响应式设计

在现代网页开发中，响应式设计是必不可少的，通过结合使用JSP和HTML，你可以实现适应不同设备和屏幕尺寸的响应式网页,这通常涉及到使用CSS媒体查询和灵活的布局技术。

示例：简单的响应式JSP页面

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">Responsive JSP Page</title> <style> body { font-family: Arial, sans-serif; } .container { max-width: 1200px; margin: auto; padding: 20px; } .header, .footer { background-color: #f8f9fa; padding: 10px; text-align: center; } .content { margin: 20px 0; } @media (max-width: 600px) { .container { padding: 10px; } } </style> </head> <body> <div class="container"> <div class="header"> <h1>Responsive JSP Page</h1> </div> <div class="content"> <h2>Welcome!</h2> <p>This is a responsive JSP page.</p> </div> <div class="footer"> <p>© 2023 MyWebsite</p> </div> </div> </body> </html>

在这个例子中，通过使用CSS媒体查询，使得页面在不同屏幕尺寸下具有良好的显示效果，你可以根据需要调整CSS样式以