2024高频前端面试题 HTML 和 CSS 篇

JS和ES6 篇: ​​​​​​​2024高频前端面试题 JavaScript 和 ES6 篇-CSDN博客

一 . HTML 篇

1. H5有什么新特性

1)  语义化标签

正确的标签做正确的事情
html 语义化让页面内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;即使在没有样式 CSS 情况下也以一种文档格式显示,并且是容易阅读的;
搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重,利于 SEO;
使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解

常见的语义化标签:

<header></header>  头部(可作为介绍内容或者导航链接栏的容器)

<nav></nav>  导航栏(代表一个含有多个超链接的区域,可做导航条区域)

<section></section>  区块(有语义化的div)

<main></main>  主要区域(定义文档主要内容 )

<article></article>  主要内容(可以表示文章、博客等内容 )

<aside></aside>  侧边栏()

<footer></footer>  底部(定义网页结构的页脚。通常包含该章节作者、版权数据或者与文档相关的链接等

2) 增强型表单

新增表单控件:
  • type为 email 邮箱地址类型

当格式不符合email格式时,提交是不会成功的,会出现提示;只有当格式相符时,提交才会通过

在移动端获焦的时候会切换到英文键盘

  • type为 search 搜索类型

有清空文本的按钮

  • type为 range : 特定范围内的数值选择器
type为number和range时,可以设置属性:min、max、step步数

<input type="range" min="10" max="20" step="1"></input>
新增表单属性:
  • placeholder : 输入框提示信息
  • required : 此项必填,不能为空
  • autofocus : 指定表单获取输入焦点
新增表单事件:
  • oninput 每当input里的输入框的内容发生变化时都会触发此事件
  • oninvalid 当验证不通过时触发此事件

3) 增加video和audio标签 

<!-- 视频标签 --> //src 视频URL  controls 展示控件,如播放按钮

<video src="url" controls="controls"><video> 

  
<!-- 音频标签 --> //src:音频URL loop:音频结束时重新播放  muted:静音播放
  
<audio src="url" loop="loop" muted="muted"><audio> 

4) canvas绘图 

是HTML5新增的元素,可用于通过使用 JavaScript 中的脚本来绘制图形。例如,它可以用于绘制图形、制作照片、创建动画,甚至可以进行实时视频处理或渲染

5) SVG绘图 

SVG是一种基于XML的矢量图形格式,用于在Web和其他环境中显示各种图形;它允许我们编写可缩放的二维图形,并可通过CSS或JavaScript进行操作

6) 地理定位

7) 拖放API

dragstart:事件主体是被拖放元素,在开始拖放被拖放元素时触发。

drag:事件主体是被拖放元素,在正在拖放被拖放元素时触发。

dragend:事件主体是被拖放元素,在整个拖放操作结束时触发。

drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。

dragenter:事件主体是目标元素,在被拖放元素进入某元素时触发。

dragover:事件主体是目标元素,在被拖放在某元素内移动时触发。

dragleave:事件主体是目标元素,在被拖放元素移出目标元素是触发。

8) webSocket 

WebSocket是HTML5提供的一种浏览器与服务器进行全双工通讯的网络技术,属于应用层协议。它基于TCP传输协议,并复用HTTP的握手通道。浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接, 并进行双向数据传输。

WebSocket 的出现就解决了半双工通信的弊端。它最大的特点是:服务器可以向客户端主动推动消息,客户端也可以主动向服务器推送消息。 

9) webWork

10) webStorage 

sessionStorage与localStorage、cookie

共同点:都是保存在浏览器端、且同源的
区别:
1、存储空间:cookie存储空间最小、只有4kb、但是http请求中可以携带cookie,loacalstorage、sessionstorage存储空间5M或更大
2、有效期:cookie不设置时间、关闭浏览器销毁,sessionstorage关闭浏览器(窗口或者标签页)销毁,loacalstorage不手动清除一直保留
3、作用域:sessionStorage不在不同浏览器窗口(标签页)共享、即使同源,cookie、localstorage在所有同源窗口之间共享

应用场景不同:

cookie一般用于存储登录验证信息,sessionId或者token

localStorage常用于存储不易变动的数据,减轻服务器压力

