当前位置： 首页 > news >正文

夯实前端基础之HTML篇

news 来源：原创 2025/5/15 0:47:30

知识点概览

在这里插入图片描述

HTML部分

1. DOM和BOM有什么区别？

  • DOM（Document Object Model）

当网页被加载时，浏览器会创建页面的对象文档模型，HTML DOM 模型被结构化为对象树

用途： 主要用于网页内容的动态修改和交互，比如网页的局部更新、表单验证、创建动态列表等场景。

在这里插入图片描述

  • 什么是Shadow DOM？和普通DOM树有什么区别？
    • web component做到真正的组件化
    • 原生规范，无需框架
    • 天然与用户隔离，真正意义上的CSS scope
    • 比如常用的video标签，我们通常只能在DOM结构中看到一个video标签，但在设置中选择显示Shadow DOM的时候，能看到它真正的结构

在这里插入图片描述

// 手动实现一个shadow DOM
<body><script>customElements.define("my-shadow-dom",class extends HTMLElement {connectedCallback() {const shadow = this.attachShadow({ mode: "open" });shadow.innerHTML = "this is my shadow DOM！";}});</script><my-shadow-dom></my-shadow-dom></body>

在这里插入图片描述

  • BOM（Browser Object Model）

浏览器对象模型，document也是浏览器的对象

用途： 主要用于用于控制浏览器的行为，如页面导航、获取浏览器信息、管理浏览器窗口大小和位置等操作。

2. HTML中meta有什么作用？

HTML 标签

作用：定义该html文档的元数据（字符集、页面描述、关键词、文档作者和视口设置等）

浏览器（如何显示内容或重新加载页面）、搜索引擎（关键词）和其他网络服务会用到元数据

<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。 --><meta name="keywords" content="css, JavaScript, CSS3"><meta name="author" content="guoshouying"><meta name="description" content="this is my site."><meta http-equiv="refresh" content="10"><!-- 每 10 秒刷新一次文档 -->
</head>

3. HTML5中语义化标签有哪些及特性

优点：1、利于搜索引擎优化SEO，2、方便开发和维护，3、无障碍访问(Accessibility)

在这里插入图片描述

4. 如何检查浏览器是否支持h5

  • 检测特定的html5标签或者API，如 canvas,video,audio等标签，看浏览器能否正确识别
var canvas = document.createElement('canvas'); 
if (canvas.getContext) { console.log("浏览器支持canvas"); 
} else { console.log("浏览器不支持canvas"); 
}

5. 哪些标签可以优化SEO？

  • 元标签（meta）
  • 语义化标签（header，section，article等）- 这些标签能够让搜索引擎更好地理解页面的结构和内容。
  • 链接标签（a）
  • 图像标签（img）- alt属性是搜索引擎理解图像内容与页面相关性的重要依据。

6. 对target='_blank’的理解？有什么安全性问题？如何防范？

作用：在新的窗口中打开链接指向的内容

  • 安全问题
    • 钓鱼攻击风险：打开新的窗口后，通过window.opener可以访问原始窗口对象，进而获取到一些隐私信息，如登录状态，账号信息等，从而进行钓鱼攻击。
    • 跨站脚本攻击（XSS）风险：如果新打开的页面包含恶意脚本，并且能够通过window.opener与原始页面进行交互，就有可能将恶意脚本注入到原始页面中，导致用户信息泄露或者其他安全问题
  • 防范措施
<a href="http://www.baidu.com" target="_blank" rel="norefferrer noopener">打开百度</a>

7. src和href的区别？

  • src（Souce）
    • 常用于img, script, iframe等标签，用于指定要加载到当前元素中的外部资源的位置。加载时，浏览器会停止对HTML文档的解析，直到获取并加载完指定的资源，然后再继续HTML解析。
  • href（hypertext reference）
    • 常用于a（超链接），link标签（链接样式表），用于指定目标资源的位置，这个资源和当前文档是引用关系，浏览器不会暂停HTML解析去执行它。a标签中只有点击的时候才执行加载该页面。对于<link rel="stylesheet" href="styles.css">，浏览器会在后台异步加载样式表，不会阻塞 HTML 文档的解析。
    • href=“javascript:void(0) " 和 href=”#" 有什么区别？
      • href="javascript:void(0) "：表示死链接,通常用于需要在点击链接时执行 JavaScript 代码，但不希望页面有任何跳转或刷新的情况：<a href="javascript:void(0)" onclick="doSomething()">点击我</a>，如果页面javascript被禁用，将不工作。
      • href="#"：锚点，默认是#top,页面会向上滚动，如果页面javascript被禁用，仍然工作。

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

  • 相同点
    • 都是实现脚本的异步加载，不会阻塞浏览器对HTML文档的解析，在后台下载脚本，提高网页性能及用户体验。
  • 不同点
    • defer：脚本加载完后不会立即执行，等HTML解析完按顺序执行脚本。适用于脚本间有依赖顺序，或者需要操作DOM的场景。
    • async：脚本加载完立即执行，且不按照顺序，哪个下载完的快先执行哪个。适用于不操作DOM的独立脚本，比如广告脚本，第三方统计脚本。

