【JavaWeb】前置知识:CSS与JavaScript知识汇总

news/2024/5/19 12:04:41/文章来源:https://blog.csdn.net/m0_60353039/article/details/127072525

在这里插入图片描述
本文被 系统学习JavaWeb 收录,点击订阅

写在前面

 大家好,我是黄小黄!经过上一篇 从Html入门JavaWeb 的学习,想必大家对标签都有了一定的认识。本文将通过案例,讲解CSS与JavaScript的基础知识,文章内容比较长,耐心看完哦~ 点击目录,可以跳转对应的知识点。
在这里插入图片描述


文章目录

  • 写在前面
  • 1 CSS技术
    • 1.1 CSS概述及语法规则
    • 1.2 CSS与HTML的组合使用
    • 1.3 CSS选择器
      • 1.3.1 标签名选择器
      • 1.3.2 id选择器
      • 1.3.3 class类选择器
      • 1.3.4 组合选择器
    • 1.4 CSS常用样式
  • 2 JavaScript技术
    • 2.1 JavaScript简介
    • 2.2 Javascript与html结合使用
    • 2.3 变量及数据类型
    • 2.4 关系与逻辑运算
    • 2.5 数组
    • 2.6 函数与隐形参数
    • 2.7 Javascript的自定义对象
    • 2.8 JS中的事件
      • 2.8.1 事件注册
      • 2.8.2 onload事件
      • 2.8.3 onclick事件
      • 2.8.4 onblur事件
      • 2.8.5 onchange事件
      • 2.8.6 onsubmit事件
    • 2.9 DOM模型与Document对象
      • 2.9.1 简介与说明
      • 2.9.2 Document对象中常用方法
      • 2.9.3 案例:验证用户名
    • 2.10 正则表达式对象
  • 写在最后


1 CSS技术

1.1 CSS概述及语法规则

CSS是层叠样式表单,用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记语言。

CSS的语法规则如下:

  • 选择器: 浏览器根据“选择器”决定受CSS样式影响的HTML元素(标签);
  • 属性: property,指你需要改变的样式名,并且每个属性都有一个值。属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明(declaration);
  • 多个声明: 如果定义的不止一个声明,则需要使用分号将每个声明分开。

在这里插入图片描述

1.2 CSS与HTML的组合使用

1️⃣ 在标签的style属性上设置"key:value value;",修改标签样式。

分别定义两个div、span标签,并修改每个 div 标签的样式为:边框1个像素,实线,蓝色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div style="border: 1px solid blue;">div标签1</div>
<div style="border: 1px solid blue;">div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

在这里插入图片描述
看代码可知,第一种方式有如下缺点:

  1. 如果标签多,样式也多,则代码量就会更多;
  2. 可读性非常差;
  3. css代码没有体现出复用性。

2️⃣ 在head标签中,使用style标签来定义自己需要的css样式
格式如下:

xxx {Key : value value;
}

分别定义两个div、span标签,并修改每个 div 标签的样式为:边框1个像素,实线,蓝色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- style标签专门用来定义css样式代码 --><style type="text/css">div {border: 1px solid blue;}</style>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

上述的代码实现了第一个案例的需求,且style部分的代码对所有div标签都有效果。但是,仍然存在局限性:

  1. 只能在一个页面内复用代码,不能在多个页面中复用css代码;
  2. 维护起来不方便,实际项目中会有成千上万的页面,工作量太大。

3️⃣ 把css样式写成一个单独的css文件,再通过link标签引用即可实现复用
格式如下:

<link rel="stylesheet" type="text/css" href="css文件路径"/>

实现上述需求的代码如下:
test.css

div {border: 1px solid blue;
}

1-css.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

1.3 CSS选择器

1.3.1 标签名选择器

标签名选择器的格式如下:

标签名 {属性:;
}

标签名选择器,可以决定哪些标签被动的使用哪些样式。

在所有的div标签上修改字体颜色为红色,字体大小为20像素,边框为1像素蓝色实线;
修改所有span标签的字体颜色为绿色,边框为1像素黑色虚线。

css

div {border: 1px solid blue;color: red;font-size: 20px;
}
span {border: 1px dashed black;color: green;
}

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

在这里插入图片描述

1.3.2 id选择器

id选择器的格式如下:

#id 属性值 {属性:;
}

id选择器,可以让我们通过id属性选择性的去使用样式。

