综合Web开发：JSP、HTML和CSS实战技术PPT

红钻头机

于 2024-10-08 13:32:05 发布

阅读量1.4k

点赞数 9

本文链接：https://blog.csdn.net/weixin_42509513/article/details/142797777

版权

本文还有配套的精品资源，点击获取

简介：JSP、HTML和CSS是Web开发的关键技术，它们各自负责不同的功能：JSP处理服务器端逻辑，HTML定义页面结构，CSS则负责页面布局和样式设计。JSP-HTML-CSS结合能够创建动态、交互式的Web应用。通过JSP，开发者可以在HTML模板中嵌入Java代码，并使用CSS来美化和布局动态内容，从而实现数据驱动的Web应用。JSP与Servlets的协作遵循MVC架构，有助于提升代码的组织和维护。本演示文稿系列（PPT）旨在通过清晰的步骤和实例，帮助学习者掌握这些技术，并能成功应用于实际项目。 JSP-HTML-CSS---PPT

1. JSP动态网页技术

简介

Java Server Pages (JSP) 是一种用于创建动态网页的技术，它允许开发者将Java代码嵌入到HTML页面中。JSP 页面在服务器端被解析成纯Servlet，然后转换成HTML，以便在浏览器中显示。

JSP工作原理

JSP页面通常以 .jsp 扩展名结尾，当用户请求一个JSP页面时，服务器会将这个JSP文件转换成Servlet，并编译执行。这个过程包括几个阶段：翻译、编译、加载和执行。

翻译

当第一次访问JSP页面时，服务器会将JSP文件翻译成一个Servlet源文件(.java)。

编译

接着，编译器将源文件编译成.class文件，即Java字节码。

加载和执行

最后，JSP引擎加载并执行这个类文件，生成的HTML内容被发送到客户端的浏览器。

核心概念

JSP页面主要包含以下核心元素：

JSP指令 ：控制Servlet引擎的行为，如page、include和taglib指令。
JSP脚本元素 ：用于在页面中嵌入Java代码，包括脚本声明、脚本表达式和脚本片段。
JSP标准标签库 （JSTL）：提供一组自定义标签，简化页面中的常见任务，如循环和条件判断。
表达式语言 （EL）：提供了一种简写的方式来访问数据，不必编写完整的Java表达式。

JSP技术结合了Java的强大力量和简单易用的页面语言，使得动态内容的生成变得轻而易举。通过将业务逻辑与页面内容分离，JSP为开发者提供了一种高效的Web应用开发方式。

请注意，虽然JSP在早期Web开发中非常流行，但随着现代框架如Spring MVC的出现，它的使用已经逐渐减少。尽管如此，了解JSP技术对于理解后端开发和维护遗留系统的开发人员仍非常重要。

2. HTML基础语言和结构定义

2.1 HTML的基本元素和语法

2.1.1 HTML文档结构

HTML（HyperText Markup Language）文档结构是构建网页内容的基础，它定义了网页的骨架。一个基础的HTML文档由以下几个部分组成：

<!DOCTYPE html> ：文档类型声明，用于告诉浏览器当前页面所使用的是HTML5标准。
<html> ：根元素，包含整个HTML文档。
<head> ：头部元素，通常包含文档的元数据，例如页面标题、链接到CSS和JavaScript文件、字符编码声明等。
<body> ：主体元素，包含网页可见的页面内容，如段落、图片、链接、列表等。

下面是一个简单的HTML文档结构示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
</body>
</html>

在这个示例中，文档以 <!DOCTYPE html> 开始，表明这是一个HTML5文档。 <html> 元素定义了整个文档的范围， <head> 部分包含了页面的元数据，如 <meta> 声明了字符编码为UTF-8， <title> 指定了网页的标题。 <body> 部分是实际用户在浏览器中看到的内容，包括一个标题 <h1> 和一个段落 <p> 。

2.1.2 标签、属性和文本的使用

HTML标签是构建文档的基础，它们通常成对出现，例如 <p> 和 </p> 分别表示段落的开始和结束。标签可以包含属性，属性提供了额外的信息来控制标签的行为或者格式。文本则是标签之间的内容。