9. 什么是canvas & 什么时候用？

  • 概念
    • h5提供的标签，允许用JavaScript在画布上绘图（形状、线条、曲线、方框、文本和图像，以及颜色、旋转、透明度和其他像素操作）
    • canvas是基于像素的，有一个二维的网格系统，原点为（0，0）在左上角，x轴水平向右，y轴垂直向下。
    • 与SVG相比，SVG是可缩放矢量图形，使用XML来描述图形，可以方便的缩放，修改。canvas绘制的图形基于像素修改比较困难。
  • 使用场景
    • 游戏开发：简单的休闲游戏，如连连看，绘制图形。
    • 可视化开发：柱状图，折线图等各种图表。
    • 图像处理和特效：例如，实现图像的灰度化、模糊处理、旋转、缩放等效果。
    • 动画制作：加载动画，粒子动画（比如模拟雪花飘落、烟花绽放等效果）等。
  • 代码实现 Canvas API
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Canvss</title>
</head>
<body><!-- 创建canvas元素 --><canvas id="myCanvas" width="500" height="500"></canvas><script>const canvasElem = document.getElementById('myCanvas');// 创建绘图上下文context对象const ctx = canvasElem.getContext('2d');ctx.fillStyle = "#ff0000";   // 设置填充颜色ctx.fillRect(0, 0, 200, 100); // 绘制矩形，fillRect(x, y, width, height)ctx.clearRect(10, 10, 50, 50); // 清除矩形区域，clearRect(x, y, width, height)ctx.strokeStyle = "red";   // 设置边框颜色   ctx.strokeRect(0, 102, 100, 50); // 绘制矩形边框，strokeRect(x, y, width, height)ctx.beginPath(); // 开始绘制路径ctx.moveTo(0,220); // 将画笔移动到指定的坐标点，不进行绘制，主要用于确定线条的起始点ctx.lineTo(150, 220); // 画一条线段到指定位置ctx.stroke(); // 绘制线段// 绘制圆形// x和y是圆心的坐标，radius是半径，startAngle和endAngle是起始角度和结束角度（以弧度为单位），counterclockwise是一个布尔值，用于指定是否逆时针绘制。ctx.beginPath();ctx.arc(100, 300, 50, 0, Math.PI * 2, true); // arc(x, y, radius, startAngle, endAngle, counterclockwise)ctx.stroke();</script>
</body>
</html>

svg和canvas画出的圆形区别

在这里插入图片描述

10. 渐进增强和优雅降级之间的区别？

  • 渐进增强（Progressive Enhancement）
    • 一种网页设计和开发理念。它强调从最基本的、能在所有浏览器和设备上正常工作的核心内容和功能开始构建网页。然后，根据浏览器的能力和设备的特性，逐步添加更高级的样式、交互功能和性能优化。
    • 例如，先构建一个只包含纯文本内容和基本链接的网页，确保它在最古老的浏览器或功能受限的设备（如一些低性能的移动设备）上能够正常访问和理解。之后，再为支持 CSS3 和 JavaScript 的现代浏览器添加样式（如渐变背景、动画效果）和交互功能（如表单验证、下拉菜单的动态效果）。
    • 兼容性好，易于维护和扩展
  • 优雅降级（Graceful Degradation）
    • 优雅降级的理念与渐进增强相反。它是从一个功能齐全、具有高级特性（如复杂的 CSS 样式、大量的 JavaScript 交互）的网站开始构建，然后考虑当浏览器或设备不支持某些高级特性时，如何让网站 “优雅地” 降级，即仍然能够提供基本的、可接受的用户体验。
    • 用户体验优化在先，灵活性。

