2024 高级前端面试题之 HTML 「精选篇」

news2024/9/28 7:19:34

该内容主要整理关于 HTML 的相关面试题,其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。

HTML模块精选篇

  • 1. 如何理解HTML语义化
  • 2. H5的新特性有哪些
  • 3. 说一下 HTML5 Drag API
  • 4. iframe有那些缺点
  • 5. 如何实现浏览器内多个标签页之间的通信
  • 6. 简述一下src与href的区别
  • 7. 网页制作会用到的图片格式有哪些
  • 8. script标签中defer和async的区别
  • 9. 说一下 web worker
  • 10. 用一个div模拟textarea的实现
  • 11. 介绍下资源预加载 prefetch/preload
  • 12. 介绍下 viewport
  • 13. 如何解决a标点击后hover事件失效的问题?
  • 14. 点击一个input依次触发的事件
  • 15. 有写过原生的自定义事件吗
  • 16. addEventListener和attachEvent的区别?
  • 17. addEventListener函数的第三个参数
  • 18. DOM事件流是什么?
  • 19. 冒泡和捕获的具体过程
  • 20. 关于一些兼容性
  • 21. 如何阻止冒泡和默认事件(兼容写法)
  • 22. 所有的事件都有冒泡吗?
  • 23. 拖拽有哪些知识点
  • 24. offset、scroll、client的区别
  • 25. target="_blank"有哪些问题?
  • 26. children以及childNodes的区别
  • 27. HTMLCollection和NodeList的区别


1. 如何理解HTML语义化

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