分别定义两个div标签,第一个div标签定义id为id001,然后根据id属性定义css样式,修改字体为红色;
第二个div标签定义id为id002,然后根据id属性定义css样式,修改字体颜色为紫色,并且字体大小为50像素。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>#id001 {color: red;}#id002 {color: purple;font-size: 50px;}</style>
</head>
<body>
<div id="id001">id001的div标签</div>
<div id="id002">id002的div标签</div>
</body>
</html>

在这里插入图片描述

1.3.3 class类选择器

class类型选择器的格式如下:

.class 属性值 {属性:;
}

class类型选择器,可以通过class属性,有效的选择性的去使用样式。

(1)修改class属性值为class01的span或div标签,字体颜色为蓝色,字体大小为25像素。边框为黄色1像素实线;
(2)修改class属性值为class02的div标签,字体颜色为黄色。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.class01 {color: blue;font-size: 25px;border: 1px solid yellow;}.class02 {color: yellow;}</style>
</head>
<body>
<div class="class01">class01 div</div>
<div class="class02">class02 div</div>
<span class="class01">class01 span</span>
</body>
</html>

在这里插入图片描述

1.3.4 组合选择器

组合选择器的格式如下:

选择器1, 选择器2, 选择器n{属性:;
}

组合选择器可以让多个选择器共用css代码。

1.4 CSS常用样式

  • 字体颜色
    color: red;
    可以写颜色名:red、blue等,也可以使用rgb值和十六进制数表示,如rgb(255,0,0),#00F6DE。

  • 背景颜色
    background-color: #0F2D4C;

  • 字体样式
    color:#FF0000; 字体颜色
    font-size: 20px; 字体大小

  • 像素实线边框,红色
    border: 1px solid red;

  • DIV居中
    margin-left: auto;
    margin-right: auto;

  • 文本居中
    text-align:center;

  • 超链接去下划线
    text-decoration:none;

  • 表格细线

table {border: 1px solid black; /*设置边框*/border-collapse: collapse; /*将边框合并*/
}
td,th {border: 1px solid black; /*设置边框*/
}
  • 列表去除修饰
ul {list-style: none;
}

2 JavaScript技术

2.1 JavaScript简介

Javascript语言的诞生主要是为了完成页面的数据验证。因此它运行在客户端,需要运行浏览器来解释执行Javascript的代码。
JS是弱类型,Java是强类型。

弱类型即类型可变,类型转换规则不明显;
强类型就是在定义变量的时候,类型已经确定,不可变。

Javascript的特点:

  1. 交互性(信息的动态交互)
  2. 安全性(不允许直接访问本地硬盘)
  3. 跨平台性(只要是可以解释JS的浏览器都可以执行,与平台无关)

2.2 Javascript与html结合使用

1️⃣ 只需要在 head 标签中,或者在 body 标签中,使用 script 标签来书写 JavaScript 代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">// alert是Javascript语言的一种警告框函数// 可以接收任意类型的参数, 作为警告框中的信息alert("Hello, JavaScript!!!");</script>
</head>
<body></body>
</html>

在这里插入图片描述

2️⃣ 使用 script 标签引入单独的 Javascript 文件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!-- 现在需要使用 script 引入外部 js 文件并执行src 属性用来引入 js 文件路径--><script type="text/javascript" src="test.js"></script>
</head>
<body></body>
</html>

一个script标签既可以用来定义js代码,也可以用于引入js文件。但是,两个功能只能生效一个,也就是一个script标签不能同时实现两个功能。

2.3 变量及数据类型

Javascript中的数据类型有:

  • 数值类型:int、short、float、double、byte;
  • 字符串类型:String
  • 对象类型:object;
  • 布尔类型:boolean;
  • 函数类型:function;

Javascript里的特殊值:

  • undefined:未定义,所有js变量未赋予初始值的时候,默认都是undefined。
  • null:空值;
  • NAN:全称是:Not a Number,非数字、非数值。

定义变量的格式如下:

var 变量名;
var 变量名 =;

2.4 关系与逻辑运算

关系运算

  • 等于:== (字面值的比较)
  • 全等于:=== (除了字面值,数据类型也要相同)
  • 其它(与Java一样):>,<,>=,<=,!=

全等于与等于的区别:

var a = 10;
var b = "10";
alert(a == b);  // true
alert(a === b);  // false

逻辑运算

  • 且运算:&&
  • 或运算:||
  • 取反运算:!

在Javascript中,所有的变量,都可以做为一个boolean类型的变量去使用。
0、null、undefined、“”(空串)都认为是false。