11. 什么是回流和重绘？

  • 回流（重排）Reflow
    • 浏览器重新计算页面中元素的几何属性（如位置，大小等）
      • 修改元素的尺寸、位置、边距、填充等属性.
      • 添加或删除可见的 DOM 元素.
      • 改变元素的字体大小.
      • 页面的尺寸变化（如窗口大小调整）.
      • 获取元素的几何属性（如 offsetWidth、offsetHeight 等）.
    • 比如排队前面的一个人走了，后面所有人都要向前走一步，或者有人插队，后面所有人都要向后退，这就是回流
  • 重绘 Repaint
    • 浏览器重新绘制元素的过程
      • image的宽高定了，只是换了src
      • 改变元素的颜色，边框等属性
      • 修改元素可见性（display:none改为block）
    • 比如排队有人替你占位置，你来了，替你的那个人走了，不影响到后面的人，这就是重绘
  • 优化策略
    • 使用虚拟DOM：现代化前端框架像 React、Vue.js 等都使用了虚拟 DOM 来优化 DOM 更新。当数据发生变化时，框架会先在虚拟 DOM 上进行操作，计算出新旧虚拟 DOM 的差异（这个过程称为 “diffing”），然后只将真正需要更新的部分应用到真实 DOM 上。这样可以避免不必要的 DOM 操作，从而减少回流和重绘。因为在虚拟 DOM 层面，可以高效地比较和计算出最小的更新范围，而不是像直接操作真实 DOM 那样，每次小的修改都可能引发大面积的布局重新计算和重绘。
    • 避免内联样式的频繁修改： 内联样式（通过style属性修改样式）会导致浏览器立即重新计算样式和布局。如果需要频繁地修改元素的样式，最好使用类名切换或者外部 CSS 样式表来控制样式变化。
    • 使用display:none代替visibility:hidden： 缺点：在合适的场景下才能用。
    • 脱离文档流（使用position:absolute或position:fixed）：需要谨慎使用，可能会带来布局上的复杂性。

12. iframe有哪些应用？如何处理iframe通信？

  • 应用
    • 最常见的一种微前端手段
    • 利用iframe开发低代码平台
    • 嵌入第三方内容（如广告，地图，AI助手等）
    • 跨域
  • 通信： window.postMessage方法

iframeA.html

<body>这是页面A<button onclick="onClick()">点击我</button><iframe id="iframe" src="./iframeB.html"></iframe><script>//向iframe发送消息const iframe = document.getElementById("iframe");function onClick() {iframe.contentWindow.postMessage("hello b页面", "*");}//监听iframe里的页面发出的消息window.addEventListener("message", (val) => {console.log("message", val);});</script></body>

iframeB.html

<body>这是页面B<button onclick="onClick()">点击我</button><script>//向父页面发送消息function onClick() {window.parent.postMessage("message", "*");}//接受父页面传来的消息window.addEventListener("message", (val) => {console.log("valll", val);});</script></body>

相关文章：

夯实前端基础之HTML篇

知识点概览 HTML部分 1. DOM和BOM有什么区别&#xff1f; DOM&#xff08;Document Object Model&#xff09; 当网页被加载时&#xff0c;浏览器会创建页面的对象文档模型&#xff0c;HTML DOM 模型被结构化为对象树 用途&#xff1a; 主要用于网页内容的动态修改和交互&…...

编程日记 2025/5/15 0:47:30

pytest 参数介绍

命令行参数描述常见使用案例-v / --verbose显示每个测试用例的详细信息&#xff0c;包括测试名称和状态pytest -v-s / --captureno禁用输出捕获&#xff0c;允许 print() 输出显示pytest -s-q / --quiet安静模式&#xff0c;减少输出&#xff0c;仅显示每个测试的通过/失败结果…...

编程日记 2025/5/14 17:38:58

蓝桥杯训练

1对于一个字母矩阵&#xff0c;我们称矩阵中的一个递增序列是指在矩阵中找到两个字母&#xff0c;它们在同一行&#xff0c;同一列&#xff0c;或者在同一 45 度的斜线上&#xff0c;这两个字母从左向右看、或者从上向下看是递增的。 例如&#xff0c;如下矩阵中 LANN QIAO有…...

