Nginx详解 五:反向代理

文章目录

  • 1. 正向代理和反向代理
    • 1.1 正向代理概述
      • 1.1.1 什么是正向代理
      • 1.1.2 正向代理的作用
      • 1.1.3 正向代理的基本格式
    • 1.2 反向代理概述
      • 1.2.1 什么是反向代理
      • 1.2.2 反向代理可实现的功能
      • 1.2.3 反向代理的可用模块
  • 2. 配置反向代理
    • 2.1 反向代理配置参数
      • 2.1.1 proxy_pass
      • 2.1.2 其他参数
  • 3. 示例
    • 3.1 反向代理单台web服务器
    • 3.2 指定主机实现反向代理动静分离
    • 3.3 缓存功能
    • 3.4 实现反向代理客户端IP透传
      • 3.4.1 基本原理
      • 3.4.2 一级代理
      • 3.4.3 多级代理
    • 3.5 实现反向代理负载均衡
      • 3.5.1 基本原理
      • 3.5.2 常见配置参数
      • 3.5.2 调度算法
        • 3.5.2.1 轮询(Round Robin)
        • 3.5.2.2 轮询权值(Weighted Round Robin)
        • 3.5.2.3 ip_hash
        • 3.5.2.4 fair(第三方)
        • 3.5.2.5 url_hash(第三方)
        • 3.5.2.6 least_conn(最小连接数)
        • 3.5.2.7 最少响应时间(Least Time)
    • 3.6 示例
      • 3.6.1 使用轮询算法实现负载均衡
      • 3.6.2 使用加权轮询算法实现负载均衡

1. 正向代理和反向代理

1.1 正向代理概述

在这里插入图片描述

1.1.1 什么是正向代理

正向代理代理的是客户端

正向代理是一个位于客户端和目标服务器之间的代理服务器(中间服务器)。为了从目标服务器取得内容,客户端向代理服务器发送一个请求,并且指定目标服务器,之后代理向目标服务器转发请求,将获得的内容返回给客户端

1.1.2 正向代理的作用

  • 为在防火墙内的局域网客户端提供访问Internet的途径
  • 可以使用缓冲特性减少网络使用率
  • 访问受地理位置限制的网络
  • 使用代理后会隐藏真实的IP地址

1.1.3 正向代理的基本格式