&&且运算
(1)当表达式全为真,返回最后一个表达式的值;
(2)当表达式中,有一个为假,返回第一个为假的表达式的值。
|| 或运算
(1)当表达式全为假时,返回最后一个表达式的值;
(2)只要有一个表达式为真,就会把第一个真的表达式的值返回。

2.5 数组

JS中数组的定义方式如下:

var 数组名 = []; //空数组
var 数组名 = [1, true, 'abc']; //定义数组时赋值

案例如下:

var arr = []; //定义一个空数组
alert(arr.length); //0arr[0] = 10;
alert(arr.length); //1arr[2] = 12;
alert(arr.length); //3alert(arr[1]); //undefined

JavaScript中,通过数组下标赋值后,最大的下标值会自动给数组扩容。未赋值的部分,为undefined。

数组的遍历依然可以使用循环来实现:

for(var i = 0; i < arr.length; i++){alert(arr[i]);
}

2.6 函数与隐形参数

1️⃣ 可以使用function关键字定义函数:

function 函数名(形参列表){函数体
}

如果需要定义带有返回值的函数,只需要在函数体内直接使用return语句返回值即可。

2️⃣ 也可以将函数名提前:

var 函数名 = function(形参列表){函数体}

在Java中函数允许重载,但是,在JS中函数的重载会直接覆盖上一次的定义!

函数的arguments隐形参数(只在function函数内)
在function函数中不需要定义,却可以直接用来获取所有参数的变量。
比较像java中的可变参数:

public void fun(Object... args){}

使用方式类似数组,JS中的隐形参数与此类似:

function fun(){alert(arguments.length); //查看参数个数//取值alert(arguments[0]);alert(arguments[1]);alert(arguments[2]);
}

2.7 Javascript的自定义对象

Object形式的自定义对象
对象的定义:

var 变量名 = new Object(); //对象实例
变量名.属性名 =; //定义一个属性
变量名.函数名 = function(){} //定义一个函数

对象的访问:

变量名.属性名/函数名;

{ }形式的自定义对象

var 变量名 = { //空对象属性名:, //定义一个属性属性名:, //定义一个属性函数名: function(){} //定义一个函数
};

2.8 JS中的事件

事件是电脑输入设备与页面进行交互的响应。

常用的事件如下:

  • onload 加载完成事件
  • onclick 点击事件
  • onblur 失去焦点事件
  • onchange 内容发生改变事件
  • onsubmit 表单提交事件

2.8.1 事件注册

什么是事件注册(绑定)?

其实就是告诉浏览器,当事件响应后要执行哪些操作代码。

事件的注册分为静态注册和动态注册两种

  • 静态注册: 通过html标签的事件属性直接赋予事件响应后的代码;
  • 动态注册: 指先通过JS代码得到标签的dom对象,然后通过 dom 对象.事件名 = function(){} 这种形式赋予事件响应后的代码。

2.8.2 onload事件

onload事件是浏览器在解析完页面后就会自动触发的事件。 页面加载完成后,常用于做页面js代码的初始化操作。

静态注册onload事件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//onload事件方法function onloadFun(){alert('静态注册onload事件...');}</script>
</head>
<body onload="onloadFun()"></body>
</html>

在这里插入图片描述
动态注册onload事件:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//动态注册onload事件是固定写法window.onload = function (){alert('静态注册onload事件...');}</script>
</head>
<body></body>
</html>

2.8.3 onclick事件

常用于按钮的点击响应操作,以按钮示例
静态注册方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onclickFun(){alert('onclick事件');}</script>
</head>
<body>
<button onclick="onclickFun()">按钮</button></body>
</html>

在这里插入图片描述