编程日记 2025/5/14 15:40:42

maven的简单介绍

目录 1、maven简介2、maven 的主要特点3、maven的下载与安装4、修改配置文件5、私服(拓展) 1、maven简介 Maven 是一个广泛使用的项目管理和构建工具&#xff0c;主要应用于 Java 项目。Maven 由 Apache 软件基金会开发和维护&#xff0c;它提供了一种简洁且一致的方法来构建、…...

编程日记 2025/5/10 20:59:46

超完整Docker学习记录，Docker常用命令详解

前言 关于国内拉取不到docker镜像的问题&#xff0c;可以利用Github Action将需要的镜像转存到阿里云私有仓库&#xff0c;然后再通过阿里云私有仓库去拉取就可以了。 参考项目地址&#xff1a;使用Github Action将国外的Docker镜像转存到阿里云私有仓库 一、Docker简介 Do…...

编程日记 2025/5/13 1:25:36

Kafka优势剖析-消费者组、并行消费

目录 1. 消费者组&#xff08;Consumer Group&#xff09; 1.1 什么是消费者组&#xff1f; 1.2 消费者组的工作原理 1.3 消费者组的优势 2. 并行消费&#xff08;Parallel Consumption&#xff09; 2.1 什么是并行消费&#xff1f; 2.2 并行消费的工作原理 2.3 并行消…...

编程日记 2025/5/10 4:26:25

MATLAB语言的多线程编程

MATLAB语言的多线程编程 引言 随着计算机技术的不断发展&#xff0c;尤其是在大数据和高性能计算领域&#xff0c;多线程编程逐渐成为一种重要的编程范式。MATLAB作为一种广泛应用于科学计算和工程模拟的高级编程语言&#xff0c;其强大的数学计算功能和丰富的工具箱&#xf…...

编程日记 2025/5/12 2:12:57

强化学习入门

RL学习路径 理解DQN原理 理解 标准版的策略梯度算法(Vanilla Policy Gradient) 模仿学习实践 Actor-Critic原理 从大模型机器人到imitation Learning与diffusion policy、ACT(Action Chunking with Transformers)的关系 大模型与机器人 tmp: 强化学习中的优势函数&#…...

编程日记 2025/5/14 7:45:01

Unity 2d描边基于SpriteRender，高性能的描边解决方案

目标 以Unity默认渲染管线为例&#xff0c;打造不需要图片内边距&#xff0c;描边平滑&#xff0c;高性能的描边解决方案 前言 在2d游戏中经常需要给2d对象添加描边&#xff0c;来突出强调2d对象 当你去网上查找2d描边shader&#xff0c;移植到项目里面&#xff0c;大概率会…...

编程日记 2025/5/11 7:32:24

2025第2周 | JavaScript中的Symbol

目录 1. Symbol是个什么东东&#xff1f;1.1 语法 2. 为什么需要Symbol?3. 怎么使用Symbol?3.1 定义对象字面量3.2 新增对象属性3.3 使用 Object.defineProperty方式3.4 遍历 4. 静态方法4.1 Symbol.for(key)4.2 Symbol.keyFor(symbol) 2025&#xff0c;做想做的事&#xff0…...

编程日记 2025/5/14 12:22:41

Unity学习之UGUI进阶

一、事件监听接口 1、作用 用于实现类型长按、双击、拖拽等基础控件无法实现的功能 所有控件都能够添加更多的事件监听来处理对应的逻辑 2、事件监听接口类型 &#xff08;1&#xff09;常用事件接口 &#xff08;2&#xff09;不常用事件接口 3、使用事件监听接口 &#…...

编程日记 2025/5/11 21:25:20

IT面试求职系列主题-Jenkins

想成功求职&#xff0c;必要的IT技能一样不能少&#xff0c;先说说Jenkins的必会知识吧。 1) 什么是Jenkins Jenkins 是一个用 Java 编写的开源持续集成工具。它跟踪版本控制系统&#xff0c;并在发生更改时启动和监视构建系统。 2&#xff09;Maven、Ant和Jenkins有什么区别…...

编程日记 2025/5/11 22:34:44

Allure 集成 pytest

Allure 是一个强大的测试报告工具&#xff0c;与 pytest 集成可以生成详细的测试报告&#xff0c;包括测试步骤、测试数据、截图、错误堆栈等。 1. 安装 Allure 和相关依赖 安装 pytest-allure-adaptor 插件&#xff1a; pip install allure-pytest确保本地已安装 Allure 工具。…...

