java_web编程技术速通

HTML基本概念

静态网页：大部分内容固定，无法根据使用者的意愿改变内容的展示

动态网页：网页内容可跟随时间、环境或数据库操作而发生改变

HTTP：超文本传输协议

HTML：超文件标记语言

HTML文件大体框架

<html lang="cn">
<head>
    <meta charset="UTF-8">
    <title>This is a html!</title>
</head>   
<body>
    Hello, World!!!
</body>
</html>

头部标记

用于设置标题，引入外部资源，设置网页元信息等

位于 <head> 标记中

定义网页标签标题：

1	`<title>This is a html!</title>`

定义网页标签图片：

1	`<link rel="icon" href="./<图片资源名>">`

引入外部 css 文件：

1	`<link href="./xxx.css" rel="stylesheet" type="text/css">`

定义网页元数据：

<!-- 设置字符集为 UTF-8 -->
<meta charset="UTF-8">
<!-- 设置搜索引擎爬取关键字 -->
<meta name="keywords" content="HTML,CSS,Javascript教程">
<!-- 指定每2秒时间自动刷新网页 -->
<meta http-equiv="refresh" content="2">
<!-- 指定3秒时间后跳转新网页 -->
<meta http-equiv="refresh" content="3 ;URL=http://www.baidu.com">

主体

定义网页主要展示的内容

位于 <body> 标记中

设置正文颜色和背景颜色或背景图片：

<!-- 设置背景颜色为红色，文字为黑色 -->
<body bgcolor="red" text="black"></body>
<!-- 设置背景图片 -->
<body background="./<你的图片路径>"></body>

超链接：

<a href="http://www.baidu.com">百度链接</a>
<!-- 设置正在点击的超链接的颜色为红色，已经访问过的为绿色 -->
<body alink="red" vlink="green"></body>
<!-- 使用_blank打开新网页跳转，使用_self覆盖现在的网页 -->
<a href="http://www.baidu.com" target="_blank">百度链接</a>
<!-- 书签链接 -->
<a href="#top1">跳到第一章</a>
<a href="#top2">跳到第二章</a>

<a name="top1">第一章</a>
<a name="top2">第二章</a>

设置边距：

1 2	`<!-- 与上方距离38px，与左边距离52px --> <body leftmargin="52px" topmargin="38px" rightmargin="" bottommargin=""></body>`

特殊文字：

&nbsp; <!-- 空格 -->
&lt; <!-- < -->
&gt; <!-- > -->
&amp; <!-- & -->

设置文字格式：

<!-- 设置字体为宋体，字号为22px，颜色为红色 -->
<font face="宋体" size="22px" color="red">文字</font>
<!-- 定义粗体文字 -->
<b>粗体文字</b>
<!-- 倾斜文字 -->
<i>倾斜文字</i>
<!-- 下标字 -->
H<sub>2</sub>O
<!-- 上标字 -->
X<sup>y</sup>
<!-- 1级标题且居中对齐，数字越小字号越大 -->
<h1 align="center">
    一级标题
</h1>
<!-- 表示一段文字 -->
<p>
    一段文字
</p>
<!-- 换行标记 -->
<br />
<!-- 居中标记 -->
<center> 居中 </center>
<!-- 水平线标记 -->
<hr>
<!-- 滚动文字 -->
<marquee>滚动文字</marquee>

列表：

<!-- 有序列表，罗马数字顺序 -->
<ol type="i">
    <li>ONE</li>
    <li>TWO</li>
</ol>
<!-- 无序列表，矩阵样式 -->
<ul type="square">
    <li>ONE</li>
    <li>TWO</li>
</ul>

图片标记：

<!-- 宽度40px，高度60px
	 对齐方式可选aling="top/bottom/middle/left/right"
	 特别说明 middle 是图片的中间线与周围对象底端对齐
-->
<img src="./<图片名>" width="40px" height="60px">
<!-- 图片与周围对象间隔上下距离30px，水平距离40px -->
<img src="./<图片名>" vspace="30px" hspace="40px">

表格：

<!-- 
	<table> 定义一个表格
	border 定义表格线宽度
	bordercolor 定义表格线颜色
	width 定义宽度
	height 定义高度
	bgcolor 定义背景颜色
	align 定义对齐方式
    <table> 定义表格中的一行
	width 定义宽度
	height 定义高度
	align 定义表格中的文字对齐方式
-->
<table>
    <caption>表格标题</caption>
    <tr>
    	<th>文具</th>
        <th>数量</th>
        <th>价格</th>
    </tr>
    <tr>
    	<td>铅笔</td>
        <td>2</td>
        <td>5</td>
    </tr>
        <tr>
    	<td>钢笔</td>
        <td>5</td>
        <td>9</td>
    </tr>
    <tr>
    	<td>总价格</td>
        <!-- 跨2列展示,使用rowspan跨行 -->
        <td colspan="2">10.0</td>
    </tr>