sessionStorage可以用来检测用户是否刷新进入页面

2. 标签上 title 与 alt 属性的区别是什么? 

alt 是给搜索引擎识别,在图像无法显示时的替代文本
title 是关于元素的注释信息,主要是给用户解读
当鼠标放到文字或是图片上时有 title 文字显示。(因为 IE 不标准)在 IE 浏览器中 alt 起到了 title 的作用,变成文字提示。
在定义 img 对象时,将 alt 和 title 属性写全,可以保证在各种浏览器中都能正常使用。

3. 页面导入样式时,使用 link 和@import 有什么区别? 

1.从属关系区别

@import是 CSS 提供的语法规则,只有导入样式表的作用;link是HTML提供的标签,不仅可以加载 CSS 文件,还可以定义 RSS、rel 连接属性等。

2.加载顺序区别

加载页面时,link标签引入的 CSS 被同时加载;@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别

@import是 CSS2.1 才有的语法,故只可在 IE5+ 才能识别;link标签作为 HTML 元素,不存在兼容性问题。

4.DOM可控性区别

link 支持 js 控制 DOM 来改变样式, @import 不可以

4. src 与 href ? 

src 用于替换当前元素,

href 用于在当前文档和引用资源之间确立联系。

src:

src 是 source 的缩写,指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求 src 资源时会将其指向的资源下载并应用到文档内,例如 js 脚本,img 图片和 frame 等元素。

当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。

href: 

href 是 Hypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果在文档中添加。那么浏览器会识别该文档为 css 文件,就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css,而不是使用@import 方式。

5. iframe的优缺点?

优点:

1.iframe能够原封不动的把嵌入的网页展现出来。

2.如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷

3.网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用

4.如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

缺点: 

1.会产生很多页面,不容易管理

2.iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差

3.代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化

4.很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差

5.iframe框架页面会增加服务器的http请求对于大型网站是不可取的

6. title与h1的区别、b与strong的区别、i与em的区别 

1)title属性没有明确意义只表示是个标题,H1则表示层次明确的标题,对页面信息的抓取也有很大的影响

2)b标签只是一个简单加粗标签,strong标签有语义,是起到加重语气的效果

b标签之间的字符都设为粗体,strong标签加强字符的语气都是通过粗体来实现的,而搜索引擎更侧重strong标签

3)i 内容展示为斜体,em表示强调的文本

二 . CSS 篇

1.  CSS 的盒子模型

盒模型都是由四个部分组成的,分别是marginborderpadding content

标准盒模型:

标准盒模型的widthheight属性的范围只包含了content(即添加paddingborder不会改变content的大小,只会相应地增加盒子的大小)。

怪异盒模型:

IE盒模型的widthheight属性的范围包含了borderpaddingcontent。添加padding或者border,会从中减少content内容的占据区域,来为padding和border制造空间,宽高不会相对应的进行增长。

box-sizing: content-box;  转换为 标准盒模型。

box-sizing: border-box;    转换为 怪异盒模型。

2.  选择器优先级

1) 就近原则,后加样式优于前面的样式;

2) 内嵌样式 > 内联样式 > 外联样式;

3) !Important 大于一切样式;

4) !important > 行内1000 > id选择器100 >类选择器 伪类选择器10 (属性选择器) > 标签选择器1(与伪元素选择器) > 继承 或者*(通配符);

3. 简明说一下 CSS link 与 @import 的区别和用法

link 是 XHTML 标签,除了加载CSS外,还可以定义 RSS 等其他事务;@import 属于 CSS 范畴,只能加载 CSS
link 引用 CSS 时,在页面载入时同时加载;@import 需要页面网页完全载入以后加载
link 是 XHTML 标签,无兼容问题;@import 是在 CSS2.1 提出的,低版本的浏览器不支持
link 支持使用 Javascript 控制 DOM 去改变样式;而@import不支持。

4. 行内元素有哪些?块级元素有哪些?区别

行内元素:a、b、span、img、input、select、strong

块级元素:div、ul、li、dl、dt、h1~h5、p

行内块元素: img、input 、td、 button

空元素:br、hr、img、link、meta

块级:

每个块级元素都是独自占一行