编程日记 2025/5/9 20:50:57

Redis高频知识点

Redis 目录 1 Redis是AP的还是CP的&#xff1f;2 介绍一下Redis的集群方案&#xff1f;3 什么是Redis的数据分片&#xff1f;4 Redis为什么这么快&#xff1f;5 Redis 的事务机制是怎样的&#xff1f;7 Redis的持久化机制是怎样的&#xff1f;8 Redis 的过期策略是怎么样的&a…...

编程日记 2025/5/11 17:36:36

【电子通识】PWM驱动让有刷直流电机恒流工作

电机的典型驱动方法包括电压驱动、电流驱动以及PWM驱动。本文将介绍采用PWM驱动方式的恒流工作。 首先介绍的是什么是PWM驱动的电机恒流工作&#xff0c;其次是PWM驱动电机恒流工作时电路的工作原理。 PWM驱动 当以恒定的电流驱动电机时&#xff0c;电机会怎样工作呢&#xff1…...

编程日记 2025/5/8 4:29:36

PyMysql 02|（包含项目实战）数据库工具类封装

目录 七、数据库工具类封装 1、封装的目的 2、设计数据库工具类 3、实现类方法 1️⃣获取、关闭连接 2️⃣查询一条记录 3️⃣增删改数据 4️⃣完整封装代码实现 七、数据库工具类封装 1、封装的目的 将常用的数据库操作&#xff0c;封装到一个方法。 后续再操作数据…...

编程日记 2025/5/14 9:54:28

Pixel 6a手机提示无法连接移动网络，打电话失败！

1、开启VoLTE 2、如果没有&#xff0c;下载shizuku和PixelIMS应用。 shizuke Releases RikkaApps/Shizuku GitHub PixellMS Release v1.2.8 kyujin-cho/pixel-volte-patch GitHub 3、安装shizuke启动&#xff0c;开通root可以直接点击下面的启动&#xff0c;如果没有就…...

编程日记 2025/5/14 13:25:09

ubuntu20.04 在线安装postgresql 扩展postgis

基础配置 /etc/apt/sources.list # 添加pg官方基础配置deb http://apt.postgresql.org/pub/repos/apt/ focal-pgdg main# 添加ubuntu官方依赖&#xff08;防止下载依赖错误&#xff09;deb http://archive.ubuntu.com/ubuntu/ focal main restricted universe multiverse de…...

编程日记 2025/5/14 18:03:06

fitz获取pdf内容

1.获取pdf单页&#xff0c;及所有内容 import fitz # PyMuPDF# 打开 PDF 文件 pdf_path r"/data2/ljsang/0106/0725_Self-organization-of-plasticity-and-specialization-in-a-primi_2022_Cell-Syst.pdfπσΣ╕╖σσ║Θ║∩╝Φ╛τ▒│σ¡τ╛π.pdf" d…...

编程日记 2025/5/13 17:25:00

LabVIEW软件Bug的定义与修改

在LabVIEW软件开发过程中&#xff0c;bug&#xff08;程序错误或缺陷&#xff09;指的是程序中导致不符合预期行为的任何问题。Bug可能是由于编码错误、逻辑漏洞、硬件兼容性问题、系统资源限制等因素引起的。它可能会导致程序崩溃、功能无法正常执行或输出结果不符合预期。理解…...

编程日记 2025/5/10 4:35:46

Vue3(elementPlus) el-table替换/隐藏行箭头，点击整行展开

element文档链接&#xff1a; https://element-plus.org/zh-CN/component/form.html 一、el-table表格行展开关闭箭头替换成加减号 注&#xff1a;Vue3在样式中修改箭头图标无效&#xff0c;可能我设置不对&#xff0c;欢迎各位来交流指导 转变思路&#xff1a;隐藏箭头&…...

编程日记 2025/5/12 14:39:45

HTML 音频(Audio)

HTML 音频(Audio) HTML5 引入了新的音频标签 <audio>，使得在网页上嵌入音频文件变得更加简单。在此之前，播放音频通常需要依赖于第三方插件，如 Flash。但随着 HTML5 的普及，浏览器原生支持音频播放，极大地提升了用户体验和网页性能。 基本用法 要使用 HTML5 的音…...

