Javaweb考前复习冲刺(不断更新版）

Javaweb考前复习冲刺

第一章： JavaWeb 入门

JavaWeb是指：以Java作为后台语言的项目工程。

javaweb项目创建的过程：

  1. 首先集成Tomcat服务器环境
  2. 新建dynamic web project
  3. 部署工程
  4. 运行

路由含义：

​ http://localhost:8080/工程项目名/(文件夹)/页面名。

<%=application.getRealPath("") %>  工程部署路径
# D:\java_exerise\.metadata\.plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps\component\

第二章 静态网页设计：

​ 一个网页是动态网页还是静态网页就是否还有 前端三件套(HTML、CSS、Javascript）之外的内容。

​ 动态网页是指网页中有需要服务器执行的元素，文件扩展名是jsp，动态页面中除了上述静态元素外，还包括服务器端脚本代码（Java）、指令、动作标签，表达式语言等。

动态网页中 静态成分和动态成分的执行顺序：

<%@ page pageEncoding="UTF-8" import="java.util.Date" %>
<html>
<body>
<script>
document.write(new Date());
</script>
<br/>
<%
out.print(new Date());
%>
</body>
</html>

Sun Dec 17 2023 12:43:16 GMT+0800 (中国标准时间)
Sun Dec 17 12:43:15 CST 2023

网页会先执行java代码，再执行js代码。我们可以理解为out.print(new Date()); 属于后台代码，只不过我们的服务器本地而已。

HTML：

网页的基本框架是由一个个标签组成的，标签又分为块级标签和行内标签。

块级标签：

  • 块级标签以新行开始，占据一整行的宽度，不与其他元素并排显示。

  • 常见的块级标签有 <div>、<p>、<h1> - <h6>、<ul>、<ol>、<li>、<table> 等。

行内标签：

  • 内标签不会独占一行，与其他元素并排显示，根据内容的大小自动调整宽度
  • 常见的行内标签有 <span>、<a>、<strong>、<em>、<img>、<input>、<label> 等
列表：

有序列表：

<ol type="序号类型"><li>……</li><li>……</li>
</ol>

无序列表：

<ul type="类型样式"><li>…….</li><li>……</li>
</ul>

定义列表：】

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以

标签开始。每个自定义列表项以 开始。每个自定义列表项的定义以
开始。 

<dl><dt>名词1</dt><dd>解释1</dd><dt>名词2</dt><dd>解释2</dd>
</dl>

<dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd>
</dl>

在这里插入图片描述

表格：

  • 表格的标题使用了 <thead> 元素，表格的主体数据使用了 <tbody> 元素。

  • <tfoot>：用于定义表格的页脚部分。页脚位于表格主体之后，可以包含汇总信息等内容。

  • <caption>：用于为整个表格添加标题，位于表格的上方。一个表格只能有一个 <caption> 元素。

<table><caption>这是表格标题</caption><thead><tr><th>列标题1</th><th>列标题2</th><th>列标题3</th></tr></thead><tbody><tr><td>行1，列1</td><td>行1，列2</td><td>行1，列3</td></tr><tr><td>行2，列1</td><td>行2，列2</td><td>行2，列3</td></tr></tbody><tfoot><tr><td colspan="3">这是表格页脚</td></tr></tfoot>
</table>
表单元素：

文本输入框:

  //  placeholder 设置提示词 
文本框：<input type="text" placeholder="请输入用户名">

密码框：

  密码框：<input type="password">密码框：<input type="password" placeholder="请输入密码">

上传文件：

 上传文件：<input type="file">
//上传多个文件 
上传文件：<input type="file" multiple>

单选框：

  // 只有radio的时候，无法实现多选，设置name后可以实现单选 一组只能选择一个 //checked 默认选中的 
<input type="radio" name="gender"> 男
<input type="radio" name="gender" checked> 女

复选框：

  //多选框 默认选中<input type="checkbox"> 敲代码<input type="checkbox" checked> 敲前端代码<input type="checkbox" checked> 敲前端 HTML 代码下拉框：

//下拉框<select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option><option selected>武汉</option></select>

多行文本输入框：

 //多行文本框
<textarea>请输入评论</textarea>

开发中常使用label和input输入框配套使用，增加用户视觉效果：

<input type="radio" name="gender" id="man"> <label for="man">男</label><label><input type="radio" name="gender"> 女</label>

表单：

<form name="表单名" method="提交方法" action="处理程序">……… 
</form>

<form action="">用户名：<input type="text">密码：<input type="password"><!-- 如果省略 type 属性，功能是 提交 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按钮</button></form>
CSS：

​ CSS是用于对html元素进行修饰美化的，颜色背景字体大小透明度等等。

CSS的三种形式：

  <style>/* 定义 */.red {color: red;}
</style>
<div style="color: green; font-size: 30px;">这是 div 标签</div>
<link rel="stylesheet" href="./my.css">

背景：background-image:url('gradient2.png');
文字对齐：text-align:center; //用于设置文字对其 在块元素中 right/left/justify justify每一行的宽度相同vertical-align:center;	 垂直居中文字
块元素居中：margin: auto;（必须要设置宽度后才有效果）.clearfix { 清除浮动的影响overflow: auto;}浮动：float:right; 如果是图片浮动则文字会在其周围环绕clear:both;最后一个元素清除浮动的影响
超链接跳转：<a href="https://www.runoob.com/" target="_blank"> _self _blank 默认是在当前页面跳转
取消超链接下划线：text-decoration:none;text-decoration:overline/line-through/underline  上面/中间/下面
字体大小：font-size:20px; 字体大小
点击：a:link {color:#000000;}      /* 未访问链接*/a:visited {color:#00FF00;}  /* 已访问链接 */a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */a:active {color:#0000FF;}  /* 鼠标点击时 */
边距问题：border:1px solid black;border-collapse:collapse; 边框折叠成一条线border-style:dotted/dotted;	边框演示border-style:dotted solid double dashed;padding:25px 50px 75px; 上（左右）下width: 300pxmargin: 25px;
行内块：display:inline; block块元素
可见：visibility:hidden;
定位：h2{ position:absolute; //绝对定位的位置是相对与最近的父元素（若没有则是相对于html)position:relative;//相对定位元素经常被用来作为绝对定位元素的容器块。position: sticky; //不会改变位置  left:100px;top:150px;}
溢出:(文字内容大于框的大小是否形成滚动条)overflow:visible(呈现在其之外)、scroll（形成滚动条）hidden
Javascript：

JavaScript（通常简称为JS）是一种广泛用于网页开发的脚本语言。它是一种高级、解释性的编程语言，用于为网页添加交互性和动态功能。就是上网页变的可交互起来。

获取元素常用的几个方法：

  • 根据id获取某个元素：document.getElementById(id); （返回对象）
  • 根据name获取元素：document.getElementsByName(name);(返回对象数组）
  • 根据tagName获取元素：document.getElementsByTagName(tagName);(返回对象数组)
函数定义：
 <script>function 函数名(参数列表){函数体(返回值使用return语句)}</script>
获取值：
var inputElement=document.getElementById("card");
var idCard = idCardInput.value;
修改值：
var resultElement=document.getElementById("result");resultElement.textContent='邮费：'+fee+"元";
js操控css：
<button type="button" onclick="myFunction()">点我</button>  绑定响应事件
<script>
function myFunction()
{document.getElementById("demo").innerHTML="Hello JavaScript!";
}
</script> 
document.getElementById("demo").style.color="#ff0000"; 修改css
案例分析：
<script>
function f1(){var a=document.getElementById("t1").value;  //获取t1标签中的值alert("用户在文本框中输入的值为："+a);// 弹出提示框，显示用户输入的值
}
function f2(){var a=document.getElementsByName("sex"); //获取一组标签var sex;for(var i=0;i<a.length;i++){if(a[i].checked){ //如果某个表单元素被选中 则为truealert(a[i].value); //提示框输出break;}}   
}
function f3(){var a=document.getElementsByName("aihao");var aihao="";for(var i=0;i<a.length;i++){if(a[i].checked){//如果某个复选框元素被选中 则为trueaihao+=a[i].value+" "; //拼接}}   if(aihao==''){alert("无爱好");}else{alert("爱好："+aihao);} 
}
function f4(){//下拉框 下拉框无法进行点选 只能滑动 显示最上面的是哪一个var a=document.getElementById("jiguan");var selectedIndex=a.selectedIndex;//获取是当前是第几个 alert(a.options[selectedIndex].value); //获取响应的值
}
</script>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="t1" size="10"/>
<input type="button" id="bt1" value="获取文本框的值" onclick="f1();"/>  // 绑定点击响应函数
<hr>
<input type="radio" name="sex" value="男" checked/>男
<input type="radio" name="sex" value="女"/>女
<input type="button" id="bt2" value="获取性别" onclick="f2();"/>
<hr>
<input type="checkbox" name="aihao" value="音乐" />音乐
<input type="checkbox" name="aihao" value="画画"/>画画
<input type="checkbox" name="aihao" value="下棋"/>下棋
<input type="button" id="bt3" value="获取爱好" onclick="f3();"/>
<hr>
<select id="jiguan">
<option value="山东">山东</option>
<option value="北京">北京</option>
<option value="广东">广东</option>
</select>
<input type="button" id="bt4" value="获取籍贯" onclick="f4();"/>
</body>
</html>
Jquery：

​ jQuery 是一个广泛使用的 JavaScript 库，它简化了 JavaScript 在网页开发中的操作和处理。jQuery 提供了一组易于使用的函数和方法，使开发者能够更简洁、高效地操作 HTML 元素、处理事件、发送 AJAX 请求等。

引入：
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>

<%@ page  pageEncoding="UTF-8"%>
<html><head> <script src="js/jquery-1.11.1.js"></script>  <script>$(function(){$("p").click(function(){$(this).hide();});});
</script></head>  <body><p>如果你点我，我就会消失。</p></body>
</html>
页面加载
    window.onload=function(){} //原始js写法$(function(){
逻辑代码});//一般使用jquery都将代码放在其中，   $(function(){  })  是让网页全部加载完成后再使用jQuery。

下面是 jQuery 中一些常见操作的简洁示例：

jQuery选择器：
// 通过元素标签名选择元素
$('div')
// 通过class属性值选择元素
$('.class-name')
// 通过ID属性值选择元素
$('#element-id')
// 通过其他属性选择元素
$("div[title='div2']")   $("div[title!='div2']")
// 父 与 子孙们关系
$("#d1 span").css("color","red");
//父子关系$("#d1>span").css("color","green");  
//选取紧接在prev元素后的同辈next元素
$("#d1+div").css("color","blue")
//选取所有在prev元素后的同辈siblings元素
$("#d1~div").css("color","gray"); 
//后面两种写法一般不会用到，了解即可。

全(不)选实现:

<%@ page  pageEncoding="UTF-8"%>
<html>
<head> <script src="js/jquery-1.11.1.js"></script>  <script>$(function(){$("#xz").click(function(){$(".c1").prop("checked", this.checked);    //当全选复选框被点击时，通过 $(".c1").prop("checked", this.checked) 将所有记录复选框（类名为 "c1"）的 checked 属性设置为与全选复选框相同的值，从而实现全选或取消全选的功能。});});</script>
</head>  
<body><table border="1"><tr><td><input type="checkbox" id="xz"/></td><td>列标题</td></tr><tr><td><input type="checkbox" class="c1"/></td><td>记录1</td></tr><tr><td><input type="checkbox" class="c1"/></td><td>记录2</td></tr><tr><td><input type="checkbox" class="c1"/></td><td>记录3</td></tr></table>
</body>
</html>

$(".c1").prop("checked", this.checked);  
$(".c1").attr("checked", this.checked)

上面两种方法都可以实现全选或者全不选的效果，区别是：从 jQuery 1.6 版本开始，推荐使用 .prop() 方法来设置元素的属性值而不是 .attr() 方法，因为 .prop() 方法更适用于处理属性值的布尔类型。在处理 checked 属性时，使用 .prop() 方法更为准确和可靠。

Jquery操作dom：
//获取元素的HTML内容var a=$("#div1").html();//获取元素的文本内容。var b=$("#div1").text();//获取表单元素值$("select").val()// 插入节点var div1=$("<div>div1</div>");$("body").append(div1);
发送 AJAX 请求：
$.ajax({url: 'url',method: 'GET',data: {// 请求参数},success: function(response) {// 请求成功后的处理},error: function(error) {// 请求失败后的处理}
})
总结：

​ 通过这一小节的学习，我们发现你去手写一个网页属实不简单，前端知识点确实比较多，网上流传着这样一句话前端堪比娱乐圈，一天一个新框架，不过不需要大家都记住，只需要你能懂，在业务层一般都是使用组件开发，大不必过度担心。

第三章动态网页设计：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/229220.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Leetcode刷题笔记题解（C++）：224. 基本计算器

Leetcode刷题笔记题解（C++）：224. 基本计算器

思路&#xff1a; step 1&#xff1a;使用栈辅助处理优先级&#xff0c;默认符号为加号。 step 2&#xff1a;遍历字符串&#xff0c;遇到数字&#xff0c;则将连续的数字字符部分转化为int型数字。 step 3&#xff1a;遇到左括号&#xff0c;则将括号后的部分送入递归&#x…
阅读更多...
一个简单的光线追踪渲染器

一个简单的光线追踪渲染器

前言 本文参照自raytracing in one weekend教程&#xff0c;地址为&#xff1a;https://raytracing.github.io/books/RayTracingInOneWeekend.html 什么是光线追踪&#xff1f; 光线追踪模拟现实中的成像原理&#xff0c;通过模拟一条条直线在场景内反射折射&#xff0c;最终…
阅读更多...
秋招上岸记录咕咕咕了。

秋招上岸记录咕咕咕了。

思考了一下&#xff0c;感觉并没有单独写这样一篇博客的必要。 能够写出来的&#xff0c;一些可能会对人有帮助的东西都做进了视频里面&#xff0c;未来会在blbl发布&#xff0c;目前剪辑正在施工中&#xff08;&#xff1f;&#xff09; 另外就是&#xff0c;那个视频里面使…
阅读更多...
作为一个的软件测试工程师，想拿到自己想要的薪资，需要具备哪些能力？

作为一个的软件测试工程师，想拿到自己想要的薪资，需要具备哪些能力？

如果只是想成为一名低薪的测试工程师&#xff0c;只要掌握功能测试就可以。 但是如果想成为一名高薪的测试工程师&#xff0c;那就要打造你的不可替代性。 可是&#xff0c;你可能会说&#xff1a;“我现在就是个普通职员啊&#xff0c;我就是个普通人&#xff0c;我目前还没有…
阅读更多...
前端js实现将异步封装成promise然后用async await转同步

前端js实现将异步封装成promise然后用async await转同步

&#xff08;一&#xff09;需求背景&#xff1a; 哈喽 大家好啊&#xff0c;今天遇到一个问题&#xff0c;需要将异步请求转换成同步 &#xff08;二&#xff09;相关代码&#xff1a; function getInfo() {return new Promise((resolve,reject)> {setTimeout(()> {re…
阅读更多...
CSS的基本选择器及高级选择器（附详细示例以及效果图）

CSS的基本选择器及高级选择器（附详细示例以及效果图）

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍HTML中CSS的基础选择及高级选择器&#xff08;详解&#xff09;以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xf…
阅读更多...
JVM学习之运行时数据区

JVM学习之运行时数据区

运行时数据区 概述 内存 内存是非常重要的系统资源&#xff0c;是硬盘和CPU的中间桥梁&#xff0c;承载着操作系统和应用程序的实时运行。JVM内存布局规定了Java在运行过程中内存申请&#xff0c;分配&#xff0c;管理的策略&#xff0c;保证了JVM高效稳定运行。不同的JVM对于…
阅读更多...
STL容器之string（上）

STL容器之string（上）

目录 什么是STL string类 string类常见接口 string类的常见构造函数 string类对象的容器操作 string类对象的访问及遍历操作 string类对象的修改操作 拓展 从本期开始&#xff0c;我们将正式学习C中的STL&#xff0c;美国的麦克阿瑟将军说过&#xff1a;“C不能没有STL就…
阅读更多...
mipi dsi协议DBI/DPI接口

mipi dsi协议DBI/DPI接口

MIPI dsi协议中的DBI/DPI接口主要用于主机和display设备之间的数据传输&#xff0c;说的更通俗一点就是DSI RX控制器和实际的显示面板之间的接口&#xff1b;dsi 协议spec中对DBI/DPI有描述&#xff1a; DSI协议中对DBI 接口模式命名为command mode operation&#xff0c;对DP…
阅读更多...
【物联网】EMQX(二)——docker快速搭建EMQX 和 MQTTX客户端使用

【物联网】EMQX(二)——docker快速搭建EMQX 和 MQTTX客户端使用

一、前言 在上一篇文章中&#xff0c;小编向大家介绍了物联网必然会用到的消息服务器EMQ&#xff0c;相信大家也对EMQ有了一定的了解&#xff0c;那么接下来&#xff0c;小编从这篇文章正式开始展开对EMQ的学习教程&#xff0c;本章节来记录一下如何对EMQ进行安装。 二、使用…
阅读更多...
QT第一步

QT第一步

文章目录 软件下载软件安装QT的程序组新建项目 软件下载 qt下载网址&#xff1a;https://download.qt.io/archive/qt/   关于版本&#xff1a;     我选择的版本是5.14.2&#xff0c;这个版本是最后的二进制安装包的版本&#xff0c;在往后的版本就需要在线安装了。并且5…
阅读更多...
单机架构到分布式架构的演变

单机架构到分布式架构的演变

目录 1.单机架构 2.应用数据分离架构 3.应用服务集群架构 4.读写分离 / 主从分离架构 5.引入缓存 —— 冷热分离架构 6.垂直分库 7.业务拆分 —— 微服务 8.容器化引入——容器编排架构 总结 1.单机架构 初期&#xff0c;我们需要利用我们精干的技术团队&#xff0c;快…
阅读更多...
RocketMQ系统性学习-SpringCloud Alibaba集成RocketMQ以及批量发送消息、消息过滤实战

RocketMQ系统性学习-SpringCloud Alibaba集成RocketMQ以及批量发送消息、消息过滤实战

文章目录 批量发送消息消息过滤 批量发送消息 批量发送消息可以减少网络的 IO 开销&#xff0c;让多个消息通过 1 次网络开销就可以发送&#xff0c;提升数据发送的吞吐量 虽然批量发送消息可以减少网络 IO 开销&#xff0c;但是一次也不能发送太多消息 批量消息直接将多个消…
阅读更多...
C#基础——类、对象和属性

C#基础——类、对象和属性

类&#xff1a;是具有相同属性和行为特征的集合 对象&#xff1a;对象是类的实例化&#xff0c;它具有类定义的所有特征和行为。 类的语法格式&#xff1a; 访问修饰符 class关键字 类名 两种创建类的方式 第一种方式就是在类的下面再创建一个类 第二种方式是在文件中添加一个…
阅读更多...
【员工工资册】————大一期末答辩近满分作业分享

【员工工资册】————大一期末答辩近满分作业分享

前言 大家好吖&#xff0c;欢迎来到 YY 滴项目系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C语言的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; PS&#xff1a;以下内容是部分展示&am…
阅读更多...
springboot升级到3.2导致mybatis-plus启动报错

springboot升级到3.2导致mybatis-plus启动报错

在springboot升级到3.2时&#xff0c;服务启动报错 java.lang.IllegalArgumentException: Invalid value type for attribute ‘factoryBeanObjectType’: java.lang.String&#xff1a; java.lang.IllegalArgumentException: Invalid value type for attribute factoryBeanOb…
阅读更多...
55 代码审计-JAVA项目注入上传搜索或插件挖掘

55 代码审计-JAVA项目注入上传搜索或插件挖掘

目录 必备知识点演示案例:简易Demo段SQL注入及预编译IDEA审计插件FindBugs安装使用Fortify_SCA代码自动审计神器使用Ofcms后台SQL注入-全局搜索关键字Ofcms后台任意文件上传-功能点测试 涉及资源&#xff1a; 我们一般针对java项目&#xff0c;进行漏洞分析的话&#xff0c;主要…
阅读更多...
【计算机视觉--解耦视频分割跟踪任何物体】

【计算机视觉--解耦视频分割跟踪任何物体】

UIUC&Adobe开源|无需监督&#xff0c;使用解耦视频分割跟踪任何物体&#xff01;视频分割的训练数据往往昂贵且需要大量的标注工作。这限制了将端到端算法扩展到新的视频分割任务&#xff0c;特别是在大词汇量的情况下。为了在不为每个个别任务训练视频数据的情况下实现“跟…
阅读更多...
HPM6750系列--第九篇 GPIO详解（中断操作）

HPM6750系列--第九篇 GPIO详解（中断操作）

一、目的 在上篇中《HPM6750系列--第九篇 GPIO详解&#xff08;基本操作&#xff09;》我们讲解了GPIO的基本操作&#xff0c;本篇继续讲解GPIO的中断处理。 二、介绍 将一个引脚设置为中断涉及到以下几个步骤&#xff08;此处我们以PZ02举例&#xff09;&#xff1a; 1.设置IO…
阅读更多...
全球汽车行业的数字化转型：产品和后端的渐进之旅

全球汽车行业的数字化转型：产品和后端的渐进之旅

如何管理汽车行业的数字化转型?在我们本篇文章中了解更多有关如何设定长期目标的信息。 正在改变汽车行业的26个数字化主题 最近一篇关于汽车行业数字化转型的论文确定了26个数字技术主题&#xff08;论文详情请点击阅读原文&#xff09;&#xff0c;分为三个主要集群: 1)驾驶…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023