server {listen 192.168.67.100:80;server_name ....;#客户端访问的域名location / {proxy_pass http://目标服务器地址;}}

1.2 反向代理概述

在这里插入图片描述

1.2.1 什么是反向代理

反向代理代理的是服务端

反向代理:(reverse proxy),指的是代理外网用户的请求到内部的指定的服务器,并将数据返回给用户的一种方式
客户端不直接与后端服务器进行通信,而是与反向代理服务器进行通信,隐藏了后端服务器的 IP 地址

1.2.2 反向代理可实现的功能

反向代理的主要作用是提供负载均衡和高可用性。

负载均衡:Nginx可以将传入的请求分发给多个后端服务器,以平衡服务器的负载,提高系统性能和可靠性。

缓存功能:Nginx可以缓存静态文件或动态页面,减轻服务器的负载,提高响应速度。

动静分离:将动态生成的内容(如 PHP、Python、Node.js 等)和静态资源(如 HTML、CSS、JavaScript、图片、视频等)分别存放在不同的服务器或路径上。

多站点代理:Nginx可以代理多个域名或虚拟主机,将不同的请求转发到不同的后端服务器上,实现多个站点的共享端口。

1.2.3 反向代理的可用模块

ngx_http_proxy_module: #将客户端的请求以http协议转发至指定服务器进行处理ngx_http_upstream_module #用于定义为proxy_pass,fastcgi_pass,uwsgi_pass等指令引用的后端服务器分组ngx_stream_proxy_module:#将客户端的请求以tcp协议转发至指定服务器处理ngx_http_fastcgi_module:#将客户端对php的请求以fastcgi协议转发至指定服务器助理ngx_http_uwsgi_module: #将客户端对Python的请求以uwsgi协议转发至指定服务器处理

2. 配置反向代理

#官方文档:https://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass 

2.1 反向代理配置参数

2.1.1 proxy_pass

proxy_pass 地址:端口的方式 ;  
#用来设置将客户端请求转发给的后端服务器的主机,可以是主机名(将转发至后端服务做为主机头首部)、IP
#也可以代理到预先设置的主机群组,需要模块ngx_http_upstream_module支持
proxy_pass http://10.0.0.18:8080; 
#8080后面无uri,即无 / 符号,需要将location后面url 附加到proxy_pass指定的url后面,此行为类似于root
#proxy_pass指定的uri不带斜线将访问的/web,等于访问后端服务器proxy_pass http://10.0.0.18:8080/;   
#8080后面有uri,即有 / 符号,相当于置换,即访问/web时实际返回proxy_pass后面uri内容.此行为类似于alias 
#proxy_pass指定的uri带斜线,等于访问后端服务器的http://10.0.0.18:8080/index.html 内容返回给客户端
#如果location定义其uri时使用了正则表达式模式(包括~,~*,但不包括^~),则proxy_pass之后必须不能使用uri; 即不能有/ ,用户请求时传递的uri将直接附加至后端服务器之后

2.1.2 其他参数

proxy_hide_header field;
#用于nginx作为反向代理的时候,在返回给客户端http响应时,隐藏后端服务器相应头部的信息,可以设置proxy_hide_header field;proxy_pass_header field;
#默认nginx在响应报文中不传递后端服务器的首部字段Date, Server, X-Pad, X-Accel等参数,如果要传递的话则要使用 proxy_pass_header field声明将后端服务器返回的值传递给客户端#field 首部字段大小不敏感
#示例:透传后端服务器的Server和Date首部给客户端,同时不再响应报中显示前端服务器的Server字段
proxy_pass_header Server;
proxy_pass_header Date;proxy_pass_request_body on | off; 
#是否向后端服务器发送HTTP实体部分,可以设置在http,server或location块,默认即为开启proxy_pass_request_headers on | off; 
#是否将客户端的请求头部转发给后端服务器,可以设置在http,server或location块,默认即为开启

3. 示例

3.1 反向代理单台web服务器

在这里插入图片描述

所需配置

#代理服务器
vim /apps/nginx/conf.d/pc.conf
#编辑子配置文件
server{listen 192.168.67.100:80;server_name  www.pc.com;root    /apps/nginx/html/pc;location  / {proxy_pass http://192.168.67.101;
}}
nginx -t
nginx -s reload
#重新加载

在这里插入图片描述

#真实服务端
yum  install   httpd  -y #安装服务cd  /var/www/html
echo   "Hi~"  > index.html #主页内容systemctl start httpd #开启服务vim /etc/hosts
#添加地址映射192.168.67.100 www.pc.com

在这里插入图片描述

#客户机vim  /etc/hosts
192.168.67.100  www.pc.com

在这里插入图片描述

测试

客户机访问代理服务器

 curl 192.168.67.100

在这里插入图片描述

3.2 指定主机实现反向代理动静分离

在这里插入图片描述
因为nginx无法处理动态资源,所以要动静分离。

所需配置

#代理服务器vim /apps/nginx/conf.d/pc.conf
#编辑子配置文件location  /api {proxy_pass http://192.168.67.101;
}location  /static {proxy_pass http://192.168.67.103;
}
nginx -t
nginx -s reload
#重新加载

在这里插入图片描述

#动态资源服务器#关闭防火墙和selinux
systemctl stop firewalld
setenforce 0#安装nginx服务
yum install -y epel-release
yum install nginx -y 

在这里插入图片描述

systemctl start nginx #创建动态资源目录
cd /usr/share/nginx/htmlmkdir api
echo this is api > ./api/index.html

在这里插入图片描述