标签的种类非常丰富，用于不同的目的，如 <img> 用于插入图片， <a> 用于创建链接， <table> 用于创建表格等等。每个标签都有其特定的属性，如 <a> 标签有 href 属性用于指定链接的目标URL。

下面是一个使用了文本和属性的HTML示例：

<a href="***">访问示例网站</a>
<img src="image.jpg" alt="示例图片" width="200" height="150">

在这个例子中， <a> 标签定义了一个链接， href 属性指定了链接的目标地址。 <img> 标签用于插入图片， src 属性指定了图片文件的位置， alt 属性提供了图片的文本描述（这对于搜索引擎优化和视觉障碍用户非常重要）， width 和 height 属性则分别定义了图片的宽度和高度。

2.2 HTML5的新增特性

2.2.1 新的语义元素

HTML5引入了许多新的语义元素，这些元素帮助开发者更明确地定义网页的不同部分，提高了代码的可读性和可维护性。这些新元素包括：

<header> ：定义页面或页面中一个区域的头部。
<footer> ：定义页面或页面中一个区域的底部。
<nav> ：定义导航链接的部分。
<article> ：定义文章内容。
<section> ：定义文档中的一个节。
<aside> ：定义与页面其余部分稍有不同的内容，如侧边栏。

下面是一个使用新语义元素的HTML5页面示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
</head>
<body>
    <header>
        <h1>我的博客</h1>
        <nav>
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">文章</a></li>
                <li><a href="#">关于</a></li>
            </ul>
        </nav>
    </header>
    <article>
        <h2>文章标题</h2>
        <p>这里是文章内容...</p>
    </article>
    <footer>
        <p>版权所有 &copy; 2023 我的博客</p>
    </footer>
</body>
</html>

在这个例子中， <header> 标签定义了页面的头部，包含了标题和导航链接。 <nav> 标签用于包裹导航链接列表。 <article> 标签用于标记文章内容，而 <footer> 标签则用于包含页面底部信息。

2.2.2 表单和输入类型

HTML5对表单元素和输入类型做了重要改进，引入了更多的输入类型和属性，使得创建表单更为方便和安全。例如：

<input type="email"> ：用于电子邮件地址的输入。
<input type="date"> ：用于日期的输入。
<input type="number"> ：用于数字的输入。
<input type="search"> ：用于搜索框。
<input type="range"> ：用于滑块选择。
<input type="color"> ：用于颜色选择。

这些新的输入类型增强了HTML表单的功能，同时提高了用户体验。

<form action="/submit" method="post">
    <label for="email">电子邮件:</label>
    <input type="email" id="email" name="email" required>
    <br>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password" required>
    <br>
    <input type="submit" value="提交">
</form>

在这个表单示例中， <form> 标签定义了表单的范围， <label> 标签为每个输入框提供标签， <input> 标签用于创建不同类型的输入字段， type="email" 表示电子邮件输入框。 required 属性确保在提交表单之前必须填写该字段。 <input type="submit"> 表示提交按钮。

以上是第二章中两个子章节的内容，通过细致的分析和代码示例，为读者提供了HTML基本元素和语法的深入理解，并介绍了HTML5的新增特性。接下来，我们将深入探讨第三章的内容，了解CSS样式表语言和布局控制的要点。

3. CSS样式表语言和布局控制

3.1 CSS基础和选择器

3.1.1 样式的声明和应用

Cascading Style Sheets (CSS) 是用于控制网页展示格式的语言。在Web开发中，它与HTML密切协作，负责网页的布局、颜色、字体等视觉表现效果。样式表语言通过声明的方式定义了如何在屏幕上显示HTML元素，其核心概念之一就是CSS选择器。选择器是一种模式，用于选择需要添加样式的HTML元素。

样式可以通过内联、内部和外部三种方式进行声明和应用。内联样式直接在HTML元素中通过style属性定义，例如：

<p style="color: blue; font-size: 16px;">这是一段内联样式的文本。</p>

内部样式则是在HTML文档的 <head> 部分通过 <style> 标签定义，适用于整个页面的样式：