高度,宽度,行高,外边距(margin)以及内边距(padding)都可以控制;

元素的宽度如果不设置的话,默认为父元素的宽度(父元素宽度100%);

多个块状元素标签写在一起,默认排列方式为从上至下;

行内:

不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下才会自动换行,其宽度随元素的内容而变化
高宽、行高无效,对外边距(margin)和内边距(padding)仅设置左右方向有效,上下无效
设置行高有效,等同于给父级元素设置行高;
元素的宽度就是它包含的文字或图片的宽度,不可改变;
行内元素中不能放块级元素,a 链接里面不能再放链接;

行内块:

行内块级元素,它既具有块级元素的特点,也有行内元素的特点,它可以自由设置元素宽度和高度,也可以在一行中放置多个行内块级元素。比如:input、img就是行内块级元素,它可设置高宽以及一行多个

总结:

块级元素会独占一行,而行内元素和行内块元素则会在一行内显示

块级元素和行内块元素可设置 width、height 属性,而行内元素设置无效

块级元素的 width 默认为 100%,而行内元素则是根据其自身的内容或子元素来决定其宽度

5. 怎么理解回流跟重绘?什么场景下会触发? 

回流:布局引擎会根据各种样式计算每个盒子在页面上的大小与位置
重绘:当计算好盒模型的位置、大小及其他属性后,浏览器根据每个盒子特性进行绘制
触发条件

1) 回流:
添加或删除可见的DOM元素
元素的位置发生变化
元素的尺寸发生变化(包括外边距、内边框、边框大小、高度和宽度等)
内容发生变化,比如文本变化或图片被另一个不同尺寸的图片所替代
页面一开始渲染的时候(这避免不了)
浏览器的窗口尺寸变化(因为回流是根据视口的大小来计算元素的位置和大小的)
2) 重绘:
颜色的修改
文本方向的修改
阴影的修改

触发回流一定会触发重绘

6. px、em、rem有什么区别

px:

绝对长度单位。相对于显示器屏幕分辨率而言,存在浏览器不兼容问题。

em:

相对长度单位。em值并不是固定的,如果自身设置了font-size则计算自身的,否则em会继承设置了font-size的父级元素的字体大小,存在容易造成字体设置混乱问题。

rem:

相对长度单位。相对于根节点html字体大小来计算。任意浏览器默认字体高都是16px,浏览器兼容性比较好

7. 1rem、1em、1vh、1px,vmin,vmax各自代表的含义? 

rem
rem是全部的长度都相对于根元素元素。通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。
em
子元素字体大小的em是相对于父元素字体大小
元素的width/height/padding/margin用em的话是相对于该元素的font-size
vw/vh
全称是 Viewport Width 和 Viewport Height,视窗的宽度和高度,相当于屏幕宽度和高度的 1%,不过,处理宽度的时候%单位更合适,处理高度的 话 vh 单位更好。
px
px像素(Pixel)。绝对长度单位。像素px是相对于显示器屏幕分辨率而言的。
一般电脑的分辨率有{19201024}等不同的分辨率
19201024 前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素
vmin/vmax: 取视窗高度和宽度的最小值作为基准/取视窗高度和宽度的最大值作为基准。
如果窗口高度1080,宽度1920那么。

1vmin=1080px/100=10.8px      1vmax=1920px/100=19.2px

8. 实现响应式布局的方法

什么是响应式: 一种网络页面设计布局,页面的设计与开发应当根据用户行为以及设备环境(系统平台,屏幕尺寸,屏幕定向等)进行相应的响应和调整

基本原理: 通过媒体查询检测不同的设备屏幕尺寸做处理,为了处理移动端,页面头部必须有meta声明viewport.

1)  媒体查询 + rem + flex布局

缺点:

在响应式布局中,必须通过js来动态控制根元素font-size的大小,也就是说css样式和js代码有一定的耦合性,且必须将改变font-size的代码放在css样式之前。

解决:

默认情况下我们html标签的font-size为16px,我们利用媒体查询,设置在不同设备下的字体大小。

2)媒体查询 + 百分比布局

缺点:

不易计算,布局问题变得复杂

3)媒体查询 + vw + rem布局