</table>

表单：

<!-- action设置提交地址 -->
<from action="<目标地址>">
    <!-- 文本框，name用于为后端传值 -->
	账号：<input type="text" name="username"><br>
    <!-- 密码框 -->
    密码：<input type="password" name="userpassword"><br>
    <!-- 多选框，checked用于表示是否默认选择 -->
    爱好: <input type="checkbox" value="football" name="hobby" checked="checked"> 足球
    <input type="checkbox" value="game" name="hobby"> 打游戏
    <input type="checkbox" value="play" name="hobby"> 玩<br>
    <!-- 单选框，name可以控制多个单选为一组 -->
	性别：<input type="radio" value="man" name="gender">男 &nbsp; 
    <input type="radio" value="woman" name="gender">女
    <!-- 下拉列表框，无multiple和size则会变成默认下拉列表，有则表示一次显示多个选项并可多选 -->
    <select name="学历" size="3" multiple="multiple">
        <option value="本科">本科</option>
        <option value="研究生">研究生</option>
        <option value="博士生">博士生</option>
    </select>
    <!-- 文本框 -->
    <textarea cols="5" rows="3"></textarea>
    <!--  提交和重置 -->
    <input type="submit" value="提交"> &nbsp; <input type="reset" value="重置">
</from>

CSS基本概念

层叠样式表，用于快速控制页面的展示风格，也提供更高级的图形增强

选择器：

<html>
<head>
    <style>
        /* 标签选择器 */
        /* 将所有的 p 标签附加上文字 red 属性*/
        p {
            color: red;
        }
        /* ID 选择器 */
        /* 将所有 id 为 one 的标签加上文字 green 属性 */
        #one {
            color: green;
        }
        /* 类选择器 */
        /* 将所有 class 为 two 的标签加上文字 yellow 属性 */
        .two {
            color: yellow;
        }
        /* 属性选择器 */
        /* 将所有 a 标签且有 href 属性的才加上文字 pink 属性 */
        a[href] {
            color: pink;
        }
        /* 具体选择器 */
        /* 将所有 a 标签且有 href="www.bilibili.com"的才加上文字 purple 属性 */
        a[href="www.bilibili.com"] {
            color: purple;
        } 
        /* 派生选择器 */
        /* 处于 p 标签下的 a 标签才生效 */
        font a {
            color: Blue;
        }
    </style>
</head>
<body>
    <p>这是红色</p>
    <h1 id="one">这是绿色</h1>
    <h1 calss="two">这是黄色</h1>
    <a href="www.baidu.com">这是粉色</a>
    <a href="www.bilibili.com">这是紫色</a>
    <a>这是默认颜色</a></br>
    <font><a>这是蓝色</a></font>
</body>
</html>

CSS常用属性

font-family /* 字体类型 */
font-size /* 字号 */
font-style /* 字体风格 斜体、倾斜等 */
font-weight /* 粗细程度 加粗、更粗、更细 */

text-align /* 对齐方式 */
text-decoration /* 删除线等特殊线 */
letter-spacing /* 线的粗细 */

list-style-type /* 列表样式类型 */

background-color /* 背景颜色 */
background-image /* 背景图片 */
background-repeat /* 背景图片覆盖方式 */

CSS的引用方式

内联方式：

1	`<div style="background: red"></div>`

嵌入方式：

<head>
    <style>
        .content {
            background: red;
        }
    </style>
</head>

外部引用：

1
2
3

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

JavaScript基础

用于控制网页内容，给网页增加动态效果

输出：

window.alert(); // 弹出警告框
document.write(); // 将内容写到HTML页面中
document.getElementById() // 从对应id标签中获得内容
innerHTML // 写入到HTML原始标签中
console.log(); // 写入到浏览器的控制台

变量：

// 由字母、数字、下划线、$符号组成，区分大小写
var x = 7;
var y = "abc";

// 常量
const PI = 3.14;

// null表示定义但是没有赋值的变量，undefined表示没有定义的

// 对象
var person={
    name : "abc",
    id : "001"
};

// 数组
var words=new Array("a","b","c");

// 函数
var sum = fun(5, 4);

function fun(a, b) {
    return a + b;
}

三种引用方式：

普通方式：

<html>
<head></head>
<body></body>
<script>
	var a = 1;   
</script>
</html>

外部引用：

1	`<script type="text/javascript" src="<文件名>.js"></script>`

内联方式：

1 2	`<button onclick="javascript:alert('hello')">按钮</button> <a href="javascript:alert('aa');alert('bb')">点击</a>`