<head>
<style>
  body { background-color: #f8f8f8; }
  p { color: blue; }
</style>
</head>

外部样式是最为推荐的方式，通过链接外部的CSS文件，使得样式与结构分离，提高代码的可维护性和可重用性：

<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>

外部样式表可以通过 @import 语句在CSS文件内部加载其他样式表：

@import url("another-styles.css");

3.1.2 各种选择器的使用方法

CSS选择器分为多种类型，包括基本选择器、组合选择器和伪类选择器等。下面将介绍几种常用的选择器：

元素选择器 ：直接对应HTML标签名，如 p 、 div 等。
类选择器 ：用 . 后跟类名，可以应用于具有特定 class 属性的HTML元素。 css .important { color: red; }
ID选择器 ：用 # 后跟ID名，应用于具有特定 id 属性的HTML元素。 css #mainHeader { background-color: #ddd; }
属性选择器 ：根据HTML属性和属性值选择元素，例如选择具有 href 属性的 a 标签。 css a[href] { color: green; }
伪类选择器 ：用于定义元素的特殊状态，如 :hover 、 :active 、 :focus 等。 css a:hover { color: blue; }

每种选择器都有其特定的使用场景。通过合理地组合使用这些选择器，我们可以精确地控制页面中每个元素的样式。

3.2 CSS布局技术

3.2.1 盒模型概念

CSS布局的基础是盒模型。每个HTML元素都可以视为一个矩形盒子，由内容（content）、内边距（padding）、边框（border）和外边距（margin）组成。理解盒模型对于布局控制至关重要。

内容（content） ：元素的内容区域，文本、图片等。
内边距（padding） ：内容区域与边框之间的空间。
边框（border） ：围绕内边距和内容的线框。
外边距（margin） ：边框外侧的空间，用于在元素之间创建间隔。

默认情况下，CSS会应用一个 box-sizing: content-box ，这意味着宽度和高度只包括内容区域。但有时为了布局的方便，我们可能会将这个模型设置为 box-sizing: border-box ，让宽度和高度包括内容、内边距和边框。

3.2.2 浮动和定位布局技术

CSS提供了多种布局技术，而浮动和定位是最常用的两种。

浮动布局（Floats） ：浮动元素脱离文档流，允许文本和内联元素环绕它。常用于实现文字环绕图片的效果。 css .left { float: left; } 清除浮动是浮动布局中常见的问题，通常使用伪元素或专门的清除浮动类来解决。
定位布局（Positioning） ：通过设置 position 属性（ static 、 relative 、 absolute 、 fixed 、 sticky ），控制元素在页面中的具体位置。 css .positioned { position: absolute; top: 50px; left: 100px; } 定位布局可以实现复杂的页面布局，例如层叠菜单、弹出窗口和固定侧边栏。

在本章节中，我们探讨了CSS的基础概念和布局技术。选择器的使用方法和盒模型的理解对掌握页面布局至关重要。接下来，我们将深入探讨如何利用这些技术进行更复杂的布局设计。

4. JSP结合HTML和CSS实现Web应用

随着网络技术的快速发展，Web应用正变得越来越复杂和功能丰富。JSP（Java Server Pages）作为一种动态网页技术，能够与HTML和CSS紧密集成，从而实现丰富多样的Web界面和用户体验。本章节将深入探讨如何利用JSP来增强Web应用的交互性和功能性，同时结合HTML和CSS来设计和实现美观、易用的Web页面。

4.1 JSP页面与客户端的交互

4.1.1 表单提交和数据处理

Web应用中，用户与页面的交互常常通过表单来完成。JSP能够通过内置对象处理表单提交的数据。例如，当一个用户填写完表单并提交后，JSP可以通过request对象获取这些数据，并进行进一步的处理。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>Form Submission Example</title>
</head>
<body>
    <h2>Sign Up Form</h2>
    <form action="submitForm.jsp" method="post">
        Username: <input type="text" name="username" /><br/>
        Email: <input type="email" name="email" /><br/>
        <input type="submit" value="Submit" />
    </form>
</body>
</html>

上述代码展示了一个简单的HTML表单，提交按钮触发后，表单数据被发送到同一目录下的 submitForm.jsp 页面。在JSP页面中，服务器将接收这些数据，并进行处理。

<%@ page import="java.io.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Form Data Handling</title>
</head>
<body>
<%
    String username = request.getParameter("username");
    String email = request.getParameter("email");
    out.println("<h2>User Details</h2>");
    out.println("<p>Username: " + username + "</p>");
    out.println("<p>Email: " + email + "</p>");
%>
</body>
</html>

4.1.2 数据验证和反馈展示

处理用户提交的数据之前，通常需要进行验证以确保数据的有效性和安全性。JSP提供了一个内置对象—— request ，可以用来获取客户端提交的数据。此外，可以通过条件语句进行数据验证。

<%
    // Assuming 'username' and 'email' are obtained from a form as shown above
    String username = request.getParameter("username");
    String email = request.getParameter("email");

    if (username == null || username.trim().isEmpty()) {
        out.println("<p style='color:red;'>Username is required.</p>");
    }
    if (email == null || !email.contains("@")) {
        out.println("<p style='color:red;'>Invalid email address.</p>");
    }
%>

以上示例代码演示了如何验证用户名和电子邮件地址。如果数据不符合要求，页面将显示红色的错误信息。

4.2 实现动态内容的Web页面

4.2.1 JSP标签库的使用

JSP标准标签库（JSTL）为JSP页面提供了一套标准的标签，用于简化JSP页面的编写。例如，使用JSTL可以更方便地遍历数据集合。

<%@ taglib prefix="c" uri="***" %>
<html>
<head>
    <title>List Example</title>
</head>
<body>
    <h2>Available Products</h2>
    <table border="1">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Price</th>
        </tr>
        <c:forEach var="product" items="${products}">
            <tr>
                <td>${product.id}</td>
                <td>${product.name}</td>
                <td>${product.price}</td>
            </tr>
        </c:forEach>
    </table>
</body>
</html>

上述JSP代码段利用 <c:forEach> 标签遍历一个名为“products”的JavaBean集合，并显示每个产品的信息。

4.2.2 数据库动态内容展示案例

JSP页面通常与数据库交互，以展示动态生成的内容。以下是一个示例，展示如何从数据库中提取数据并在Web页面上显示。

<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Database Content Example</title>
</head>
<body>
    <h2>Database Products</h2>
    <%
        // Database connection parameters (to be configured for your environment)
        String jdbcURL = "jdbc:mysql://localhost:3306/shop";
        String jdbcUsername = "root";
        String jdbcPassword = "password";
        String sql = "SELECT * FROM products";
        Connection connection = null;
        Statement statement = null;
        ResultSet resultSet = null;

        try {
            // Establish connection to the database
            Class.forName("com.mysql.jdbc.Driver");
            connection = DriverManager.getConnection(jdbcURL, jdbcUsername, jdbcPassword);
            statement = connection.createStatement();
            resultSet = statement.executeQuery(sql);

            // Fetch and display data
            while (resultSet.next()) {
                int id = resultSet.getInt("id");
                String name = resultSet.getString("name");
                double price = resultSet.getDouble("price");
                out.println("<p>ID: " + id + ", Name: " + name + ", Price: " + price + "</p>");
            }
        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            // Close the resources
            try {
                if (resultSet != null) resultSet.close();
                if (statement != null) statement.close();
                if (connection != null) connection.close();
            } catch (SQLException se) {
                se.printStackTrace();
            }
        }
    %>
</body>
</html>

在这个例子中，JSP页面通过JDBC连接数据库，并执行SQL查询，然后遍历结果集，将数据库中的产品信息输出到页面上。务必注意数据库连接的关闭操作以避免资源泄漏。

5. Servlets在JSP中的协作使用

5.1 Servlet技术基础

5.1.1 Servlet生命周期和处理流程

Servlet是一种在服务器端运行的Java程序，它响应客户端的请求，并返回响应数据。Servlet的生命周期包括初始化、服务和销毁三个阶段。

初始化阶段 ：当Servlet第一次被请求加载时，Servlet容器调用 init() 方法来初始化Servlet实例。在 init() 方法中，开发者可以进行一些初始化操作，例如加载资源或建立数据库连接等。
服务阶段 ：Servlet处理客户端请求的主要阶段。每当客户端发出请求时，Servlet容器都会调用 service() 方法。实际上 service() 方法会根据不同的请求类型（GET、POST等），自动调用 doGet() 、 doPost() 等相应的方法。
销毁阶段 ：当Servlet容器决定卸载Servlet时，会调用 destroy() 方法。在这个方法中，开发者应该进行资源清理工作，比如关闭数据库连接等。

代码示例：

public class MyServlet extends HttpServlet {
    public void init() throws ServletException {
        // 初始化代码
        System.out.println("Servlet初始化");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 处理GET请求
        response.setContentType("text/html");
        PrintWriter out = response.getWriter();
        out.println("<h1>Hello World!</h1>");
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // 处理POST请求
        // 同doGet()类似
    }

    public void destroy() {
        // 清理资源代码
        System.out.println("Servlet销毁");
    }
}

5.1.2 Servlet与JSP的整合模式

Servlet与JSP常常被结合起来使用，Servlet负责业务逻辑处理，而JSP专注于视图展示。这种模式能有效分离关注点，提高代码的可维护性。

Model-View-Controller (MVC) ：这是Servlet与JSP整合的一个常见模式。在MVC模式中，Servlet充当控制器（Controller）的角色，负责接收用户请求，并根据请求信息调用相应的模型（Model）处理业务逻辑。处理完毕后，控制器将数据传递给视图（View，即JSP页面），由视图负责渲染最终的HTML内容返回给用户。
数据共享与通信 ：在Servlet中处理的业务逻辑完成后，通常会将数据存储在请求（ HttpServletRequest ）对象中，这样数据就可以在JSP页面中通过表达式语言（EL）或JSP标签（如 <jsp:getProperty> ）进行访问。

5.2 Servlet在Web应用中的高级应用

5.2.1 处理HTTP请求和响应

Servlet提供了丰富的API来处理HTTP请求和响应。开发者可以通过请求对象获取HTTP请求头、参数、请求体等信息，也可以通过响应对象来设置HTTP响应头和发送内容。

获取请求信息 ：可以通过 HttpServletRequest 对象获取客户端发送的信息，例如查询参数（ request.getParameter() ）、请求头（ request.getHeader() ）等。
设置响应内容 ：通过 HttpServletResponse 对象，开发者可以设置响应状态码（ response.setStatus() ）、添加响应头（ response.setHeader() ）、输出响应内容（ response.getWriter().write() ）等。

代码示例：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    // 获取请求参数
    String name = request.getParameter("name");
    // 设置响应内容类型
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    // 输出响应内容
    out.println("<html><body>");
    out.println("<h1>Hello, " + name + "!</h1>");
    out.println("</body></html>");
}

5.2.2 Session和Cookie的管理

Servlet提供了对会话跟踪的支持，主要通过 HttpSession 对象实现。开发者可以在Servlet中创建、访问和管理用户会话。

创建和使用Session ：在 doGet 或 doPost 方法中，可以通过调用 request.getSession() 来创建或获取一个 HttpSession 对象。通过该对象，开发者可以存取会话范围内的数据。
Cookie操作 ：Servlet API也支持对Cookie的操作。开发者可以读取客户端发送的Cookie信息，也可以创建Cookie并将其返回给客户端。

代码示例：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    HttpSession session = request.getSession();
    // 检查是否为新会话
    if (session.isNew()) {
        response.getWriter().println("欢迎您首次访问网站！");
    } else {
        response.getWriter().println("欢迎回来，您的上次访问时间是：" + session.getLastAccessedTime());
    }

    // 设置会话属性
    session.setAttribute("username", "exampleUser");

    // 创建Cookie并返回给客户端
    Cookie cookie = new Cookie("visited", "true");
    response.addCookie(cookie);
}

通过以上实例，我们可以看到Servlet在处理Web请求时的灵活性和强大功能，而与JSP的整合更使得Web应用的功能实现和展现层分离成为可能。

本文还有配套的精品资源，点击获取