给根元素大小设置随着视口变化而变化的vw单位,这样就可以实现动态改变其大小

限制根元素字体大小的最大最小值,配合body加上最大宽度和最小宽度

4)Bootstrap栅格系统 

9. 什么是媒体查询

媒体查询是可以针对不同的媒体类型定义不同的样式,从而实现响应式布局 ,也可以针对不同的分辨率设置不同的样式。当你重置浏览器大小的过程中,页面也会根据浏览器的宽度和高度重新渲染页面

10. Flex弹性布局有哪些属性 

flex-direction : 决定元素是横排还是竖着排

flex-wrap :设置了弹性容器超出时,是否换行

flex-flow :flex-direction 和 flex-wrap 的简写

align-items :设置弹性容器的子元素在纵轴方向的对齐方式

align-content : 多行对齐方式

justify-content :设置弹性容器子元素在横轴方向上的对齐方式

11. 隐藏元素的方法 

display:none不会在页面中占据位置,也不会响应绑定的监听事件。

visibility:hidden,元素在页面中仍占据空间,但是不会响应绑定的监听事件。

opacity:0,将元素的透明度设置为 0,以此来实现元素的隐藏。元素在页面中仍然占据空间,并且能够响应元素绑定的监听事件。

12. display:none和visibility:hidden的区别?

display:none 隐藏对应的元素,在文档布局中不再给它分配空间,它各边的元素会合拢,就当他从来不存在
visibility:hidden 隐藏对应的元素,但是在文档布局中仍保留原来的空间。 

13. rgba和opacity的透明效果有什么不同 

Rgba即可以指定元素颜色也可以指定透明度,opacity只能控制元素透明度不能设置颜色
Rgba透明度是基于实际颜色而opacity是针对元素本身透明度设置,在使用rgba是可以实现元素不同部位透明度不同,而opacity使元素透明度一致
支持rgba的浏览器比支持opacity的更普遍但是在低版本的ie中rgba不被支持而支持opacity

14. display的属性值及作用 

15. display的block,inline和inline-block区别

block: 会独占一行,多个元素会另起一行,可以设置width、height、margin和padding属性;

inline: 元素不会独占一行,设置width、height属性无效。但可以设置水平方向的margin和padding属性,不能设置垂直方向的padding和margin;

inline-block: 将对象设置为inline对象,但对象的内容作为block对象呈现,之后的内联对象会被排列在同一行内。

16. position的值, relative和absolute分别是相对于谁进行定位的 

relative相对定位,相对于自己本身在正常文档流中的位置进行定位。
absolute生成绝对定位,相对于最近一级定位不为static的父元素进行定位。最终找到body
fixed: (老版本IE不支持)生成绝对定位,相对于浏览器窗口或者frame进行定位。
static: 默认值,没有定位,元素出现在正常的文档流中。
sticky: 生成粘性定位的元素,容器的位置根据正常文档流计算得出。

17. 清除浮动 

清除浮动主要是为了解决,父元素没有设置高度时,因为子级元素浮动引起的内部高度为0的问题

方法:

  • 给需要清除浮动的元素设置样式:clear:both
  • 父元素结束标签之前插入清除浮动的块级元素
  • 利用伪元素(clearfix).clearfix :: after{ clear:both }
  • 给父元素构建一个BFC,比如overflow为hidden,display为flex

额外标签法: 给谁清除浮动,就在其后额外添加一个空白标签

优点: 通俗易懂,书写方便。(不推荐使用)
缺点: 添加许多无意义的标签,结构化比较差。
父级添加overflow方法: 可以通过触发BFC的方式,实现清楚浮动效果。

优点: 简单、代码少、浏览器支持好

缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。

使用after伪元素清除浮动: :after方式为空元素的升级版,好处是不用单独加标签了。

优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点: 由于IE6-7不支持

18. 什么是 BFC 

BFC 也就是常说的块格式化上下文,这是一个独立的渲染区域,规定了内部如何布局, 让处于 BFC 内部的元素和外部的元素相互隔离,并且这个区域的子元素不会影响到外面的元素,其中比较重要的布局规则有内部 box 垂直放置,计算 BFC 的高度的时候,浮动元素也参与计算。