#静态资源服务器#关闭防火墙和selinux
systemctl stop firewalld 
setenforce 0#安装服务
yum install -y epel-release 
yum install nginx -y 
systemctl start nginx #创建静态资源目录
cd /usr/share/nginx/html
mkdir static
echo this is static > ./static/index.html

在这里插入图片描述

测试

#客户机
#关闭防火墙和selinux
systemctl stop firewalld 
setenforce 0#动态资源
curl 192.168.67.100/api -L#静态资源
curl 192.168.67.100/static -L

在这里插入图片描述

3.3 缓存功能

反向代理可以缓存静态资源。

当客户端再次请求访问相同资源时,反向代理可以直接返回缓存中的响应,无需二次请求,减少对后端服务器的请求压力,并加快响应速度。

proxy_cache zone_name | off; 默认off
#指明调用的缓存,或关闭缓存机制;Context:http, server, location
#zone_name 表示缓存的名称.需要由proxy_cache_path事先定义
proxy_cache_key string;
#缓存中用于“键”的内容,默认值:proxy_cache_key $scheme$proxy_host$request_uri;
proxy_cache_valid [code ...] time;
#定义对特定响应码的响应内容的缓存时长,定义在http{...}中示例:proxy_cache_valid 200 302 10m;proxy_cache_valid 404 1m;
 
