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

该内容主要整理关于 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)

  • localStorage 和 sessionStorage

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

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

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

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

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

    window.addEventListener("hashchange", funcRef, false

  • WebSocket 使用 ws 或 wss 协议，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 用于在当前文档和引用资源之间确立联系。

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

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

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

  • href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果我们在文档中添加

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

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

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

png-8，png-24，jpeg，gif，svg，WebP（🌟）

Webp：WebP格式，谷歌（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 worker 或 shared 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 事件名不带on，attachEvent 带 on
  • 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 属性来实现元素的拖拽，img 和 a 标签默认是可以拖拽的
  2. 拖拽者身上的三个事件：ondragstart、ondrag、ondragend
  3. 拖拽要放到的元素上的四个事件：ondragenter、ondragover、ondragleave、ondrap

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的区别

Node 和 Element

  • DOM 是一棵树，所有节点都是 Node
  • Node是 Element 的基类
  • Element 是其他 HTML 元素的基类，如 HTMLDivElement、HTMLImageElement等

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

  • HTMLCollection 是 Element 的集合
  • NodeList 是 Node 的集合，包含 Text 和 Comment 节点
  • ele.children 返回 HTMLCollection 集合
  • ele.childNodes 返回 NodeList 集合
  • HTMLCollection 和 NodeList 是类数组
    • 使用 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>

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

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

相关文章

EF core连接数据库的前期完整配置流程-开发环境搭建

EF core连接数据库的前期完整配置流程-开发环境搭建

EF core连接数据库完整流程-开发环境搭建 前置&#xff1a;.net6 core webapi不勾选任何配置 声明&#xff1a;这里是以两个配置类来做的&#xff0c;一个T_Books表&#xff0c;一个T_Person表 Book&#xff1a;创建属性及类型 BookConfig&#xff1a;对创建的进行属性数据表…
阅读更多...
坚持刷题 ｜ 平衡二叉树

坚持刷题 ｜ 平衡二叉树

文章目录 题目考察点代码实现实现总结对实现进一步改进扩展提问 坚持刷题&#xff0c;老年痴呆追不上我&#xff0c;今天继续二叉树&#xff1a;平衡二叉树 题目 110.平衡二叉树 考察点 递归能力&#xff1a; 能否使用递归来解决问题。树的基本操作&#xff1a;能否正确地访…
阅读更多...
【算法练习】leetcode算法题合集之动态规划篇

【算法练习】leetcode算法题合集之动态规划篇

普通动规系列 LeetCode343. 整数拆分 LeetCode343. 整数拆分 将10的结果存在索引为10的位置上&#xff0c;需要保证数组长度是n1&#xff0c;索引的最大值是n&#xff0c;索引是从0开始的。 n的拆分&#xff0c;可以拆分为i和n-i&#xff0c;当然i可以继续拆分。而且拆分为n-…
阅读更多...
Vue基础知识

Vue基础知识

Vue Vue基础知识 v-bind:动态绑定属性值 Vue 修改&#xff0c;标签内也修改 在methods 中可以定义很多函数 在 data 中可以定义很多变量 v-if / v-show&#xff1a;对符合条件的元素进行展示 v-for:把数据遍历出现在网页中 案例 <!DOCTYPE html><html lang"e…
阅读更多...
【论文阅读笔记】Towards Universal Unsupervised Anomaly Detection in Medical Imaging

【论文阅读笔记】Towards Universal Unsupervised Anomaly Detection in Medical Imaging

Towards Universal Unsupervised Anomaly Detection in Medical Imaging arxiv&#xff0c;19 Jan 2024 【开源】 【核心思想】 本文介绍了一种新的无监督异常检测方法—Reversed Auto-Encoders (RA)&#xff0c;旨在提高医学影像中病理检测的准确性和范围。RA通过生成类似健…
阅读更多...
C语言关键字

C语言关键字

关键字的分类 C语言一共多少个关键字呢&#xff1f;一般的书上&#xff0c;都是32个,但是这个都C90(C89) 的标准。其实 C99 后又新增了5个关键字。不过&#xff0c;目前主流的编译器&#xff0c;对 C99 支持的并不好&#xff0c;默认使用 C90 &#xff0c;即&#xff0c;认为3…
阅读更多...
【大数据】Flink 中的数据传输

【大数据】Flink 中的数据传输

Flink 中的数据传输 1.基于信用值的流量控制2.任务链接 在运行过程中&#xff0c;应用的任务会持续进行数据交换。TaskManager 负责将数据从发送任务传输至接收任务。它的网络模块在记录传输前会先将它们收集到 缓冲区 中。换言之&#xff0c;记录并非逐个发送的&#xff0c;而…
阅读更多...
活字格V9获取图片失败bug，报错404，了解存储路径，已改为批量上传和批量获取

活字格V9获取图片失败bug，报错404，了解存储路径，已改为批量上传和批量获取

项目场景&#xff1a; 问题描述 原因分析&#xff1a; 解决方案&#xff1a; 完成了批量上传功能&#xff0c;这插件真的很方便 于是写了个批量获取附件的js代码&#xff0c;我真厉害 项目场景&#xff1a; 活字格V9版本获取图片链接Upload 【9.0.103.0】图片上传的存储路…
阅读更多...
java web 研究生信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

java web 研究生信息管理系统Myeclipse开发mysql数据库web结构java编程计算机网页项目

一、源码特点 java Web研究生信息管理系统是一套完善的java web信息管理系统 &#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境 为TOMCAT7.0,Myeclipse8.5开发&#xff0c;数据库为My…
阅读更多...
Keycloak - docker 运行 前端集成

Keycloak - docker 运行 前端集成

Keycloak - docker 运行 & 前端集成 这里的记录主要是跟我们的项目相关的一些本地运行/测试&#xff0c;云端用的 keycloak 版本不一样&#xff0c;不过本地我能找到的最简单的配置是这样的 docker 配置 & 运行 keycloak keycloak 有官方(Red Hat Inc.)的镜像&#…
阅读更多...
助力工业产品质检，基于YOLOv7【tiny/l/x】不同系列参数模型开发构建智能PCB电路板质检分析系统

助力工业产品质检，基于YOLOv7【tiny/l/x】不同系列参数模型开发构建智能PCB电路板质检分析系统

AI助力工业质检智能生产制造已经有很多成功的实践应用了&#xff0c;在我们前面的系列博文中也有很多对应的实践&#xff0c;感兴趣的话可以自行移步阅读前面的博文即可&#xff1a; 《助力质量生产&#xff0c;基于目标检测模型MobileNetV2-YOLOv3-Lite实现PCB电路板缺陷检测…
阅读更多...
python：socket基础操作（4）-《tcp客户端基础》

python：socket基础操作（4）-《tcp客户端基础》

tcp就和udp不一样了&#xff0c;tcp是客户端和服务器端&#xff0c;如果想通过tcp发送数据&#xff0c;要先让tcp进行连接服务器端 tcp客户端 先让服务器端进行启动 import socketdef main():# 创建套接字tcp_client_socket socket.socket(socket.AF_INET,socket.SOCK_STREAM…
阅读更多...
【原理图PCB专题】OrCAD Capture CIS关闭开始界面

【原理图PCB专题】OrCAD Capture CIS关闭开始界面

17.4版本 在打开OrCAD Capture CIS时会发现打开Start Page页面&#xff0c;那么如何将他关闭再也不看这个界面呢&#xff1f; 在窗口中输入SetOptionBool EnableStartPage 0 回车 重启软件后就再也不会弹出Start Page页面 如果没有发现Command Window那么将菜单栏view->C…
阅读更多...
Cesium绘制流动管线

Cesium绘制流动管线

目录 一、第一种方式 二、第二种方式 1.安装gsap 2.引入 一、第一种方式 使用viewer.clock Clock文档 viewer.clock文档 vec4 colorImage texture2D(image, vec2(fract(st.s - time), st.t));这里&#xff0c;因为使用的是高版本的cesium1.108,直接写texture2D会报错&am…
阅读更多...
计数指针：shared_ptr （共享指针）与函数 笔记

计数指针：shared_ptr （共享指针）与函数 笔记

推荐B站视频&#xff1a; 4.shared_ptr计数指针_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p4&vd_sourcea934d7fc6f47698a29dac90a922ba5a3 5.shared_ptr与函数_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV18B4y187uL?p5&vd_sourcea…
阅读更多...
JavaScript基础之输入输出与变量常量详解

JavaScript基础之输入输出与变量常量详解

输入和输出 输出和输入也可理解为人和计算机的交互&#xff0c;用户通过键盘、鼠标等向计算机输入信息&#xff0c;计算机处理后再展示结果给用户&#xff0c;这便是一次输入和输出的过程。 举例说明&#xff1a;如按键盘上的方向键&#xff0c;向上/下键可以滚动页面&#x…
阅读更多...
C语言实现插入排序算法（附带源代码）

C语言实现插入排序算法（附带源代码）

插入排序 插入排序&#xff08;英语&#xff1a;Insertion Sort&#xff09;是一种简单直观的排序算法。它的工作原理是通过构建有序序列&#xff0c;对于未排序数据&#xff0c;在已排序序列中从后向前扫描&#xff0c;找到相应位置并插入。插入排序在实现上&#xff0c;通常…
阅读更多...
opencv012 滤波器04 中值滤波，双边滤波

opencv012 滤波器04 中值滤波，双边滤波

中值滤波 取中位数&#xff0c;可以处理椒盐噪音 CV自带medianBlur函数dst cv2.medianBlur(src, ksize) 参数说明&#xff1a;1.src: 需要滤波的图片&#xff1b;2.ksize&#xff1a;核大小&#xff0c;必须是比1大的奇数【举个例子&#xff1a;3&#xff0c;5&#xff0c;7……
阅读更多...
【RT-DETR有效改进】 | 主干篇 | RevColV1可逆列网络（特征解耦助力小目标检测）

【RT-DETR有效改进】 | 主干篇 | RevColV1可逆列网络（特征解耦助力小目标检测）

前言 大家好&#xff0c;这里是RT-DETR有效涨点专栏。 本专栏的内容为根据ultralytics版本的RT-DETR进行改进&#xff0c;内容持续更新&#xff0c;每周更新文章数量3-10篇。 专栏以ResNet18、ResNet50为基础修改版本&#xff0c;同时修改内容也支持ResNet32、ResNet101和PP…
阅读更多...
JDBC（Java DataBase Connectivity ）

JDBC（Java DataBase Connectivity ）

图片来源&#xff1a;动力节点老杜的JDBC视频讲解 JDBC&#xff08;Java DataBase Connectivity &#xff09; 一、JDBC 的本质二、开始前的准备工作三、关于 JDBC 中的事务四、JDBC 编程六步1.注册驱动2.获取连接3.获取数据库操作对象4.执行SQL语句5.处理结果查询集6.释放资源…
阅读更多...
最新文章

Copyright @ 2022~2023