触发条件:

根元素,即HTML元素
浮动元素:float值为left、right
overflow值不为 visible,为 auto、scroll、hidden
display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
position的值为absolute或fixed

应用场景:

防止margin重叠

清除内部浮动

自适应多栏布局

19. 可继承属性和不可继承属性 

1) 可继承

font-family:字体系列

font-weight:字体的粗细

font-size:字体的大小

text-indent:文本缩进

text-align:文本水平对齐

line-height:行高

color:文本颜色

visibility:控制元素显示隐藏

cursor:光标显示为何种形态

2) 不可继承

盒子模型属性:width、height、border、margin、padding

display:规定元素应该生成的框的类型

vertical-align:垂直文本对齐

background:背景属性

定位属性:float、position

20. 如何实现盒子的水平垂直居中?

1) felx布局

<div class="box">
	<div class="box-content"></div>
</div>

方式一
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}

方式二
.box {
  display: flex;
  .box-content {
    margin: auto;    //垂直水平居中
    margin: auto 10px;    	//垂直居中
    margin: 10px auto;    	//水平居中
  }
}

2) 定位 + 偏移


<div class="box">
	<div class="box-content"></div>
</div>

.box {
  position: relative;

  .box-content {
  	width: 200px;
    height: 200px;
    
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)  //(不知道盒子宽高)偏移自身的宽度和高度的 -50%
      
    transform: translate(-100px, -100px)  //(知道盒子宽高)偏移自身的宽度和高度的一半
  }
}

21. 如果要做优化,CSS提高性能的方法有哪些? 

内联首屏关键CSS

避免使用css表达式

异步加载CSS

资源压缩

合理使用选择器

减少使用昂贵的属性 如 box-shadow/border-radius/filter/透明度/:nth-child 等

不要使用@import

22. pageX,clientX,screenX,offsetX区别 

pageX/Y: 对于整个页面来说,包括了被卷去的body部分的长度

clientX/Y: 点击位置距离当前body可视区域的x,y坐标

screenX/Y: 点击位置距离当前电脑屏幕的x,y坐标

offsetX/Y: 相对于带有定位的父盒子的x,y坐标

23. base64的原理及优缺点? 

优点可以加密,减少了HTTTP请求

缺点是需要消耗CPU进行编解码

24. li 与 li 之间有看不见的空白间隙是什么原因引起来的,怎么解决 

原因:

浏览器的默认行为是把 inline 元素间的空白字符(空格换行 tab)渲染成一个空格,也就是我们上面的代码<li>换行后会产生换行字符,而它会变成一个空格,当然空格就占用一个字符的宽度

解决方案: 消除间隔

ul {
  letter-spacing: -5px;
}

ul li {
  letter-spacing: normal;
}

25. 画一个三角形

.box {
    width: 0;
    height: 0;
    border-width: 100px;
    border-style: solid;
    border-color: transparent #0099CC transparent transparent;
    transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="box"></div>

26. 画一条0.5px的直线?

考查的是css3的transform
height: 1px;
transform: scale(0.5);

27. CSS3动画有哪些?

  • transition 实现渐变动画 transition动画详解

  • transform 转变动画 transform属性详解

  • animation 实现自定义动画 animation详解

28. CSS3渐变?

CSS3 定义了两种类型的渐变(gradients):

线性渐变 - 向下/向上/向左/向右/对角方向
径向渐变 -(Radial Gradients)- 由它们的中心定义


线性渐变:

语法:background-image:linear-gradientdirection,color-stop1,color-stop2,……);
direction:渐变方向/角度,可选(45deg,to bottom,to top,to right,to left,to left top…)
color-stop:选择颜色rgba可以设置透明度,也可以设置色标点区域 例:rgba(255,255,255,0.3) 20%
径向渐变:

语法:background-image: radial-gradient(shape size at position, start-color, …, last-color);
shape 参数定义了形状。它可以是值 circle 或 ellipse。其中,circle 表示圆形,ellipse 表示椭圆形。默认值是 ellipse。
size:主要用来确定径向渐变的结束形状大小。如果省略了,其默认值为“farthest-corner”
at position起点:中心点的位置,可以是关键字(水平方向–left,center,right, 垂直方向–top,center,bottom),具体数值或百分比。

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

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