proxy_cache_path;
#定义可用于proxy功能的缓存;Context:http   必须放在http语句中
proxy_cache_path path [levels=levels] [use_temp_path=on|off] 
keys_zone=zone_name:size [inactive=time] [max_size=size] [manager_files=number] 
[manager_sleep=time] [manager_threshold=time] [loader_files=number] 
[loader_sleep=time] [loader_threshold=time] [purger=on|off] 
[purger_files=number] [purger_sleep=time] [purger_threshold=time];#示例:在http配置定义缓存信息proxy_cache_path /var/cache/nginx/proxy_cache #定义缓存保存路径,proxy_cache会自动创建levels=1:2:2 #定义缓存目录结构层次,1:2:2可以生成2^4x2^8x2^8=2^20=1048576个目录keys_zone=proxycache:20m #指内存中缓存的大小,主要用于存放key和metadata(如:使用次数),一般1M可存放8000个左右的keyinactive=120s  #缓存有效时间  max_size=10g; #最大磁盘占用空间,磁盘存入文件内容的缓存空间最大值#调用缓存功能,需要定义在相应的配置段,如server{...};或者location等
proxy_cache proxycache;
proxy_cache_key $request_uri; #对指定的数据进行MD5的运算做为缓存的key
proxy_cache_valid 200 302 301 10m; #指定的状态码返回的数据缓存多长时间
proxy_cache_valid any 1m;   #除指定的状态码返回的数据以外的缓存多长时间,必须设置,否则不会缓存proxy_cache_use_stale error | timeout | invalid_header | updating | http_500 | http_502 | http_503 | http_504 | http_403 | http_404 | off ; #默认是off
#在被代理的后端服务器出现哪种情况下,可直接使用过期的缓存响应客户端#示例
proxy_cache_use_stale error http_502 http_503;proxy_cache_methods GET | HEAD | POST ...;
#对哪些客户端请求方法对应的响应进行缓存,GET和HEAD方法总是被缓存
proxy_cache_path /data/nginx/proyxcache   levels=1:1:1 keys_zone=proxycache:20m inactive=120s max_size=1g;http  语句
1:1:1  16个二进制     2^16/2^16/2^16       2^48server {listen 80;proxy_cache proxycache;proxy_cache_key $request_uri;#proxy_cache_key $host$uri$is_args$args;proxy_cache_valid 200 302 301 10m;proxy_cache_valid any 5m;server_name www.kgc.com;root /data/nginx/pc;location / {root /data/nginx/pc;}location /api {proxy_pass http://192.168.91.101:9527;}location ~* \.(jpg|png|gif|html)$ {proxy_pass http://192.168.91.102;}}

清理缓存

方法1: rm -rf 缓存目录
方法2: 第三方扩展模块ngx_cache_purge

3.4 实现反向代理客户端IP透传

3.4.1 基本原理

反向代理客户端IP透传是指在使用反向代理服务器时,将客户端的真实IP地址传递给后端服务器。

这可以通过一些特定的 如X-Forwarded-For 等HTTP 头字段来实现 头字段。

当请求经过反向代理服务器时,代理服务器会将客户端的真实IP地址添加到 XFF 头字段中,然后转发给后端服务器。

3.4.2 一级代理

在这里插入图片描述

所需配置

#代理服务器vim /apps/nginx/conf.d/pc.conf
#编辑子配置文件
server{listen 192.168.67.100:80;server_name  www.pc.com;root    /apps/nginx/html/pc;location  / {proxy_pass http://192.168.67.101;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}}######
`$proxy_add_x_forwarded_for` 是一个 nginx 变量,用于获取客户端的真实 IP 地址并将其添加到请求中的 `X-Forwarded-For` 头字段中,后端服务器可以通过检查该头字段来获取请求的真实客户端 IP 地址。

在这里插入图片描述

#后端服务器#关闭防火墙和selinux
systemctl stop firewalld
setenforce 0#安装服务
yum install -y epel-release #依赖
yum install nginx -y 
systemctl start nginx 

测试

#客户端
curl 192.168.67.100
#后端服务器
cat /var/log/nginx/access.log |tail -f -n2

在这里插入图片描述

3.4.3 多级代理

在这里插入图片描述

所需配置

#一级代理服务器#编辑子配置文件
vim /apps/nginx/conf.d/pc.conf
#反向代理指向二级代理服务器的IPnginx -t
nginx -s reload
#重新加载

在这里插入图片描述

#yum安装nginx
yum install -y epel-release 
yum install nginx -y systemctl start nginx vi /etc/nginx/nginx.conf
#编辑主配置文件server {
location / {
proxy_pass http://192.168.67.102;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}systemctl restart nginx
#重新加载

在这里插入图片描述

#后端服务器#关闭防火墙和selinux
systemctl stop firewalld
setenforce 0#安装nginx服务
yum install -y epel-release 
yum install nginx -y 
systemctl start nginx 

测试

#客户端,访问代理服务器
curl 192.168.2.100
#后端服务器,查看日志
cat /var/log/nginx/access.log | tail -n -1

在这里插入图片描述

3.5 实现反向代理负载均衡

Nginx 可以基于ngx_http_upstream_module模块提供服务器分组转发、权重分配、状态监测、调度算法等高级功能

#官方文档:
https://nginx.org/en/docs/http/ngx_http_up

3.5.1 基本原理

NGINX的负载均衡原理是基于反向代理和事件驱动的机制。
当客户端发送请求时,NGINX作为反向代理服务器接收请求,并根据配置的负载均衡算法将请求转发到后端的多个服务器上,实现负载均衡。

3.5.2 常见配置参数

server address [parameters];
#配置一个后端web服务器,配置在upstream内,至少要有一个server服务器配置。
#server支持的parameters如下:weight=number #设置权重,默认为1,实现类似于LVS中的WRR,WLC等max_conns=number  #给当前后端server设置最大活动链接数,默认为0表示没有限制max_fails=number  #后端服务器的下线条件,当客户端访问时,对本次调度选中的后端服务器连续进行检测多少次,如果都失败就标记为不可用,默认为1次,当客户端访问时,才会利用TCP触发对探测后端服务器健康性检查,而非周期性的探测fail_timeout=time #后端服务器的上线条件,对已经检测到处于不可用的后端服务器,每隔此时间间隔再次进行检测是否恢复可用,如果发现可用,则将后端服务器参与调度,默认为10秒sorry server   #自己不能转自己
down    #标记为down状态
resolve #当server定义的是主机名的时候,当A记录发生变化会自动应用新IP而不用重启Nginx
backup  #设置为备份服务器,当所有后端服务器不可用时,才会启用此备用服务器upstream backend {server backend1.example.com;server backend2.example.com backup;server backend3.example.com;
}

3.5.2 调度算法

3.5.2.1 轮询(Round Robin)

每个请求按时间顺序逐一分配到不同的后端服务,如果后端某台服务器死机,自动剔除故障系统,使用户访问不受影响。

#示例
upstream bakend {  server 192.168.67.1;    server 192.168.67.2;  
}

3.5.2.2 轮询权值(Weighted Round Robin)

weight的值越大分配到的访问概率越高,主要用于后端每台服务器性能不均衡的情况下。或者仅仅为在主从的情况下设置不同的权值,达到合理有效的地利用主机资源。

指定轮询几率,weight和访问比率成正比,用于后端服务器性能不均的情况。

#示例
upstream bakend {  server 192.168.67.1 weight=10;  server 192.168.67.2 weight=20;  
}

3.5.2.3 ip_hash

每个请求按访问IP的哈希结果分配,使来自同一个IP的访客固定访问一台后端服务器,并且可以有效解决动态网页存在的session共享问题。

每个请求按访问ip的hash结果分配,这样每个访客固定访问一个后端服务器,可以解决session的问题。

#示例
upstream bakend {  ip_hash;  server 192.168.67.1:88;  server 192.168.67.2:80;  
} 

3.5.2.4 fair(第三方)

比 weight、ip_hash更加智能的负载均衡算法,fair算法可以根据页面大小和加载时间长短智能地进行负载均衡,也就是根据后端服务器的响应时间 来分配请求,响应时间短的优先分配。
Nginx本身不支持fair,如果需要这种调度算法,则必须安装upstream_fair模块。

按后端服务器的响应时间来分配请求,响应时间短的优先分配。


upstream backend {  server 192.168.0.67:88;  server 192.168.0.67:80;  fair;  
}

3.5.2.5 url_hash(第三方)

按访问的URL的哈希结果来分配请求,使每个URL定向到一台后端服务器,可以进一步提高后端缓存服务器的效率。
Nginx本身不支持url_hash,如果需要这种调度算法,则必须安装Nginx的hash软件包。

按访问url的hash结果来分配请求,使每个url定向到同一个后端服务器,后端服务器为缓存时比较有效。

upstream backend {  server 192.168.67.1:88;  server 192.168.67.2:80;  hash $request_uri;  hash_method crc32;  
}#注:在upstream中加入hash语句,server语句中不能写入weight等其他的参数,hash_method是使用的hash算法。

3.5.2.6 least_conn(最小连接数)

根据后端服务器的连接状况进行分配客户请求,连接最少的服务器将被有限分配客户端请求。

#示例upstream backend {least_conn;server backend1.example.com;server backend2.example.com;}

3.5.2.7 最少响应时间(Least Time)

根据服务器的响应时间进行选择,将请求分配给响应时间最短的服务器。

3.6 示例

要启用负载均衡,需要在Nginx主配置文件中添加一个upstream块来定义后端服务器的列表。

然后,在相应的location块中使用proxy_pass指令指定负载均衡的上游服务器。

在这里插入图片描述

3.6.1 使用轮询算法实现负载均衡

所需配置

#代理服务器vim /apps/nginx/conf/nginx.conf
#编辑主配置文件upstream group1{server 192.168.67.102;server 192.168.67.103;}

在这里插入图片描述

vim /apps/nginx/conf.d/pc.com
#修改子配置文件
#修改location部分,加入pass_proxy http://group1;nginx -t
nginx -s reload
#重新加载

在这里插入图片描述

测试

#修改102、103主页文件
vi /usr/share/nginx/html/index.html

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

#转到客户端
curl 192.168.67.100   #x2

在这里插入图片描述

3.6.2 使用加权轮询算法实现负载均衡

所需配置

#代理服务器#修改主配置文件
vim /apps/nginx/conf/nginx.confupstream group1{server 192.168.67.102 weight=2;server 192.168.67.103 weight=3;
}

在这里插入图片描述

nginx -t
nginx -s reload
#重新加载

测试

#转到客户端
curl 192.168.67.100   #x2

在这里插入图片描述

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

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

相关文章

当你的公司突然开始大量的裁员,被留下的你,真的准备好面对以后了吗?

留下来的,也是迷茫的 最近公司突然开始大量裁员,裁了一多半,作为唯一留下的APP 端开发人员,也开始陷入了焦虑,开始了思考,未来究竟何去何从,是否再去转到原生,从事原生的开发工作&a…

C语言入门Day_19 初识函数

目录 1.函数的定义 2.函数的调用 3.易错点 4.思维导图 前言: printf()我们已经很熟悉了,它有一个特定的功能,就是在屏幕上输出一行文字。之前的课程我们都称呼printf()为一个功能,实际上ta在编程中有个特定的名字——函数。 …

测试-----selenuim webDriver

文章目录 1.页面导航2.元素定位3. 浏览器操作4.获取元素信息5. 鼠标的操作6. 键盘操作7. 元素等待8.下拉框9.弹出框10.滚动条11.frame处理12.验证码处理(cookie) 1.页面导航 首先是导入对应的包 :from selenium import webdriver然后实例化:driver web…

网络安全宣传周|探索AI数字人的魅力和价值所在

9月11日至9月17日是国家网络安全宣传周,在福州举办的安全博览会上有着多种人工智能模型产品亮相现场,吸引着众多参观者的目光,尤其是AI数字人面对不同的问题、不同的场景都可以进行实时响应,不同于冷冰冰的传统智能客服的对话场景…

前端面试合集(二)

前端面试题合集 1.懒加载的原理及实现了解吗2.如何理解JS异步3.阐述一下 JS 的事件循环4.JS 中的计时器能做到精确计时吗?为什么? 1.懒加载的原理及实现了解吗 原理:当图片没有到达可视范围内时,图片不加载,当图片一旦…

Mobileye CEO来华:只有能控制住成本的公司,才能活下来

‍作者|德新 编辑|王博 上午9点近一刻,Mobileye CEO Amnon Shuashua步入酒店的会议室。由于Amnon本人是以色列希伯来大学的计算机科学教授,大部分人更习惯称他为「教授」。 时近以色列的新年,这趟教授的中国之行安排十分紧凑。 他率领了一…

遥遥领先的内存函数

目录 ​编辑 函数介绍 1.1 strlen 1.2 strcpy 1.3 strcmp 1.4 strcat 1.5 strstr 2.1 memcpy 2.2 memmove 2.3 memcmp 函数实现 1.1 strlen 1.2 strcpy 1.3 strcmp 1.4 strcat 1.5 strstr 2.1 memcpy 2.3 memcmp 函数介绍 1.1 strlen size_t strlen ( const char *…

SpringBoot整合Redis,基于Jedis实现redis各种操作

前言&#xff08;三步教你学会redis&#xff0c;主打一个实用&#xff09; springboot整合redis步骤&#xff0c;并基于jedis对redis数据库进行相关操作&#xff0c;最后分享非常好用、功能非常全的redis工具类。 第一步&#xff1a;导入maven依赖 <!-- springboot整合re…

小程序代码管理

“微信开发者工具”点击版本管理&#xff0c;然后点击代码管理会打开代码管理网页。 选择对应的项目组。 进来后点击创建项目。 输入git名称&#xff0c;然后选择命名空间&#xff0c;最后创建即可。 在刚才的“微信开发者工具”选择设置&#xff0c;然后添加远程。 输入名称&…

朋友圈大佬都去读研了,这份备考书单我码住了

作者简介&#xff1a; 辭七七&#xff0c;目前大二&#xff0c;正在学习C/C&#xff0c;Java&#xff0c;Python等 作者主页&#xff1a; 七七的个人主页 文章收录专栏&#xff1a; 七七的闲谈 欢迎大家点赞 &#x1f44d; 收藏 ⭐ 加关注哦&#xff01;&#x1f496;&#x1f…

pycharm安装jupyter,用德古拉主题,但是输入行全白了,看不清,怎么办?

问题描述 今天换了以下pycharm主题&#xff0c;但是jupyter界面输入代码行太白了&#xff0c;白到看不清楚这行的字&#xff0c;更不知道写的是什么&#xff0c;写到哪了&#xff0c;这还是挺烦人的&#xff0c;其他都挺正常的。 问题分析 目前来看有两个原因&#xff1a; 1、…

【新版vscode配置自动补全括号】

vscode新版配置自动补全括号方法 新版配置方法(Pylance) ①设置 -> 扩展 -> Pylance -> 将 python.analysis.completeFunctionParens 下方的选项打勾 ②直接在settings.json中添加"python.analysis.completeFunctionParens": true

【Apollo】自动驾驶技术的介绍

阿波罗是百度发布的名为“Apollo&#xff08;阿波罗&#xff09;”的向汽车行业及自动驾驶领域的合作伙伴提供的软件平台。 帮助汽车行业及自动驾驶领域的合作伙伴结合车辆和硬件系统&#xff0c;快速搭建一套属于自己的自动驾驶系统。 百度开放此项计划旨在建立一个以合作为中…

CSS - 快速实现悬浮吸顶,当页面滑动一定距离时固定吸附在顶部(position: sticky)

效果图 如下图所示&#xff0c;利用 position: sticky 属性轻松实现。 示例代码 新建一个 *.html 文件&#xff0c;一键复制运行起来。 <body><section class"content"><div class"item">我是悬浮吸顶区域</div><h1>我是…

AI时代:探索机器学习与深度学习的融合之旅

文章目录 1. 机器学习和深度学习简介1.1 机器学习1.2 深度学习 2. 为什么融合是必要的&#xff1f;2.1 数据增强2.2 模型融合 3. 深入分析&#xff1a;案例研究3.1 传统机器学习方法3.2 深度学习方法3.3 融合方法 4. 未来展望结论 &#x1f389;欢迎来到AIGC人工智能专栏~AI时代…

【Java Web】HTML 标签 总结

目录 1.HTML 2.标签 1. head 标签 1.图标 2.样式居中 2. body 标签 1.注释 &#xff1a; 2.加载图片 3.加载视频 效果 4.区域 效果 5.上下跳转&#xff0c;页面跳转 效果 6.表格 效果 7.有序列表&#xff0c;无序列表 效果 8.登录 效果 9.按钮 10.多选框…

Web之tomcat

[TOC]&#xff08;文章目录&#xff09; 1.程序架构 1.C/S(client/server) 比如&#xff1a;QQ、 微信、 LOL 优点&#xff1a;有一部分代码写在客户端&#xff0c; 用户体验比较好。 缺点&#xff1a; 服务器更新&#xff0c;客户端也要随着更新。 占用资源大。 2. B/S(brows…

【Spatial-Temporal Action Localization(二)】论文阅读2017年

文章目录 1. ActionVLAD: Learning spatio-temporal aggregation for action classification [code](https://github.com/rohitgirdhar/ActionVLAD/)[](https://github.com/rohitgirdhar/ActionVLAD/)摘要和结论引言&#xff1a;针对痛点和贡献相关工作模型框架思考不足之处 2.…

C语言双向链表

文章目录 前言双向链表链表头结点的创建节点尾插与尾删节点头插与头删特定位置插入或删除节点链表节点查找双向链表的销毁 链表的打印 前言 假期时间因为为学校开学考试做准备所以一直没更新博客&#xff0c;今天开始博客会陆续更新。 双向链表 之前我们说过了顺序表和单链表…

嵌入式这个领域会变得过于内卷吗?

今日话题&#xff0c;嵌入式这个领域会变得过于内卷吗&#xff1f;嵌入式开发主要服务于第二产业&#xff0c;尤其是制造业&#xff0c;包括电器、电气、机械、汽车、装备、航空航天等行业的“智能制造”部门&#xff0c;稳定性较强&#xff0c;不像互联网行业那样波动大。因此…