事件处理：

常用事件

单击事件：onclick。用户单击鼠标按钮式产生的事件。
改变事件：onchange。当text中的元素字符值被改变时发生该事件。
选中事件：onselect。当text或对象中的文字被选中时会发生该事件
获得焦点事件：onfocus。
失去焦点事件：onblur。
鼠标覆盖事件：onmouseover。当鼠标移动到目标上方。
鼠标离开事件：onmouseout。当鼠标离开目标上方。
一般事件：
ondbclick：鼠标双击事件
onkeypress：当键盘上某个键被按下且释放触发事件
onkeydown：当键盘上某个键被按下就触发事件
onkeyup：当键盘上某个键被放开时触发的事件

与JavaScript联动使用：

<body>
    <input type="text" onchange="fun1()">
</body>
<script>
	function fun1() {
		alert("我改变了");
    }
</script>

JavaScript与表单联动使用：

<body>
    <form>
        <input type="text" id="acount"><br>
        <input type="password" id="pwd"><br>
        <input type="submit" onclick="fun1()">
    </form>
</body>
<script>
	function fun1() {
        var acount = document.getElementById("acount").value();
        var password = document.getElementById("pwd").valude();
        alert('acount: ' + acount + '\n' + 'password: ' + password);
    }
</script>

Servlet基础

Servlet 是一个运行在 Web 服务器或应用服务器上的 java 程序，作为后端提供更高级的用户请求处理。

HttpServlet 是我们写 Servlet 代码创建类是需要继承的父类。

例：

index.html：

<html>
<head>
	<meta charset="UTF-8">
    <title>test!</title>
</head>
<body>
    <form action="/getParameted" method="post">
        <input type="text" name="id">
        <input type="text" name="name">
        <input type="submit" value="提交">
    </form>
</body>
</html>

java/com/test/TestServlet.java：

package com.test;

import javax.servlet.http.HttpServlet;

@WebServlet(name="TestServlet", urlPatterns= {"/getParameter"}, initParams = {@WebInitParam(name="age", value="999")}) // 注解注册服务，相当于在xml注册
public class TestServlet extends HttpServlet {
    @Override
    public void init(ServletConfig config) {
        String age = config.getInitParameter("age"); // 获得xml中的初始化数据
    }
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
        //resp.setHeader("refresh", "3"); // 浏览器页面设置为3秒刷新一次
        resp.sendRedirect("https://www.baidu.com"); // 浏览器重定向
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
        // 提取数据
        System.out.println(req.getMethod());
        System.out.println(req.getRequestURI());
        System.out.println(req.getContextPath());
        
        // 遍历所有的请求信息
        Enumeration<String> headerNames = req.getHeaderNames();
        while(headerNames.hasMoreElements()) {
            String k = headerNames.nextElement();
            System.out.println("key: " + k);
            System.out.println("value: " + req.getHeader(k));
        }
        
        String id = req.getParameter("id"); // 获得id
        String name = req.getParameter("name"); // 获得name
            
        // 返回数据
        // 返回收到的表单
        resp.setContentType("text/html;charset=uft8");
        String str = "收到id：" + id + "<br>" + "name：" + name;
        
        resp.getWriter().write(str);
    }
}

java/com/test/TestServlet2.java：

package com.test;

import javax.servlet.http.HttpServlet2;

@WebServlet(name="TestServlet2", urlPatterns= {"/getParameter2"}) // 注解注册服务，相当于在xml注册
public class TestServlet2 extends HttpServlet {   
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
        ServletContext servletContext = this.getServletContext();
        String name = (String)servletContext.getAttribute("name").value(); // 获得 abc
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
	    // 请求转发
        System.out.println("TestServlet2 --> TestServlet3");
        req.getRequestDispatcher("/getParameter3").forward(req, resp);
    }
}

java/com/test/TestServlet3.java：

package com.test;

import javax.servlet.http.HttpServlet2;

@WebServlet(name="TestServlet3", urlPatterns= {"/getParameter3"}) // 注解注册服务，相当于在xml注册
public class TestServlet3 extends HttpServlet {   
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) {
    	// 设置 Servlet 上下文
        ServletContext servletContext = this.getServletContext();
        servletcontext.setAttribute("name", "abc");
    }
    
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) {
		// 接收转发
        System.out.println("--> TestServlet3");
        System.out.println("name："+req.getAttribute("name"));
    }
}

webapp/WEB-INF/web.xml：