相关文章

Springboot实现缓存预热

很多时候我们代码中使用缓存时都是先判断缓存中没有数据我们再读取数据库而有则直接使用缓存数据&#xff0c;而在系统冷启动(当系统重启或新启动时&#xff0c;缓存是空的&#xff0c;这被称为冷启动)时&#xff0c;我们毫无意外都是直接获取数据库的内容&#xff0c;这时候缓…

Pytorch Geometric 将表格数据集(CSV 文件)转换为图形数据集

导 读 如今图数据集正在以惊人的速度出现&#xff0c;所有化学分子、社交网络和推荐系统主要以图数据结构的形式存储数据 有需要的朋友关注公众号【小Z的科研日常】&#xff0c;获取更多内容。 01、如何转换CSV文件至图形数据结构 确定图形数据所需的基本信息 节点&#xff08;…

ViT的若干细节

之前只看了ViT的大概结构&#xff0c;具体的模型细节和代码实现知之甚少。随着ViT逐渐成为CV领域的backbone&#xff0c;有必要重新审视下。 patch -> token 为了将图片处理成序列格式&#xff0c;很自然地想到将图片分割成一个个patch&#xff0c;再把patch处理成token。 …

Go-知识struct

Go-知识struct 1. struct 的定义1.1 定义字段1.2 定义方法 2. struct的复用3. 方法受体4. 字段标签4.1 Tag是Struct的一部分4.2 Tag 的约定4.3 Tag 的获取 githupio地址&#xff1a;https://a18792721831.github.io/ 1. struct 的定义 Go 语言的struct与Java中的class类似&am…

数据结构c版(2)——二叉树

本章我们来了解一下二叉树这一概念。 目录 1.树概念及结构 1.1树的概念​​​​​​​ 1.2 树的特点&#xff1a; 1.3 树的相关概念 1.4 树的表示​​​​​​​ 1.5 树在实际中的运用&#xff08;表示文件系统的目录树结构&#xff09; 2.二叉树概念及结构 2.1概念 …

华为云命令行工具KooCLI—高效云端管理的秘诀

做运维多年&#xff0c;公司从传统运维改为云上。刚一接触时&#xff0c;确实因为要学习很多云知识而烦恼。每次想要执行某个操作时&#xff0c;都要先登录到云平台&#xff0c;浏览界面&#xff0c;寻找正确的按钮。这样不仅浪费时间&#xff0c;还经常出错。直到有一天&#…

【深度学习笔记】计算机视觉——锚框

锚框 目标检测算法通常会在输入图像中采样大量的区域&#xff0c;然后判断这些区域中是否包含我们感兴趣的目标&#xff0c;并调整区域边界从而更准确地预测目标的真实边界框&#xff08;ground-truth bounding box&#xff09;。 不同的模型使用的区域采样方法可能不同。 这里…

STM32F103ZET6移植FreeRTOS

FreeRTOS是一款免费开源的轻量级操作系统 一、获取源码 方式一、官网&#xff1a;www.freertos.org 方式二&#xff08;推荐&#xff09;、托管网址&#xff1a; FreeRTOS Real Time Kernel (RTOS) - Browse /FreeRTOS at SourceForge.net 找到对应的版本直接下载.ZIP文件…

2023年09月CCF-GESP编程能力等级认证Scratch图形化编程三级真题解析

本文收录于专栏《Scratch等级认证CCF-GESP真题解析》,专栏总目录・点这里 一、单选题(共15题,共30分) 第1题 我国第一台大型通用电子计算机使用的逻辑部件是( )。 A:集成电路 B:大规模集成电路 C:晶体管 D:电子管 答案:D 第2题 下列流程图的输出结果是?( ) …

【自然语言处理】BitNet b1.58:1bit LLM时代

论文地址&#xff1a;https://arxiv.org/pdf/2402.17764.pdf 相关博客 【自然语言处理】BitNet b1.58&#xff1a;1bit LLM时代 【自然语言处理】【长文本处理】RMT&#xff1a;能处理长度超过一百万token的Transformer 【自然语言处理】【大模型】MPT模型结构源码解析(单机版)…