编程日记 2025/5/10 11:28:01

linux音视频采集技术: v4l2

简介 在 Linux 系统中&#xff0c;视频设备的支持和管理离不开 V4L2&#xff08;Video for Linux 2&#xff09;。作为 Linux 内核的一部分&#xff0c;V4L2 提供了一套统一的接口&#xff0c;允许开发者与视频设备&#xff08;如摄像头、视频采集卡等&#xff09;进行交互。无…...

编程日记 2025/5/11 10:09:53

基于高斯混合模型的数据分析及其延伸应用（具体代码分析）

一、代码分析 &#xff08;一&#xff09;清除工作区和命令行窗口 clear; clc;clear;&#xff1a;该命令用于清除 MATLAB 工作区中的所有变量&#xff0c;确保代码运行环境的清洁&#xff0c;避免之前遗留的变量对当前代码运行产生干扰。例如&#xff0c;如果之前运行的代码中…...

编程日记 2025/5/11 11:15:58

内网基础-防火墙-隧道技术

内网对抗-网络通讯篇&防火墙组策略&入站和出站规则&单层双层&C2正反向上线 关闭第一个防火墙&#xff1a; 第一个上线就走反向或者正向 第二个上线走反向&#xff08;第二个防火墙阻止入站&#xff09; 关闭第二个防火墙&#xff1a; 第一个上线就走反向&a…...

编程日记 2025/5/11 14:53:39

123.【C语言】数据结构之快速排序挖坑法和前后指针法

目录 1.挖坑法 执行流程 代码 运行结果 可读性好的代码 2.前后指针法(双指针法) 执行流程 单趟排序代码 将单趟排序代码改造后 写法1 简洁的写法 3.思考题 1.挖坑法 执行流程 "挖坑法"顾名思义:要有坑位,一开始将关键值放入临时变量key中,在数组中形成…...

编程日记 2025/5/11 9:39:02

【沉默的羔羊心理学】汉尼拔的“移情”游戏：操纵与理解的艺术，精神分析学视角下的角色互动

终极解读《沉默的羔羊》&#xff1a;弗洛伊德精神分析学视角下的深层剖析 关键词 沉默的羔羊弗洛伊德精神分析学角色心理意识与潜意识性别与身份 弗洛伊德精神分析学简介 弗洛伊德的精神分析学是心理学的一个重要分支&#xff0c;主要关注人类行为背后的无意识动机和冲突。…...

编程日记 2025/5/10 11:36:46

Bytebase 3.0.1 - 可配置在 SQL 编辑器执行 DDL/DML

&#x1f680; 新功能 新增环境策略&#xff0c;允许在 SQL 编辑器内直接执行 DDL/DML 语句。 支持为 BigQuery 数据脱敏。 在项目下新增数据访问控制及脱敏管理页面。 在数据库页面&#xff0c;支持回滚到变更历史的某个版本。 &#x1f514; 兼容性变更 禁止工单创建…...

编程日记 2025/5/14 18:53:07

从零手写线性回归模型：PyTorch 实现深度学习入门教程

系列文章目录 01-PyTorch新手必看&#xff1a;张量是什么&#xff1f;5 分钟教你快速创建张量&#xff01; 02-张量运算真简单&#xff01;PyTorch 数值计算操作完全指南 03-Numpy 还是 PyTorch&#xff1f;张量与 Numpy 的神奇转换技巧 04-揭秘数据处理神器&#xff1a;PyTor…...

编程日记 2025/5/2 3:07:30

git使用指南-实践-搭建git私服

一.创建git私服的核心基础 所谓的git私服&#xff0c;其实就是在一个服务器上创建一个个的git仓库&#xff0c;并且这些仓库允许其在一个网络上被其他用户访问。 创建一个最素的git私服&#xff1a;随便找一台linux服务器&#xff0c;这里假设其ip为192.168.0.6&#xff0c;使…...

编程日记 2025/5/12 10:25:19

Node.js JXcore 打包教程

Node.js JXcore 打包教程 介绍 Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时环境，它允许开发者使用 JavaScript 编写服务器端和网络应用程序。JXcore 是一个流行的 Node.js 发行版，它支持将 Node.js 应用程序打包成单一的可执行文件，使得部署和分发变得更加容易…...

编程日记 2025/5/6 9:22:35

Xshell 8 最新中文免安装绿色版