2. H5的新特性有哪些

  • 拖放(Drag)API【🔎下面有详细讲解 => 3】

  • 画布(Canvas) AP

  • 地理(Geolocation) API

  • 音频、视频API(audio , video)

  • localStoragesessionStorage

  • WebWorker, WebSocket【🔎下面有详细讲解 => 2】

  • 新的一套标签 header , nav , footer , aside , article , section

  • web worker 是运行在浏览器后台的js程序,他不影响主程序的运行,是另开的一个js线程,可以用这个线程执行复杂的数据操作,然后把操作结果通过 postMessage 传递给主线程,这样在进行复杂且耗时的操作时就不会阻塞主线程了

  • HTML5 History两个新增的API:history.pushStatehistory.replaceState,两个 API 都会操作浏览器的历史记录,而不会引起页面的刷新

    Hash 就是 url 中看到 # ,我们需要一个根据监听哈希变化触发的事件( hashchange) 事件。我们用 window.location 处理哈希的改变时不会重新渲染页面,而是当作新页面加到历史记录中,这样我们跳转页面就可以在 hashchange 事件中注册 ajax 从而改变页面内容。 可以为 hash 的改变添加监听事件:

    window.addEventListener("hashchange", funcRef, false
    
  • WebSocket 使用 wswss 协议,WebSocket 是一个持久化的协议,相对于HTTP这种非持久的协议来说。WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻,相互推送信息。

    WebSocket 并不限于以 Ajax (或 XHR )方式通信,因为 Ajax 技术需要客户端发起请求,而 WebSocket 服务器和客户端可以彼此相互推送信息;XHR 受到域的限制,而 WebSocket 允许跨域通信。

    // 创建一个Socket实例
    var socket = new WebSocket('ws://localhost:8080');
    // 打开Socket
    socket.onopen = function(event) {
      // 发送一个初始化消息
      socket.send('I am the client and I\'m listening!');
      // 监听消息
      socket.onmessage = function(event) {
        console.log('Client received a message',event);
      };
      // 监听Socket的关闭
      socket.onclose = function(event) {
        console.log('Client notified socket has closed',event);
      };
    }
    // 关闭Socket....
    // socket.close()
    

3. 说一下 HTML5 Drag API

  • 被拖动元素可以触发的事件
    • dragstart:在开始拖放被拖放元素时触发(拖拽开始)
    • darg:在正在拖放被拖放元素时触发(拖拽事件)
    • dragend:在整个拖放操作结束时触(拖拽结束)
  • 拖动到的目标对象可以触发的事件
    • dragenter:在被拖放元素进入某元素时触发(拖拽进入)
    • dragover:在被拖放在某元素内移动时触发(悬浮事件)
    • dragleave:在被拖放元素移出目标元素时触发(拖拽离开)
    • drop:在目标元素停止拖拽时触发(丢弃事件)【需要在dragover中调用e.preventDefault();才能触发drop

4. iframe有那些缺点

  • iframe 会阻塞主页面的onLoad事件;
  • 搜索引擎的检索程序无法解读这种页面,不利于SEO;
  • iframe 和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载;
  • 使用 iframe 之前需要考虑这两个缺点。如果需要使用 iframe,最好是通过j,动态给 iframe 添加 src 属性。

5. 如何实现浏览器内多个标签页之间的通信

  1. 使用 WebSocket 可以实现多个标签页之间的通信
  2. 调用 localStorage
    • 在一个标签页里面使用 localStorage.setItem(key,value) 添加(修改、删除)内容
    • 在另一个标签页里面监听 storage 事件
    • 即可得到 localstorge 存储的值,实现不同标签页之间的通信
  3. 调用 cookie + setInterval()

    将要传递的信息存储在 cookie 中,每隔一定时间读取 cookie 信息,即可随时获取要传递的信息。

具体demo见【】

6. 简述一下src与href的区别

  • src 用于替换当前元素,href 用于在当前文档和引用资源之间确立联系。

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

    <script src =”index.js”></script
    

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

  • hrefHypertext Reference 的缩写,指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,如果我们在文档中添加

    <link href=”common.css” rel=”stylesheet”/>
    

    那么浏览器会识别该文档为css文件,就会并行下载资源并且不会停止对当前文档的处理。这也是为什么建议使用 link 方式来加载css,而不是使用 @import 方式。

7. 网页制作会用到的图片格式有哪些

png-8png-24jpeggifsvgWebP(🌟)

WebpWebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。
在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%

8. script标签中defer和async的区别

  • script:会阻碍 HTML 解析,只有下载好并执行完脚本才会继续解析 HTML
  • defer:浏览器指示脚本在文档被解析后执行,script 被异步加载后并不会立刻执行,而是等待文档被解析完毕后执行。
  • async:同样是异步加载脚本,区别是脚本加载完毕后立即执行,这导致async 属性下的脚本是乱序的,对于 script 有先后依赖关系的情况,并不适用

在这里插入图片描述

蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析

9. 说一下 web worker

HTML 页面中,如果在执行脚本时,页面的状态是不可响应式的,直到脚本执行完成后, 页面才变成可响应。web worker 是运行在后台的 js,独立于其他脚本,不会影响页面你的性能。并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候,就不会阻塞主线程了

如何创建 web worker

10. 用一个div模拟textarea的实现

div 添加 contenteditable=true 即可

11. 介绍下资源预加载 prefetch/preload

都是告知浏览器提前加载文件(图片、视频、js、css等),但执行上是有区别的。

  • prefetch:利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。

    <link href="/js/xx.js" rel="prefetch">
    
  • preload:可以指明哪些资源是在页面加载完成后即刻需要的,浏览器在主渲染机制介入前就进行预加载,这一机制使得资源可以更早的得到加载并可用,且更不易阻塞页面的初步渲染,进而提升性能。

    <link href="/js/xxx.js" rel="preload" as="script">
    

    需要 as 指定资源类型目前可用的属性类型:

    • audio:音频
    • video: 视频文件。
    • document:一个将要被嵌入到 <frame><iframe> 内部的HTML文档。
    • embed: 一个将要被嵌入到 <embed> 元素内部的资源。
    • fetch: 那些将要通过fetch和XHR请求来获取的资源,比如一个ArrayBuffer或JSON文件。
    • font: 字体文件。
    • image: 图片文件。
    • object: 一个将会被嵌入到 <embed> 元素内的文件。
    • script: JavaScript文件。
    • style: 样式表。
    • track: WebVTT文件
    • worker: 一个JavaScript的 web workershared worker

12. 介绍下 viewport

<meta name="viewport" content="width=500, initial-scale=1">
  • width:页面宽度,可以取值具体的数字,也可以是 device-width,表示跟设备宽度相等。
  • height:页面高度,可以取值具体的数字,也可以是 device-height,表示跟设备高度相等。
  • initial-scale:初始缩放比例。
  • minimum-scale:最小缩放比例。
  • maximum-scale:最大缩放比例。
  • user-scalable:是否允许用户缩放。

13. 如何解决a标点击后hover事件失效的问题?

改变 a 标签 css 属性的排列顺序

只需要记住LoVe HAte原则就可以了(爱恨原则)

link → visited → hover → activ
// 注意各个阶段的含义
- a:link:未访问时的样式,一般省略成a
- a:visited:已经访问后的样式
- a:hover:鼠标移上去时的样式
- a:active:鼠标按下时的样式

14. 点击一个input依次触发的事件

mouseenter -> mousedown -> focus -> click

const text = document.getElementById('text');
text.onclick = function (e) {
  console.log('onclick')
}
text.onfocus = function (e) {
  console.log('onfocus')
}
text.onmousedown = function (e) {
  console.log('onmousedown')
}
text.onmouseenter = function (e) {
  console.log('onmouseenter')
}

答案:

'onmouseenter'
'onmousedown'
'onfocus'
'onclick'

15. 有写过原生的自定义事件吗

创建自定义事件

原生自定义事件有三种写法:

  1. 使用 Event

    const myEvent = new Event('event_name')
    
  2. 使用 customEvent (可以传参数)

    const myEvent = new CustomEvent('event_name', {
    	detail: {
    		// 将需要传递的参数放到这里
    		// 可以在监听的回调函数中获取到:event.detail
    	}
    })
    
  3. 使用 document.createEvent('CustomEvent')initCustomEvent()

    // createEvent:创建一个事件
    const myEvent = document.createEvent('CustomEvent'); // 注意这里是为'CustomEvent
    
    // initEvent:初始化一个事件
    myEvent.initEvent(
    	// initEvent可以指定3个参数:
    	// 1. event_name: 事件名称
    	// 2. canBubble: 是否冒泡
    	// 3. cancelable: 是否可以取消默认行为
    )
    

事件的监听

自定义事件的监听其实和普通事件的一样,使用 addEventListener 来监听:

button.addEventListener('event_name', function (e) {}

事件的触发

触发自定义事件使用 dispatchEvent(myEvent)

注意⚠️ 这里的参数是要自定义事件的对象(也就是myCustomEvent),而不是自定义事件的名称('myEvent')

👇 看案例

const myCustomEvent = document.createEvent('CustomEvent');
myCustomEvent.initEvent('myEvent', true, true)

const btn = document.getElementsByTagName('button')[0]
btn.addEventListener('myEvent', function (e) {
  console.log(e)
  console.log(e.detail)
})
setTimeout(() => {
  btn.dispatchEvent(myCustomEvent)
}, 2000)

16. addEventListener和attachEvent的区别?

详细可见文章:一文彻底搞懂JS的事件流以及事件模型

  • addEventListener 是标准浏览器中的用法,attachEvent 是IE8以下
  • addEventListener 可有冒泡,可有捕获;attachEvent 只有冒泡,没有捕获。
  • addEventListener 事件名不带onattachEventon
  • addEventListener 回调函数中的 this 指向当前元素,attachEvent 指向 window

17. addEventListener函数的第三个参数

详细可见文章:一文彻底搞懂JS的事件流以及事件模型

第三个参数涉及到冒泡和捕获,是 true 时为捕获,是 false 则为冒泡。

也可以是一个对象 {passive: true},针对的是Safari浏览器,禁止/开启使用滚动的时候要用到。

18. DOM事件流是什么?

详细可见文章:一文彻底搞懂JS的事件流以及事件模型

事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程就叫做DOM事件流

DOM事件流分为三个阶段:

  1. 捕获阶段:事件从window发出,自上而下向目标节点传播的阶段

  2. 目标阶段:真正的目标阶段正在处理事件的阶段

  3. 冒泡阶段:事件从目标节点自下而上向window传播的阶段

    (注意⚠️:JS代码只能执行捕获或者冒泡其中一个阶段,要么是捕获要么是冒泡)

19. 冒泡和捕获的具体过程

详细可见文章:一文彻底搞懂JS的事件流以及事件模型

冒泡指的是:当给某个目标元素绑定了事件之后,这个事件会依次在它的父级元素中被触发(当然前提是这个父级元素也有这个同名称的事件,比如子元素和父元素都绑定了click事件就触发父元素的click)。

捕获则是从上层向下层传递,与冒泡相反。

【非常好记,你就想想水底有一个泡泡从下面往上传的,所以是冒泡】

👇 看案例

<!-- 会依次执行 button li ul -->
<ul onclick="alert('ul')">
  <li onclick="alert('li')">
    <button onclick="alert('button')">点击</button>
  </li>
</ul>
<script>
  window.addEventListener('click', function (e) {
    alert('window')
  },false)
  document.addEventListener('click', function (e) {
    alert('document')
  },true)
</script>

结果:
冒泡结果:button > li > ul > document > window
捕获结果:window > document > ul > li > button

20. 关于一些兼容性

  1. event 的兼容性

    • 其它浏览器 window.event
    • 火狐下没有 window.event,所以用传入的参数ev代替
    • 兼容写法:const oEvent = ev || window.event
  2. 事件源的兼容性

    • 其它浏览器 event.target
    • IE下为 event.srcElement
    • 兼容写法:const target = event.target || event.srcElement
  3. 阻止事件冒泡

    • 其它浏览器 event.stopPropagation()
    • IE下为 window.event.cancelBubble = true
  4. 阻止默认事件

    • 其它浏览器 e.preventDefault()
    • IE下为 window.event.returnValue = false

21. 如何阻止冒泡和默认事件(兼容写法)

阻止冒泡:

// 阻止冒泡
function stopBubble (e) {
  if (e && e.stopPropagation) {
    e.stopPropagation();
  } else {
    // 兼容 IE
    window.event.cancelBubble = true;
  }
}
// 阻止默认事件
function stopDefault (e) {
  if (e && e.preventDefault) {
    e.preventDefault();
  } else {
    // 兼容 IE
    window.event.returnValue = false;
    return false;
  }
}

22. 所有的事件都有冒泡吗?

并不是所有的事件都有冒泡的。

以下事件就没有:

  • onblur
  • onfocus
  • onmouseenter
  • onmouseleave

23. 拖拽有哪些知识点

  1. 可以通过给标签设置 draggable 属性来实现元素的拖拽,imga 标签默认是可以拖拽的
  2. 拖拽者身上的三个事件:ondragstartondragondragend
  3. 拖拽要放到的元素上的四个事件:ondragenterondragoverondragleaveondrap

24. offset、scroll、client的区别

offset

  • offsetWidth 是指div的宽度(包括div的边框)
  • offsetHeight 是指div的高度(包括div的边框)
  • offsetLeft 是指div到整个页面左边框的距离(不包括div的边框)
  • offsetTop 是指div到整个页面上边框的距离(不包括div的边框)

scroll

  • scrollTop 是指可视区顶部边框与整个页面上部边框的看不到的区域。
  • scrollLeft 是指可视区左边边框与整个页面左边边框的看不到的区域。
  • scrollWidth 是指左边看不到的区域加可视区加右边看不到的区域即整个页面的宽度(包括边框)
  • scrollHeight 是指上边看不到的区域加可视区加右边看不到的区域即整个页面的高度(包括边框)

client

  • oEvent.clientX 是指鼠标到可视区左边框的距离。
  • oEvent.clientY 是指鼠标到可视区上边框的距离。
  • clientWidth 是指可视区的宽度。
  • clientHeight 是指可视区的高度。
  • clientLeft 获取左边框的宽度。
  • clientTop 获取上边框的宽度。

25. target="_blank"有哪些问题?

存在问题:

  1. 安全隐患:新打开的窗口可以通过 window.opener 获取到来源页面的 window 对象即使跨域也可以。某些属性的访问被拦截,是因为跨域安全策略的限制。 但是,比如修改window.opener.location 的值,指向另外一个地址,这样新窗口有可能会把原来的网页地址改了并进行页面伪装来欺骗用户。
  2. 新打开的窗口与原页面窗口共用一个进程,若是新页面有性能不好的代码也会影响原页面。

解决方案:

  1. 尽量不用 target="_blank"
  2. 如果一定要用,需要加上 rel="noopener"或者 rel="noreferrer"。这样新窗口的 window.openner 就是null 了,而且会让新窗口运行在独立的进程里,不会拖累原来页面的进程。(不过,有些浏览器对性能做了优化,即使不加这个属性,新窗口也会在独立进程打开。)

26. children以及childNodes的区别

  • children 只获取该节点下的所有 element 节点
  • childNodes 不仅仅获取 element 节点还会获取元素标签中的空白节点
  • firstElementChild 只获取该节点下的第一个 element 节点
  • firstChild 会获取空白节点

27. HTMLCollection和NodeList的区别

NodeElement

  • DOM 是一棵树,所有节点都是 Node
  • NodeElement 的基类
  • Element 是其他 HTML 元素的基类,如 HTMLDivElementHTMLImageElement

👇 结构图
在这里插入图片描述

  • HTMLCollectionElement 的集合
  • NodeListNode 的集合,包含 TextComment 节点
  • ele.children 返回 HTMLCollection 集合
  • ele.childNodes 返回 NodeList 集合
  • HTMLCollectionNodeList 是类数组
    • 使用 Array.from(list) 转化数组
    • 使用 Array.prototype.slice.call(list) 转化数组
    • 使用 [...list] 转化数组
<p id="p1"><b>node</b> vs <em>element</em><!--注释--></p>

<script>
  const p1 = document.getElementById('p1')
  // console.log(p1.children) // HTMLCollection
  console.log(p1.childNodes) // NodeList

  // p1.tagName // Element类型一定有tagName
  // p1.nodeType/nodeName // node节点

  class Node {}

  // document
  class Document extends Node {}
  class DocumentFragment extends Node {}
  
  // 文本和注释
  class CharacterData extends Node {}
  class Comment extends CharacterData {}
  class Text extends CharacterData {}

  // elem
  class Element extends Node {}
  class HTMLElement extends Element {}
  class HTMLDivElement extends HTMLElement {}
  class HTMLInputElement extends HTMLElement {}
  // ...
</script>

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

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

相关文章

嵌入式培训机构四个月实训课程笔记(完整版)-Linux ARM平台编程第二天-ARM汇编(物联技术666)

链接&#xff1a;https://pan.baidu.com/s/1bG0tuVaACATvjLwD05j1FQ?pwd1688 提取码&#xff1a;1688 上午&#xff1a;ARM编程模型 下午&#xff1a;常用ARM指令 教学内容&#xff1a; 1、ARM数据类型 字节&#xff08;Byte&#xff09;&#xff1a;在ARM体系结构及常见的…

掌握大语言模型技术: 推理优化

掌握大语言模型技术_推理优化 堆叠 Transformer 层来创建大型模型可以带来更好的准确性、少样本学习能力&#xff0c;甚至在各种语言任务上具有接近人类的涌现能力。 这些基础模型的训练成本很高&#xff0c;并且在推理过程中可能会占用大量内存和计算资源&#xff08;经常性成…

数据结构(队列)

一.什么是队列 1.队列定义 队列是一种特殊的线性表&#xff0c;特殊之处在于他只允许在表的前端(front)进行删除操作&#xff0c;而在表的后端(rear)进行插入操作。和栈一样&#xff0c;队列也是一种操作受限制的线性表。进行插入操作的一端称为队尾&#xff0c;进行删除操作的…

微服务理解篇

一 :架构演变 1 单体架构: 简单理解为一个服务涵盖所有需求功能2 垂直架构: 按照业务功能将单体架构拆分成小模块服务, 如:订单系统,用户系统,商品系统 ##缺点 引入分布式事务,分布式锁等,优点:模块解耦## 垂直拆分:根据业务层级拆分,比如商城的订单系统,用户系统,商品系统…

搭建属于自己本地的网站

1.关闭selinux 1.1 为什么关闭&#xff1f; 如果selinux不关闭的话&#xff0c;修改ssh端口等策略会不生效&#xff0c; 比如向将ssh端口修改为22011&#xff0c;修改后重启sshd服务&#xff0c;端口未修改&#xff0c;此时需要执行setendforce 0 命令&#xff0c;然后再次重…

leetcode hot100组合

在本题中&#xff0c;是要求返回[1,n]这个数组的长度为k的组合。涉及到排列、组合、棋盘、分割等问题的时候&#xff0c;要考虑利用回溯来进行解决。 回溯和递归类似&#xff0c;也分为三步进行分析 确定递归函数的返回值和参数&#xff1a;一般来说返回值都是void&#xff0c…

【前端web入门第一天】02 HTML图片标签 超链接标签

文章目录: 1.HTML图片标签 1.1 图像标签-基本使用1.2 图像标签-属性1.3 路径 1.3.1 相对路径 1.3.2 绝对路径 2.超链接标签 3.音频标签 4.视频标签 1.HTML图片标签 1.1 图像标签-基本使用 作用:在网页中插入图片。 <img src"图片的URL">src用于指定图像…

【2024】新建mysql数据库,如何选择字符集和排序规则

如何使用 Navicat 新建 MySQL 数据库&#xff0c;并选择字符集与排序规则 如何使用 Navicat 新建 MySQL 数据库并选择字符集与排序规则1. 开始之前2. 新建数据库步骤 1: 打开 Navicat步骤 2: 创建新数据库步骤 3: 填写数据库名称 常见的字符集和排序规则及其选择场景1. 字符集&…

使用__missing__方法实现映射表多格式主键

背景介绍 在python中&#xff0c;我们经常使用字典类型实现映射表的功能&#xff0c;通过字典的主键遍历获取对应的值&#xff0c;从而实现从一个值映射到另一个值的功能 但是这种映射是十分硬性的&#xff0c;例如&#xff0c;假如我的映射表为{‘1’&#xff1a;one&#x…

串口控制器

1. 串口通信 1.1 什么是串口 是一种通信方式&#xff08;通信协议&#xff09; 主要通过串行方式完成设备间的数据通信 通信领域中使用最频繁&#xff0c;实现方式最简单的一种通信方式 串口: 全双工串行异步通信协议 串口3线: RX 接收 TX 发送 GND 共地信号 参考地 …

纳斯达克VS路透社MIFI大屏直投-大舍传媒

纳斯达克VS路透社MIFI大屏直投-大舍传媒 引言 在数字时代的今天&#xff0c;大屏投放成为一种广泛应用的营销手段和传媒方式。纳斯达克大屏和路透社MIFI大屏作为两个重要的投放平台&#xff0c;为企业和机构提供了广告和宣传的机会。 纳斯达克大屏的魅力 纳斯达克大屏位于纽…

Web网页生成桌面应用

前言&#xff1a;网页生成桌面指的是将一个网页保存为桌面应用程序的形式&#xff0c;使得用户可以在桌面上直接打开该网页&#xff0c;而不必通过浏览器打开。这种桌面应用程序一般具有独立的窗口、菜单、工具栏等界面元素&#xff0c;能够提供更加方便快捷的使用体验。 实现…

基于Java的学生宿舍门禁信息管理系统的设计与实现(源码+lw+部署文档+讲解等

目录 前言 详细视频演示 具体实现截图 技术栈 后端框架SpringBoot 前端框架Vue 持久层框架MyBaitsPlus 系统测试 系统测试目的 系统功能测试 系统测试结论 代码参考 数据库代码参考 源码获取 前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、…

(2024,MLLM,扩散,中文数据集扩散预训练,多模态提示引导微调)UNIMO-G:通过多模态条件扩散进行统一图像生成

UNIMO-G: Unified Image Generation through Multimodal Conditional Diffusion 公和众和号&#xff1a;EDPJ&#xff08;进 Q 交流群&#xff1a;922230617 或加 VX&#xff1a;CV_EDPJ 进 V 交流群&#xff09; 目录 1. 摘要 2. 方法 3. 结果 1. 摘要 现有的文本到图像…

AIGC:让生成式AI成为自己的外脑(文末送书)

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;数据结构、网络奇遇记 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 什么是AIGC?二. AIGC如何运作&#xff1f;2.1 步骤一&#xff1a;收集数据2.…

算法基础之线段树

文章目录 线段树 线段树 线段树的原理十分简单&#xff0c;但是在代码上会相对复杂一点 他也是用来维护一个序列&#xff0c;是一个完全二叉树的形状 对于每一个节点是一个结构体 struct Node {int L,R; int sum; // 以和为例 };假设序列为1到7&#xff0c;那么根节点存的…

5G安卓手机定制_基于天玑900的安卓主板方案

5G安卓手机方案是一款采用联发科MT6877(天玑900)平台的高性能、可运行安卓操作系统的5G智能模块。该手机采用台积电6纳米低功耗工艺&#xff0c;主频高达2.4GHz&#xff0c;内存支持LPDDR5&#xff0c;并支持5G Sub-6GHz全频段和5G双载波聚合技术等多种制式。同时&#xff0c;该…

统计学-R语言-7.4

文章目录 前言非参数检验两个独立样本的Mann-Whitney检验 练习 前言 本片是对非参数检验最后的介绍。 非参数检验 两个独立样本的Mann-Whitney检验 Mann -Whitney检验也称为Mann- Whitney U检验&#xff08;Mann-Whitney U test&#xff09;或称为 Wilcoxon秩和检验&#xf…

Vue-38、Vue中插件使用

1、新建plugins.js文件 2、可以在plugins.js 定义全局过滤器 定义全局指令 定义混入 给vue原型上添加一个方法 export default {install(Vue){console.log("install",Vue);//全局过滤器Vue.filter(mySlice,function (value) {return value.slice(0,4)});//定义全局…

【TCP】传输控制协议

前言 TCP&#xff08;Transmission Control Protocol&#xff09;即传输控制协议&#xff0c;是一种面向连接的、可靠的、基于字节流的传输层通信协议。它由IETF的RFC 793定义&#xff0c;为互联网中的数据通信提供了稳定的传输机制。TCP在不可靠的IP层之上实现了数据传输的可…