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: 300px
    margin: 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){ //如果某个表单元素被选中 则为true
            alert(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){//如果某个复选框元素被选中 则为true
            aihao+=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.mfbz.cn/a/252893.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

[NCTF2019]Fake XML cookbook1

[NCTF2019]Fake XML cookbook1

提示 xml注入 一般遇到像登录页之类的就因该想到sql注入、弱口令或者xml等 随便输入抓包 这里明显就是xml注入 这里我们来简单了解一下xml注入 这里是普通的xml注入 xml注入其实和sql注入类似&#xff0c;利用了xml的解析机制如果系统没有将‘<’‘>’进行转义&#xff0…
阅读更多...
Autosar CAN报文周期抖动可能的原因分析+解决方法（总结）

Autosar CAN报文周期抖动可能的原因分析+解决方法（总结）

一、背景 在Autosar项目中我们经常会遇到各种CAN报文在CANOE上抓取的图形周期抖动，因此需要通过一些可能的原因分析解决报文周期不准的问题。 那么下面就我根据实际项目中遇到的一些可能的原因做一些总结（后续持续完善）。 二、可能的原因及解决方案 1、可能原因：CPU idl…
阅读更多...
《ThreadLocal使用与学习总结：2023-12-15》由浅入深全面解析ThreadLocal

《ThreadLocal使用与学习总结：2023-12-15》由浅入深全面解析ThreadLocal

由浅入深全面解析ThreadLocal 目录 由浅入深全面解析ThreadLocal简介基本使用ThreadLocal与synchronized的区别ThreadLocal现在的设计&#xff08;JDK1.8&#xff09;ThreadLocal核心方法源码分析ThreadLocalMap源码分析弱引用与内存泄露&#xff08;内存泄漏和弱引用没有直接关…
阅读更多...
python排序算法 直接插入排序法和折半插入排序法

python排序算法 直接插入排序法和折半插入排序法

最近需要使用到一些排序算法&#xff0c;今天主要使针对直接插入排序和折半插入排序进行讲解。 首先是直接插入排序&#xff0c;其排序过程主要是&#xff0c;针对A[a1,a2,a3,a4,a5....an]&#xff0c;从排序的序列头部起始位置开始&#xff0c;将其也就是a1视为只有一个元素的…
阅读更多...
Android编译优化之Jetifier优化

Android编译优化之Jetifier优化

本文字数&#xff1a;9048字 预计阅读时间&#xff1a;40分钟 在狐友项目的编译优化中&#xff0c;我们发现在 BuildAnalyzer 中有明确的 Warnings 提示&#xff0c;告知项目可以进行 Jetifier 优化。 Jetifier 是之前项目进行 AndroidX 迁移时引入的插件&#xff0c;它能辅助迁…
阅读更多...
Azure Machine Learning - 提示工程简介

Azure Machine Learning - 提示工程简介

OpenAI的GPT-3、GPT-3.5和GPT-4模型基于用户输入的文本提示工作。有效的提示构造是使用这些模型的关键技能&#xff0c;涉及到配置模型权重以执行特定任务。这不仅是技术操作&#xff0c;更像是一种艺术&#xff0c;需要经验和直觉。本文旨在介绍适用于所有GPT模型的提示概念和…
阅读更多...
diffuser为pipeline设置不用的scheduler

diffuser为pipeline设置不用的scheduler

查看默认的schedulers&#xff1a; 使用默认的schedulers生成数据 查看默认scheduler的默认配置&#xff0c;定义了采样器中的相关参数&#xff0c;网上关于DDPM和DDIM的文章较多&#xff0c;可以先去看看这两种schedulers&#xff1a; 修改scheduler&#xff0c;可以用于…
阅读更多...
13.二进制枚举练习题

13.二进制枚举练习题

文章目录 二进制枚举练习题[78. 子集](https://leetcode.cn/problems/subsets/)[77. 组合](https://leetcode.cn/problems/combinations/)[1286. 字母组合迭代器](https://leetcode.cn/problems/iterator-for-combination/)[2397. 被列覆盖的最多行数](https://leetcode.cn/pro…
阅读更多...
CSS3 2D变形 过渡 动画

CSS3 2D变形 过渡 动画

​​​​​ transform(2D变形)概述translate()平移scale()缩放skew()倾斜rotate()旋转transform-origin中心原点 CSS3 2D变形 3D变形 过渡 动画 在CSS3中&#xff0c;动画效果包括4个部分&#xff1a;变形&#xff08;transform&#xff09;、3D变形、过渡&#xff08;transit…
阅读更多...
【Linux】cp问题，生产者消费者问题代码实现

【Linux】cp问题，生产者消费者问题代码实现

文章目录 前言一、 BlockQueue.hpp&#xff08;阻塞队列&#xff09;二、main.cpp 前言 生产者消费者模式就是通过一个容器来解决生产者和消费者的强耦合问题。生产者和消费者彼此之间不直接通讯&#xff0c;而通过阻塞队列来进行通讯&#xff0c;所以生产者生产完数据之后不用…
阅读更多...
计算机网络：网络层（无分类编址CIDR、计算题讲解）

计算机网络：网络层（无分类编址CIDR、计算题讲解）

带你快速通关期末 文章目录 前言一、无分类编址CIDR简介二、构成超网三、最长前缀匹配总结 前言 我们在前面知道了分类地址&#xff0c;但是分类地址又有很多缺陷&#xff1a; B类地址很快将分配完毕!路由表中的项目急剧增长! 一、无分类编址CIDR简介 无分类域间路由选择CI…
阅读更多...
计算机网络：数据链路层（VLAN）

计算机网络：数据链路层（VLAN）

今天又学到一个知识&#xff0c;加油&#xff01; 目录 一、传统局域网的局限&#xff08;促进VLAN的诞生&#xff09; 二、VLAN简介 三、VLAN的实现 总结 一、传统局域网的局限&#xff08;促进VLAN的诞生&#xff09; 缺乏流量隔离:即使把组流量局域化道一个单一交换机中…
阅读更多...
【Linux】初识命令行

【Linux】初识命令行

为什么使用命令行&#xff1f; 大多数的计算机用户只是熟悉图形用户界面(GUI)&#xff0c;采用图形方式显示的用户操作界面。命令行界面(CLI)是一种通过文本输入来与计算机进行交互的方式&#xff0c;用来和计算机进行交流沟通的非常有效的方式&#xff0c;正像人类社会使用文…
阅读更多...
【Windows】windows11右键默认显示更多选项的办法

【Windows】windows11右键默认显示更多选项的办法

Windows11系统的右键菜单显示&#xff0c;需要多点一次“显示更多选项”才能看到所有菜单内容&#xff0c;按下面步骤简单设置一下就能恢复成Windows经典的右键菜单显示。 1. 2.输入命令【reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a…
阅读更多...
熬了一个通宵，把国内外的大模型都梳理完了！

熬了一个通宵，把国内外的大模型都梳理完了！

大家好&#xff0c;大模型越来越多了&#xff0c;真的有点让人眼花缭乱。 为了让大家清晰地了解大模型&#xff0c;我熬了一个通宵把国内和国外的大模型进行了全面梳理&#xff0c;国内有189个&#xff0c;国外有20&#xff0c;同时包括大模型的来源机构、来源信息和分类等。 …
阅读更多...
vue3+leaflet天地图开发

vue3+leaflet天地图开发

<script setup> import { onMounted, onUnmounted, ref } from "vue"; // todo 项目使用请放开 leaflet 引入 // import L from leaflet;const emit defineEmits(["mapLoad"]);var markers ref([]); const mapRef ref(); const marker ref(); co…
阅读更多...
linux环境安装可操作图库语言Gremlin的图框架HugeGraph

linux环境安装可操作图库语言Gremlin的图框架HugeGraph

原创/朱季谦 若你还没接触过图数据库&#xff0c;可能看到这个概念时&#xff0c;会比较蒙蔽。 图是什么&#xff1f;图数据库又是什么&#xff1f; 首先&#xff0c;在数据结构中&#xff0c;图是一种由顶点&#xff08;vertex&#xff09;集合及顶点间关系集合组成的一种非…
阅读更多...
FRP内网映射家用服务器至公网访问

FRP内网映射家用服务器至公网访问

兄弟们&#xff0c;服务器到货了&#xff0c;后续与大家分享内容就用它了。我预装的操作系统是Centos8,首先要解决的是远程访问的问题。 【特别注意】下述的端口&#xff0c;记得在阿里云安全组配置中放开端口入规则&#xff01;&#xff01; 1. FRP服务器配置 之前我有购买…
阅读更多...
如何将数据库导入MySQL的办法

如何将数据库导入MySQL的办法

在电脑cmd终端进行导入 首先找到MySQL中bin的位置 第一步&#xff1a;找到MySQL 第二步&#xff1a;进入MySQL 第三步&#xff1a;打开bin 第四步&#xff1a;输入cmd进入终端 第五步&#xff1a; 输入mysql -uroot -p 然后会弹出enter password&#xff1a; 输入你的密码…
阅读更多...
Leetcode的AC指南 —— 链表：24. 两两交换链表中的节点

Leetcode的AC指南 —— 链表：24. 两两交换链表中的节点

摘要&#xff1a; Leetcode的AC指南 —— 链表&#xff1a;24. 两两交换链表中的节点。题目介绍&#xff1a;给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站