前言 Xshell8是一个非常受欢迎的远程连接管理软件&#xff0c;它的界面简单易懂&#xff0c;用起来特别方便。能支持好多种连接方式&#xff0c;比如SSH1、SSH2、SFTP、TELNET等等&#xff0c;还有串行协议和其他一些高级功能&#xff0c;基本上你想连什么都能满足。而且&…...

编程日记 2025/5/3 1:17:22

结构型模式4.装饰器模式

结构型模式 适配器模式&#xff08;Adapter Pattern&#xff09;桥接模式&#xff08;Bridge Pattern&#xff09;组合模式&#xff08;Composite Pattern&#xff09;装饰器模式&#xff08;Decorator Pattern&#xff09;外观模式&#xff08;Facade Pattern&#xff09;享元…...

编程日记 2025/5/13 11:43:06

备考蓝桥杯：顺序表详解（静态顺序表，vector用法）

目录 1.顺序表的概念 2.静态顺序表的实现 总代码 3.stl库动态顺序表vector 测试代码 1.顺序表的概念 要理解顺序表&#xff0c;我们要先了解一下什么是线性表 线性表是n个具有相同特征的数据元素的序列 这就是一个线性表 a1是表头 a4是表尾 a2是a3的前驱 a3是a2的后继 空…...

编程日记 2025/5/12 8:56:42

使用uniapp 微信小程序一些好用的插件分享

总结一下自己在开发中遇见的一问题&#xff0c;通过引入组件可以快速的解决 1.zxz-uni-data-select 下拉框选择器(添加下拉框检索&#xff0c;多选功能&#xff0c;多选搜索功能&#xff0c;自定义 下拉框插件&#xff0c;使用这个的原因是因为 uniui uview 组件库下拉框太…...

编程日记 2025/5/12 11:26:35

当遇到 502 错误（Bad Gateway）怎么办

很多安装雷池社区版的时候&#xff0c;配置完成&#xff0c;访问的时候可能会遇到当前问题&#xff0c;如何解决呢&#xff1f; 客户端&#xff0c;浏览器排查 1.刷新页面和清除缓存 首先尝试刷新页面&#xff0c;因为有时候 502 错误可能是由于网络临时波动导致服务器无法连…...

编程日记 2025/5/11 12:32:55

R语言安装教程与常见问题

生物信息基础入门笔记 R语言安装教程与常见问题 今天和大家聊一个非常基础但是很重要的技术问题——如何在不同操作系统上安装R语言&#xff1f;作为生物信息学数据分析的神兵利器&#xff0c;R语言的安装可谓是入门第一步&#xff0c;学术打工人的必备技能。今天分享在Windows…...

编程日记 2025/5/10 13:52:19

windows 下基于docker 部署 guacamole

背景 Apache Guacamole 是一种无客户端或插件的远程桌面网关。它支持多个标准协议&#xff0c;如 VNC、RDP 和 SSH等。记录下部署过程。 步骤 1&#xff0c; 安装docker desktop choco install docker-desktop -y 注&#xff1a; 若windows 11还未安装wsl&#xff0c;则需要…...

编程日记 2025/5/14 22:49:31

JVM实战—OOM的生产案例

1.每秒仅上百请求的系统为何会OOM(RPC超时时间设置过长导致QPS翻几倍) (1)案例背景 在这个案例中&#xff0c;一个每秒仅仅只有100请求的系统却因频繁OOM而崩溃。这个OOM问题会涉及&#xff1a;Tomcat底层工作原理、Tomcat内核参数的设置、服务请求超时时间。 (2)系统发生OOM的…...

编程日记 2025/5/11 9:53:33

oracle闪回恢复数据：（闪回查询，闪回表，闪回库，回收站恢复）

oracle的闪回查询&#xff0c;可以查询提交在表空间的闪回数据&#xff0c;并可以还原所查询的数据&#xff0c;用于恢复短时间内的delele 或者 update 误操作&#xff0c;非常方便&#xff0c;缺点是只能恢复大概几小时内的数据。 文章目录 概要闪回查询恢复数据的主要方法包括…...

编程日记 2025/5/9 14:48:41

STM32 单片机 练习项目 LED灯闪烁LED流水灯蜂鸣器 未完待续