动态注册方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function (){//1.获取标签对象var elementById = document.getElementById("bt01");//2.通过标签对象.事件名 = function(){}elementById.onclick = function (){alert("onclick事件");}}</script>
</head>
<body>
<button id="bt01">按钮</button></body>
</html>

2.8.4 onblur事件

即失去焦点事件,常用于输入框失去焦点后验证其输入内容是否合法。

静态注册方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">//静态注册失去焦点事件function onblurFun(){//console是控制台对象,是由JavaScript语言提供//专门用来向浏览器的控制器打印输出,用于测试使用//log()是打印的方法console.log("失去焦点事件");}</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun()"><br/>&emsp;码:<input type="password"><br/>
</body>
</html>

在这里插入图片描述

动态注册方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function (){//1.获取标签对象var elementById = document.getElementById("username");//2.对象.事件elementById.onblur = function (){console.log("失去焦点事件");}}</script>
</head>
<body>
用户名:<input type="text" id="username"><br/>&emsp;码:<input type="password"><br/>
</body>
</html>

2.8.5 onchange事件

即内容发生改变事件,常用于下拉列表和输入框内容发生改变后操作。

静态注册方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onchangeFun(){alert("选择发生变化");}</script>
</head>
<body>
请选择你最喜欢的动漫人物:
<select onchange="onchangeFun()"><option>---动漫人物---</option><option>路飞</option><option>娜美</option><option>汉库克</option>
</select></body>
</html>

在这里插入图片描述
动态注册方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function (){var elementById = document.getElementById("sel01");elementById.onchange = function (){alert("选择发生变化");}}</script>
</head>
<body>
请选择你最喜欢的动漫人物:
<select id = "sel01"><option>---动漫人物---</option><option>路飞</option><option>娜美</option><option>汉库克</option>
</select></body>
</html>

2.8.6 onsubmit事件

即表单提交事件,常用于表单提交前,验证所有表单是否合法。

静态注册方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onsubmitFun(){//验证表单所有项是否合法,如果有一个不合法就阻止表单提交//以下省略代码逻辑alert("静态注册表单");return false;}</script>
</head>
<body>
<!-- return false 可以阻止表单提交 -->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()"><input type="submit" value="静态注册"/>
</form>
</body>
</html>

在这里插入图片描述

动态注册方式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">window.onload = function (){var elementById = document.getElementById("form01");elementById.onsubmit = function (){//验证表单所有项是否合法,如果有一个不合法就阻止表单提交//以下省略代码逻辑alert("静态注册表单");return false;}}</script>
</head>
<body>
<!-- return false 可以阻止表单提交 -->
<form action="http://localhost:8080" method="get" id="form01"><input type="submit" value="静态注册"/>
</form>
</body>
</html>

2.9 DOM模型与Document对象

2.9.1 简介与说明

DOM即Document Object Model 文档对象模型。就是把文档中的标签、属性、文本转换成对象来管理。
接下来,学习的重点就是 如何实现把标签、属性、文本转换成对象来管理。

下图为 Document文档树 的内存结构图:
在这里插入图片描述
如何理解Document对象?

  1. Document 管理了所有的 HTML 文档内容;
  2. Document 是树结构的文档,有层级关系;
  3. 将标签都进行了对象化;
  4. 可以通过 Document对象 访问所有标签对象。

2.9.2 Document对象中常用方法

在这里插入图片描述

2.9.3 案例:验证用户名

当用户点击了校验按钮,要获取输入框的内容,并验证其是否合法。规则如下:
(1)必须由字母,数字,下划线组成;
(2)长度为5到12位。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onclickFun(){//1.得到输入框的对象var usernameObj = document.getElementById("username");//2.获取输入框的内容var usernameText = usernameObj.value;//3.验证字符串是否满足规则,使用正则表达式var patt = /^\w{5,12}$/;/** test()方法用于测试某个字符串是否匹配规则*/if (patt.test(usernameText)){alert("合法");}else {alert("不合法");}}</script>
</head>
<body>
用户名: <input type="text" id="username"/>
<button onclick="onclickFun()"><font color="red">校验</font>
</button></body>
</html>

在这里插入图片描述
但是,在实际中,网站并不会以这种方式提示信息,下面展示另一提示方式:

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">function onclickFun(){//1.得到对象var usernameObj = document.getElementById("username");var spanObj = document.getElementById("span01");//2.获取输入框的内容var usernameText = usernameObj.value;//3.验证字符串是否满足规则,使用正则表达式var patt = /^\w{5,12}$/;/** test()方法用于测试某个字符串是否匹配规则*/if (patt.test(usernameText)){spanObj.innerText = "用户名合法!";}else {spanObj.innerText = "用户名不合法!";}}</script>
</head>
<body>
用户名: <input type="text" id="username"/>
<span id="span01" style="color: red"></span>
<button onclick="onclickFun()">校验</button></body>
</html>

2.10 正则表达式对象

正则表达式是描述字符模式的对象。
正则表达式用于对字符串模式匹配及检索替换,是对字符串执行模式匹配的强大工具。

语法如下:

var patt = new RegExp(pattern, modifiers);
或者
var patt = /pattern/modifiers;
  • pattern(模式),描述了表达式的模式;
  • modifiers(修饰符)用于指定全局匹配,区分大小写的匹配和多行匹配。

以下列举部分正则表达式,其余请参考文档:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


写在最后

 好了,本文内容到这里就告一段落了,下一节,将给大家带来jQuery的相关内容,欢迎大家订阅专栏,加入学习!点击订阅

 如果你有任何问题,欢迎私信,感谢您的支持!
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

SSM+Vue个人健康管理系统 个人健康档案系统 个人健康信息管理系统Java

SSM+Vue个人健康管理系统 个人健康档案系统 个人健康信息管理系统Java💖🔥作者主页:计算机毕设老哥🔥 💖精彩专栏推荐订阅:在 下方专栏👇🏻👇🏻👇🏻👇🏻Java实战项目专栏 Python实战项目专栏 安卓实战项目专栏 微信小程序实战项目专栏目录Java实战项…

【数据结构从0到1】第九篇:图

文章目录一、图的基本概念二、图的存储结构2.1 邻接矩阵2.2 邻接表三、图的遍历3.1 图的广度优先遍历3.2 图的深度优先遍历四、最小生成树4.1 Kruskal算法4.2 Prim算法五、最短路径5.1 单源最短路径--Dijkstra算法5.2 单源最短路径--Bellman-Ford算法5.3 多源最短路径--Floyd-W…

基于Java开发的五子棋游戏APP设计与实现

目录 一、项目概述 1 &#xff08;一&#xff09;安卓游戏发展趋势 1 &#xff08;二&#xff09;开发安卓游戏的意义 1 二、项目需求分析 2 &#xff08;一&#xff09;功能需求分析 2 &#xff08;二&#xff09;性能需求分析 2 &#xff08;三&#xff09;可行性分析 3 &…

【点云处理】点云法向量估计及其加速(1)

点云法向量是3D点云一个极其重要的几何表面特征&#xff0c;众多的点云处理算法都依赖精确的法向量估计&#xff0c;例如点云分割&#xff0c;点云去噪等。在自动驾驶领域&#xff0c;面对特殊场景我们主要依赖点云法向量进行场景分割。估计点云法向量需要得到该点的邻域内点&a…

nodejs+vue+elementui幼儿园管理系统python java php

本设计主要分为学生家长&#xff0c;管理员和教师三个角色&#xff0c;其中学生家长功能有注册登查看幼儿信息&#xff0c;查看缴费信息&#xff0c;申请请假&#xff0c;查看体检信息等&#xff1b;教师的功能有登陆系统&#xff0c;对自己的幼儿学生&#xff0c;班级&#xf…

谷粒商城 集群篇 (二) --------- K8s 集群安装

目录一、kubeadm二、前置要求三、部署步骤四、环境准备五、安装环境1. 安装 docker① 卸载 docker② 安装 Docker-CE③ 配置 docker 加速④ 启动 docker & 设置 docker 开机自启2. 添加阿里云 yum 源3. 安装 kubeadm&#xff0c;kubelet 和 kubectl六、部署 k8s-master1. m…

STL之string

更新string&#xff0c;这段时间学习了stl&#xff0c;发现共性的东西很多&#xff0c;string&#xff0c;vector&#xff0c;list等&#xff0c;弄懂他们的逻辑框架很重要&#xff0c;其实也是stl的规范&#xff0c;文章更新内容不管这些函数怎么用&#xff0c;就从大逻辑来讲…

Java项目:SSH土地信息管理系统平台

作者主页&#xff1a;夜未央5788 简介&#xff1a;Java领域优质创作者、Java项目、学习资料、技术互助 文末获取源码 项目介绍 本项目包含管理员与用户两种角色&#xff1b; 管理员角色包含以下功能&#xff1a; 管理员登录,用户管理,分类管理,档案管理等功能。 用户角色包含…

基于STM32的光敏传感器数据采集系统-物联网应用系统设计项目开发

目录1 项目概述1.1 项目介绍1.2 项目开发环境1.3 小组人员及分工2 需求分析2.1 系统需求分析2.2 可行性分析2.3 项目实施安排3 系统硬件设计3.1 系统整体硬件电路设计3.2 STM32 最小系统电路设计3.3 传感器模块电路设计3.4 光敏电阻模块电路设计4系统软件设计4.1 系统整体流程设…

源码、反码、补码和精度损失

数据类型转换,转换过程中可能导致溢出或损失精度 1.源码:源码就是二进制的数字并且开头的一位代表符号位。例:(+1)的源码:0000 0001(-1)的源码:1000 0001 2.反码:正数的反码是其本身负数的反码是符号位不懂其他位取反例: (+1)的反码:0000 0001(-1)的反码:1111 …

TC8:TCP_CLOSING_03-13

TCP_CLOSING_03: RST with DATA 目的 TCP允许接收的RST消息包含数据 测试步骤 Tester:让DUT移动到ESTABLISHED状态Tester:发送RST报文,包含一些数据DUT:不发送任何响应Tester:验证DUT在CLOSED状态期望结果 3, DUT:不发送任何响应 4, Tester:验证DUT在CLOSED状态 CANoe …

谷歌味儿

咱们从小就被教育过&#xff0c;决定一个人成败的最重要因素不是智商、暂时的能力&#xff0c;而是性格和品质。这是如此的正确&#xff0c;以至于很多公司暗暗将这个作为候选人的衡量标准。比如咱们常听到的“X里味儿”。今天咱们看看“谷歌味儿“。谷歌内部明确要求的三大品质…

spring:beanfactory与applicationcontext的设计

beanfactory接口提供的方法:getBean,getBeanProvider,containsBean,isSingleton,getType,getAliases listableBeanFactory: 不会取到手动注册的bean,为什么要这么做呢,因为有些bean属于 SpringFramework 内部使用的,这样做的目的是 SpringFramework 不希望咱开发者直接…

恶意代码分析实战 windbg内核恶意代码分析 lab 10-1 10-2 10-3

Lab 10-01 本实验包括一个驱动程序和一个可执行文件。你可以从任意位置运行可执行文件,但为了使程序能够正常运行,必须将驱动程序放到C:\Windows\System32目录下,这个目录在受害者计算机中已经存在。可执行文件是Lab10-01.exe,驱动程序是Lab 10-01.sys. 问题 1.这个程序是否…

公众号网课搜题接口使用-公众号使用

公众号网课搜题接口使用-公众号使用 本平台优点&#xff1a; 多题库查题、独立后台、响应速度快、全网平台可查、功能最全&#xff01; 1.想要给自己的公众号获得查题接口&#xff0c;只需要两步&#xff01; 2.题库&#xff1a; 查题校园题库&#xff1a;查题校园题库后台&…

(43)STM32——触摸屏实验笔记

目录 学习目标 成果展示 硬件知识 触摸屏 分类 区别 寄存器 控制命令寄存器&#xff08;0X8040&#xff09; 配置寄存器组&#xff08;0X8047~0X8100&#xff09; 产品 ID 寄存器&#xff08;0X8140~0X8143&#xff09; 状态寄存器&#xff08;0X814E&#xff09; …

【网络】Wireshark对远程主机抓包|过滤|原理

目录 对远程Linux主机进行抓包 对Windows主机抓包 过滤 1.过滤IP&#xff0c;如来源IP或者目标IP等于某个IP 2.过滤端口 3.过滤协议 4.过滤MAC 5.包长度过滤 6.http模式过滤 7.TCP参数过滤|过滤标志 SYN|RST|ACK…… 8.包内容过滤 9.dns模式过滤 10.DHCP 11.msn 12. wireshark字…

火车头采集下载图片的位置和URL地址的更换

火车头采集下载图片的位置和URL地址的更换 1&#xff1a; 先明白&#xff0c; img 标签里面有一个 src 地址 2&#xff1a; 明白下面这图片的内容 下载图片勾选&#xff0c;是必须的 文件保存目录 它代表了2个意思 1是下载的位置【 没有给完全目录&#xff0c;它会默认C盘下载…

【python-Unet】计算机视觉~舌象舌头图片分割~机器学习(三)

返回至系列文章导航博客 1 简介 舌体分割是舌诊检测的基础&#xff0c;唯有做到准确分割舌体才能保证后续训练以及预测的准确性。此部分真正的任务是在用户上传的图像中准确寻找到属于舌头的像素点。舌体分割属于生物医学图像分割领域。分割效果如下&#xff1a; 2 数据集介…

教程图文详解 - 网络规划设计(第十二章)

一 前言 网络规划与设计是根据网络监视的目标进行需求分析&#xff0c;设计网络的逻辑结构和物理结构&#xff0c;为网络工程的安装和配置准备各种技术文档。 网络规划和设计是一个迭代和优化的过程。 本章节考点为 综合布线、网络设计阶段与任务、网络架构与三层功能等。 …