排序(1)——直接插入排序+冒泡排序

目录 1 排序的概念及其应用 1.1 排序的概念 1.2 排序的应用 1.3 常见的排序算法 2 直接插入排序 2.1 基本思想 2.2 基本思路 2.3 代码实现 2.4 时间复杂度 3 冒泡排序&#xff08;回顾&#xff09; 3.1 思路分析 3.2 时间复杂度 4 比较 1 排序的概念及其应用 1.…

STM32 (1)

1.基本信息 stm32是由ST公司生产的一种32位微控制器&#xff08;单片机&#xff09;。 1.1 各种型号 stm32是32位单片机的总称&#xff0c;有多种不同的系列。 32即用32个比特位表示一个地址&#xff0c;寻址范围&#xff1a;0x00000000 --0xffffffff (4GB) 1.2 存储密度 …

「优选算法刷题」:在每个树行中找最大值

一、题目 给定一棵二叉树的根节点 root &#xff0c;请找出该二叉树中每一层的最大值。 示例1&#xff1a; 输入: root [1,3,2,5,3,null,9] 输出: [1,3,9]示例2&#xff1a; 输入: root [1,2,3] 输出: [1,3]提示&#xff1a; 二叉树的节点个数的范围是 [0,104]-231 < N…

Flink:Temporal Table Function(时态表函数)和 Temporal Join

博主历时三年精心创作的《大数据平台架构与原型实现&#xff1a;数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行&#xff0c;点击《重磅推荐&#xff1a;建大数据平台太难了&#xff01;给我发个工程原型吧&#xff01;》了解图书详情&#xff0c;…

第十四届蓝桥杯大赛B组 JAVA 蜗牛 (递归剪枝)

题目描述&#xff1a; 这天&#xff0c;一只蜗牛来到了二维坐标系的原点。 在 x 轴上长有 n 根竹竿。它们平行于 y 轴&#xff0c;底部纵坐标为 0&#xff0c;横坐标分别为 x1, x2, …, xn。竹竿的高度均为无限高&#xff0c;宽度可忽略。蜗牛想要从原点走到第 n 个竹竿的底部也…

Ubuntu20.04使用XRDP安装原生远程桌面

Ubuntu20.04使用XRDP安装原生远程桌面 1.安装gnome桌面 # 如果没有更新过源缓存&#xff0c;先更新一下 sudo apt update# 安装gnome桌面 # 可选参数 --no-install-recommends&#xff0c;不安装推荐组件&#xff0c;减少安装时间和空间占用 sudo apt install ubuntu-desktop…

Docker基础教程 - 1 Docker简介

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 1 Docker简介 Docker是一个强大的容器化平台&#xff0c;让你能够更轻松地构建、部署和运行应用程序。 下面我们来学习 Docker。 1.1 Docker是什么 1 现在遇到的问题 每次部署一台服务器&…

Apache JMeter 5.6.3 安装

源码下载 curl -O https://dlcdn.apache.org//jmeter/source/apache-jmeter-5.6.3_src.zipJMeter 下载 curl -O https://dlcdn.apache.org//jmeter/binaries/apache-jmeter-5.6.3.zipjmeter.properties 里 设置中文 windows系统上解压&#xff0c;双击jmeter.bat 启动 执行参…

618快递准点到达,别忘了感谢它!

进入6月以来&#xff0c;全国快递日均业务量飞速上涨。 虽然618大促是电商的主场&#xff0c;但作为不可或缺的物流环节&#xff0c;为了这场年中大考&#xff0c;快递企业在此期间也使尽浑身解数&#xff0c;竞相比拼配送速度。那么&#xff0c;为了更快的时效&#xff0c;快递…

【基于Matlab GUI的语音降噪系统设计】

客户不要了&#xff0c;挂网上吧&#xff0c;有需要自行下载~ 赚点辛苦费 ** 功能实现: ** 1、导入音频文件/录入音频&#xff0c;能实现播放功能。 2、对导入/录入的音频信号进行时域和频域分析&#xff0c;并制图。 3、可在导入/录入的音频信号上加入噪声&#xff0c;并能够播…