个人学习笔记 文件路径&#xff1a;程序源码\STM32Project-DAP&DAPmini\1-1 接线图 3-1LED闪烁图片 新建项目 新建项目文件 选择F103C8芯片 关闭弹出窗口 拷贝资料 在项目内新建3个文件夹 Start、Library、User Start文件拷贝 从资料中拷贝文件 文件路径&#xff1a;固…...

编程日记 2025/5/12 8:16:42

计算机网络之---数据传输与比特流

数据传输的概念 数据传输是指将数据从一个设备传输到另一个设备的过程。传输过程涉及将高层协议中的数据&#xff08;如包、帧等&#xff09;转化为比特流&#xff0c;在物理介质上传输。 比特流的概念 比特流是数据传输中最基本的单位&#xff0c;它是由0和1组成的连续比特…...

编程日记 2025/5/10 7:13:00

es 单个节点cpu过高

背景&#xff1a; es 单个节点cpu一直持续很高&#xff0c;其它节点cpu不高。 观察这个节点的jvm使用率比较高&#xff0c;怀疑是jvm内存没释放导致内存寻址效率低&#xff0c;引起cpu过高。 解决方法&#xff1a;手动执行fullgc&#xff0c; 在线执行对业务无影响。 jcmd pi…...

编程日记 2025/5/13 10:02:26

设计模式 结构型 组合模式（Composite Pattern）与 常见技术框架应用 解析

组合模式&#xff08;Composite Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许你将对象组合成树形结构来表示“部分-整体”的层次结构。通过这种模式&#xff0c;客户端可以一致地处理单个对象和对象组合。 在软件开发中&#xff0c;我们经常会遇到处理对象的层…...

编程日记 2025/5/7 4:08:42

pcie学习记录(1)：基于xdma的工程搭建

写在最前面 Vivado的版本&#xff01;&#xff01;&#xff01;&#xff08;后面验证是错误的思路&#xff0c;可以不用看&#xff09; XDMA PCIE开发期间两个版本问题的解决https://blog.csdn.net/kris_paul/article/details/128131527 我说实话在这里卡了很久&#xff…...

编程日记 2025/5/13 5:55:35

HTML5 动画效果：淡入淡出（Fade In/Out）详解

HTML5 动画效果&#xff1a;淡入淡出&#xff08;Fade In/Out&#xff09;详解 淡入淡出&#xff08;Fade In/Out&#xff09;是一种常见的动画效果&#xff0c;使元素逐渐显现或消失&#xff0c;增强用户体验。以下是淡入淡出的详细介绍及实现示例。 1. 淡入淡出的特点 平滑…...

编程日记 2025/5/3 9:04:12

AI赋能R-Meta分析核心技术：从热点挖掘到高级模型、助力高效科研与论文发表

Meta分析是针对某一科研问题&#xff0c;根据明确的搜索策略、选择筛选文献标准、采用严格的评价方法&#xff0c;对来源不同的研究成果进行收集、合并及定量统计分析的方法&#xff0c;现已广泛应用于农林生态&#xff0c;资源环境等方面&#xff0c;成为Science、Nature论文的…...

编程日记 2025/5/12 17:42:37

maven如何从外部导包

1.找到你项目的文件位置&#xff0c;将外部要导入的包复制粘贴进你当前要导入的项目下。 2.从你的项目目录下选中要导入的包的pom文件即可导包成功 注意一定是选中对应的pom文件 导入成功之后对应的pom.xml文件就会被点亮...

编程日记 2025/5/13 8:14:56

使用python发送gmail邮件

首先要有一个gmail邮箱&#xff1a;https://accounts.google.com/lifecycle/steps/signup/name?ddm1&dshS237022023:1736341599452877&flowEntrySignUp&flowNameGlifWebSignIn&TLAE–Llw01wbAW0P9gYEloi_C5wBurZd0MeIi4B1j8daH-72CNcc-1qwapbIRA_UZ&conti…...

编程日记 2025/5/12 8:04:25

Android 绘制学习总结

1、刷新率介绍 我们先来理一下基本的概念&#xff1a; 1、60 fps 的意思是说&#xff0c;画面每秒更新 60 次 2、这 60 次更新&#xff0c;是要均匀更新的&#xff0c;不是说一会快&#xff0c;一会慢&#xff0c;那样视觉上也会觉得不流畅 3、每秒 60 次&#xff0c;也就是 1…...

编程日记 2025/5/12 7:24:30