<web-app>
	<servlet>
    	<servlet-name>TestServlet</servlet-name>
        <servlet-class>com.test.TestServlet</servlet-class>
    </servlet>
    <init-param>
    	<param-name>age</param-name>
        <param-value>999</param-value>
    </init-param>
    <context-param>
    <param-name>name</param-name>
    <param-value>abc</param-value>
    </context-param>
    <servlet-mapping>
    	<servlet-name>TestServlet</servlet-name>
        <url-pattern>/getParameter</url-pattern>
    </servlet-mapping>
</web-app>

JSP

JSP 有点类似于 Servlet ，但是 Servlet 需要事先编译，而 JSP 则是于正常网页文件结合在一起，在被请求时进行临时编译生成变化的实时页面，整个过程在后端完整。

脚本标签：

1	`<% out.print("Hello"); %>`

表达式标签：

1	`<%= "Hello World!" %>`

声明标签：

1	`<%! int a = 10; %>`

简单框架：

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
	<% out.print("Hello world!!!"); %>
</body>
</html>

使用JSP获得提交

index.html：

<html>
<head>
    <meta charset="UTF-8">
    <title>Hello world</title>
</head>
<body>
	<from action="welcome.jsp">
    	<input type="text" name="uname">
        <input type="submit" value="go">
    </from>
</body>
</html>

welcome.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
	<% 
    	String name = request.getParameter("uname");
    	out.print("welcome" + name);
    %>
</body>
</html>

直接输出框中的内容到网页上：

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<%= "Hello World!" %>
</body>
</html>

声明变量：

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<%! int data = 50; %>
<%= "Value of the variable is:" + data %>
</body>
</html>

定义函数：

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<%! 
int cube(int n) {
return n*n*n;
}    
%>
<%= "Cube of 3 is:" + cube(3) %>
</body>
</html>

JSP隐藏对象（已经完成定义）：

Object	Type	Object	Type
out	JspWriter	session	HttpSession
request	HttpServletRequest	pageContext	PageContext
response	HttpServletResponse	page	Object
config	ServletConfig	exception	Throwable
application	ServletContext

JSP请求重定向

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<%
    resopnse.sendRedirect("http://www.baidu.com");
%>
</body>
</html>

设置全局配置

与 Servlet 方式几乎一模一样，感觉 JSP 这类东西就是历史遗留问题。

使用 session 存储信息：

welcome.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<%
    String name = request.getParameter("uname");
    session.setAttribute("user", name);
%>
    <a href="second.jsp">jmp</a>
</body>
</html>

second.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>
<%
    String name = (String) session.getAttribute("user");
    out.print("Hello" + name);
%>
</body>
</html>

页面指令：

1	`<%@ page attribute="value" %>`

用 import 属性可以引入 java 库

包含指令：

1	`<%@ include file="resourceName" %>`

可以包含 html 文件到当前位置展开

标签库指令：

1	`<%@ taglib uri="uriofthetaglibary" prefix="prefoxpftaglibary" %>`

JSP 操作标签：

JSP Action Tags	Description
jsp:forward	将请求和响应转发到另一个资源
jsp:include	包括另一个资源
jsp:useBean	创建或定位 bean 对象
jsp:setProperty	设置 bean 对象中的属性值
jsp:getProperty	打印 bean 的属性值

JDBC

简单框架：

Demo1.java：

import java.sql.Connection;

public class Demo1 {
    public static void main(String[] args) {
        // 加载驱动类
        Class.forName("com.mysql.cj.jdbc.Driver"); 
        
        // 建立连接对象
        Connection con = DriverManager.getConnection("jdbc:mysql://127.0.0.1:3306/testdb", "name", "passwd"); 
        
        // 建立通讯过程对象
        Statement stmt = con.createStatement();
        
        // 执行语句
        ResultSet rs = stmt.executeQuery("select * from employee"); // 查询
        while(rs.next) {
            System.out.println(rs.getInt(1) + " " + rs.getString(2));
        }
        
        String sql = "INSERT INTO employee (name, age, salary) VALUES ('张三', 25, 8000)";
        int rows = stmt.executeUpdate(sql); // 增加
        System.out.println("成功插入 " + rows + " 条记录");
        
        String sql = "DELETE FROM employee WHERE id = 1001";
        int rows = stmt.executeUpdate(sql); // 删除
        System.out.println("成功删除 " + rows + " 条记录");
        
        String sql = "UPDATE employee SET salary = 9000 WHERE name = '张三'";
        int rows = stmt.executeUpdate(sql); // 修改
        System.out.println("成功修改 " + rows + " 条记录");
        
        // 关闭连接
        con.close();
    }
}

java_web编程技术速通

https://zlsf-zl.github.io/2026/07/02/java-web编程技术速通/

作者

ZLSF

发布于

2026年7月2日

许可协议

漏洞复现_CVE-2024-23113_Fortigate 下一篇