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

2025年前端面试热门题目——HTML|CSS|Javascript|TS知识

news 来源：原创 2025/5/25 18:55:39

以下是对这些 HTML 面试问题的详细解答：

1. HTML 的 `src` 和 `href` 属性有什么区别?

src (Source) 属性：
- 用于嵌入资源，例如图像、脚本或 iframe。
- 加载资源时，当前页面的加载会暂停，直到资源加载完成。
- 常用于 <img>、<script> 和 <iframe> 标签。
- 例子：
```
<img src="image.jpg" alt="图片">
<script src="script.js"></script>
```
href (Hypertext Reference) 属性：
- 用于建立超链接，指向外部资源或内部的网页。
- 不会暂停页面加载，用户可以点击链接跳转。
- 常用于 <a>、<link> 和 <area> 标签。
- 例子：
```
<a href="https://example.com">访问示例网站</a>
<link href="styles.css" rel="stylesheet">
```

2. 什么是 HTML 语义化?

HTML 语义化是指通过使用具有明确含义的标签，使 HTML 结构具有更好的可读性和意义。

优点：
1. 提高可读性：开发者和浏览器可以更轻松理解文档结构。
2. 增强 SEO：语义化标签帮助搜索引擎更好地索引页面内容。
3. 增强可访问性：辅助工具（如屏幕阅读器）可以更好地解释页面内容。
常见语义化标签：
- header、footer、article、section：定义页面结构。
- nav：定义导航。
- aside：定义侧边内容。
- figure 和 figcaption：定义图像及其说明。

3. DOCTYPE(文档类型)的作用是什么?

定义： DOCTYPE 声明用于告诉浏览器当前 HTML 文档的标准。
作用：
1. 让浏览器以标准模式（Standard Mode）渲染页面。
2. 避免浏览器进入怪异模式（Quirks Mode），导致布局和样式出现问题。
HTML5 DOCTYPE 示例：
```
<!DOCTYPE html>
```

4. HTML 的 `script` 标签中 `defer` 和 `async` 有什么区别?

defer：
- 脚本异步加载，并在 HTML 解析完成后按顺序执行。
- 适合依赖 HTML 结构的脚本。
- 示例：
```
<script src="script.js" defer></script>
```
async：
- 脚本异步加载，加载完成后立即执行（可能在 HTML 未解析完成时执行）。
- 适合独立的脚本（如广告或分析工具）。
- 示例：
```
<script src="script.js" async></script>
```
区别总结：
- defer 保证脚本按顺序执行，适用于多个依赖的脚本。
- async 脚本独立，加载和执行更快。

5. 常用的 HTML meta 标签有哪些?

<meta> 标签用于定义页面的元信息，常用的有：

字符编码：
```
<meta charset="UTF-8">
```

视口设置（适配移动端）：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

描述：

<meta name="description" content="页面的描述内容">

关键字：

<meta name="keywords" content="HTML, CSS, JavaScript">

作者信息：

<meta name="author" content="作者名字">

防止搜索引擎索引：

<meta name="robots" content="noindex, nofollow">

6. HTML5 相比于 HTML有哪些更新?

新增语义化标签：
- 如：<header>、<footer>、<article>、<section>、<nav>。
新增表单功能：
- 增加了新的输入类型：email、url、date、number 等。
- 表单属性：required、placeholder、pattern。
支持多媒体：
- 新增 <audio> 和 <video> 标签。
新增 API：
- 地理位置：Geolocation API
- 本地存储：localStorage 和 sessionStorage
- 拖放：Drag and Drop API
- 画布：<canvas> 标签。
废弃元素：
- 移除了 <center>、<font> 等。

7. HTML 中，`img` 标签 `srcset` 属性的作用是什么?

作用： 提供一组图像 URL 和其对应的显示条件，允许浏览器根据设备像素密度或屏幕宽度选择最合适的图像。

示例：

<img src="default.jpg" srcset="small.jpg 480w, medium.jpg 1024w" sizes="(max-width: 600px) 480px, 1024px" alt="图片">

浏览器会根据视口大小和分辨率选择合适的图像。
480w 表示图像宽度为 480 像素。

8. HTML 行内元素有哪些?块级元素有哪些?空 (void) 元素有哪些?

行内元素：
- 不占据独立一行，内容按行排列。
- 常见：<a>、<span>、<img>、<strong>、<em>、<label>。
块级元素：
- 独占一行，通常是容器。
- 常见：<div>、<p>、<h1>~<h6>、<section>、<article>、<ul>、<li>。
空元素：
- 没有闭合标签，只有单个标签。
- 常见：<img>、<input>、<br>、<hr>、<meta>。

9. HTML 中，`title` 与 `h1` 标签的区别是什么?

title 标签：
- 定义网页的标题，显示在浏览器标签栏。
- 对 SEO 友好，用于搜索引擎结果的标题。
- 示例：
```
<title>我的网页标题</title>
```
h1 标签：
- 表示页面的主要标题。
- 用于内容层次结构，通常一个页面只有一个 h1。
- 示例：
```
<h1>欢迎来到我的网站</h1>
```

10. Canvas 和 SVG 有什么区别?

Canvas：

基于像素的绘图。
提供动态绘制能力，但不易修改内容。
使用 JavaScript 绘制，适合实时动画和复杂图像处理。

示例：

<canvas id="myCanvas" width="200" height="100"></canvas>
<script>const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');ctx.fillStyle = 'red';ctx.fillRect(0, 0, 150, 75);
</script>

SVG：
- 基于 XML 的矢量图形。
- 内容可以通过 DOM 轻松修改和操作。
- 适合静态图形或需要高分辨率的图形。
- 示例：
```
<svg width="100" height="100"><circle cx="50" cy="50" r="40" fill="blue" />
</svg>
```
区别总结：
- Canvas 注重像素，适合动画；SVG 注重结构，适合静态矢量图形。

如果需要进一步展开或补充某些问题，可以继续探讨！
以下是对这些 CSS 和 JavaScript 面试问题的详细解答：

1. 有哪些 CSS 选择器? 请分别介绍

CSS 选择器用于选择 HTML 元素以应用样式。常见选择器有：

通配符选择器 (*)：
- 选择所有元素。
- 示例：
```
* {margin: 0;padding: 0;
}
```
类型选择器：
- 选择特定标签的元素。
- 示例：
```
p {color: blue;
}
```
类选择器 (.)：
- 选择特定类的元素。
- 示例：
```
.classname {font-size: 14px;
}
```
ID 选择器 (#)：
- 选择特定 ID 的元素。
- 示例：
```
#idname {background-color: yellow;
}
```
属性选择器：
- 根据属性值选择元素。
- 示例：
```
input[type="text"] {border: 1px solid gray;
}
```
后代选择器 (A B)：
- 选择 B 元素，前提是它是 A 元素的后代。
- 示例：
```
div p {color: green;
}
```
子选择器 (A > B)：
- 选择 A 元素的直接子元素 B。
- 示例：
```
ul > li {list-style: none;
}
```
相邻兄弟选择器 (A + B)：
- 选择紧接在 A 后面的 B 元素。
- 示例：
```
h1 + p {font-size: 12px;
}
```
通用兄弟选择器 (A ~ B)：
- 选择与 A 同级的所有 B 元素。
- 示例：
```
h1 ~ p {color: gray;
}
```
伪类选择器：
- 选择元素的特定状态。
- 示例：
```
a:hover {text-decoration: underline;
}
```
伪元素选择器：
- 选择元素的特定部分。
- 示例：
```
p::first-line {font-weight: bold;
}
```

2. 如何计算 CSS 的优先级?

CSS 优先级是用数字计算的，规则如下：

行内样式：1000
ID 选择器：100
类选择器、伪类、属性选择器：10
标签选择器、伪元素：1
通配符、继承、默认样式：0

计算优先级的示例：

/* 优先级为：10 (类选择器) */
.class {color: red;
}/* 优先级为：100 (ID 选择器) */
#id {color: blue;
}/* 优先级为：101 (ID + 标签选择器) */
#id p {color: green;
}

规则：

优先级高的样式覆盖优先级低的。
同优先级时，后出现的覆盖前面的。

3. CSS 中可继承与不可继承属性有哪些?

可继承属性：
- 文本相关属性：
  - color
  - font 系列：font-family、font-size、font-style 等。
  - visibility
  - letter-spacing、word-spacing。
- 默认行为：通过继承从父级传递到子级。
不可继承属性：
- 盒模型相关属性：
  - margin
  - padding
  - border
  - width、height
  - box-shadow
- 布局相关属性：
  - display
  - position
  - z-index
  - overflow
强制继承：
- 对于不可继承属性，可以通过 inherit 强制继承：
```
div {width: inherit;
}
```

4. CSS 中 `display` 属性的值及其作用

display 属性决定元素的显示方式。常见值：

block：
- 块级元素，独占一行。
- 示例：
```
div {display: block;
}
```
inline：
- 行内元素，与其他元素共享一行。
- 示例：
```
span {display: inline;
}
```
inline-block：
- 具有行内特性，但可以设置宽高。
- 示例：
```
img {display: inline-block;
}
```
none：
- 隐藏元素，不占据空间。
- 示例：
```
p {display: none;
}
```
flex：
- 设为弹性布局容器。
- 示例：
```
div {display: flex;
}
```
grid：
- 设为网格布局容器。
- 示例：
```
div {display: grid;
}
```

5. 使用 `link` 和 `@import` 引用 CSS 的区别

<link> 标签：
- 在 HTML 文件中引入 CSS 文件。
- 优点：支持并行加载，适合现代浏览器。
- 示例：
```
<link rel="stylesheet" href="style.css">
```
@import 规则：
- 在 CSS 文件中导入另一个 CSS 文件。
- 缺点：浏览器需要解析 CSS 文件后再加载导入的文件，加载速度较慢。
- 示例：
```
@import url("style.css");
```

6. JavaScript 有哪些数据类型? 它们的区别是什么?

基本数据类型 (Primitive Types)：
- string、number、bigint、boolean、undefined、symbol、null。
- 特点：不可变、存储在栈中。
引用数据类型 (Reference Types)：
- object (包括数组、函数等)。
- 特点：可变、存储在堆中。

7. 如何判断 JavaScript 变量是数组?

Array.isArray() (推荐)：
```
Array.isArray([1, 2, 3]); // true
```
instanceof：
```
[1, 2, 3] instanceof Array; // true
```

Object.prototype.toString：

Object.prototype.toString.call([1, 2, 3]); // "[object Array]"

8. JavaScript 中 `null` 和 `undefined` 的区别是什么?

null：
- 表示一个空的或无效的对象引用。
- 需要手动赋值：
```
let value = null;
```
undefined：
- 表示变量未初始化或不存在。
- 系统自动赋值：
```
let value; // 默认是 undefined
```

9. `typeof null` 的结果是什么? 为什么?

结果：
```
typeof null; // "object"
```
原因：
这是 JavaScript 的一个历史遗留问题，null 最初被设计为对象的特殊值，因此 typeof null 返回 "object"。

10. `typeof` 和 `instanceof` 有什么区别?

typeof：
- 检测变量的数据类型。
- 适合检查基本数据类型。
- 示例：
```
typeof 42; // "number"
```
instanceof：
- 检测对象是否是某个构造函数的实例。
- 示例：
```
[] instanceof Array; // true
```

总结：

typeof 主要用于基础类型判断。
instanceof 用于引用类型判断，尤其是继承关系的判断。
以下是对这些 JavaScript 面试问题的详细解答：

1. 为什么 JavaScript 中 `0.1 + 0.2 !== 0.3`，如何让其相等?

原因：

JavaScript 使用 IEEE 754 双精度浮点数来表示数字，这种表示方式无法精确存储某些小数，例如 0.1 和 0.2。
计算过程中的精度损失导致：
```
0.1 + 0.2; // 0.30000000000000004
```

解决方法：

使用 toFixed() 或 toPrecision()：
- 将结果四舍五入到指定的小数位数。
```
(0.1 + 0.2).toFixed(1); // "0.3"
```
使用乘除法避免小数计算：
- 先将数字放大为整数计算，再缩小。
```
(0.1 * 10 + 0.2 * 10) / 10 === 0.3; // true
```
使用 EPSILON 判断：
- JavaScript 提供 Number.EPSILON 表示最小可区分值。
```
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON; // true
```

2. 说说你对 `fetch` 的理解，它有哪些优点和不足?

`fetch` 是什么?

fetch 是现代浏览器提供的原生 API，用于发起 HTTP 请求，返回一个基于 Promise 的结果。

优点：

语法简单：

使用 Promise，代码更清晰。

fetch(url).then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

原生支持：
- 内置支持，不需要额外的库。
可扩展性：
- 支持各种 HTTP 方法、头部设置、跨域请求等。
流式响应：
- 支持 ReadableStream，适合处理大文件。

不足：

不支持超时控制：

需要手动实现超时逻辑。

const controller = new AbortController();
setTimeout(() => controller.abort(), 5000); // 超时 5 秒
fetch(url, { signal: controller.signal });

错误处理复杂：

fetch 仅在网络错误时抛出异常，HTTP 状态码错误（如 404、500）不会自动触发 catch。

fetch(url).then(response => {if (!response.ok) {throw new Error('HTTP error ' + response.status);}return response.json();});

浏览器兼容性：
- IE 不支持，需要 polyfill。

3. JavaScript 中 `Object.keys` 的返回值是无序的吗?

是否有序：

根据规范：
1. 如果对象的属性是数字键（索引），Object.keys 返回的数组按升序排列。
2. 其他非数字键的属性按 插入顺序 返回。

示例：

const obj = { 1: 'one', 3: 'three', 2: 'two', a: 'A', b: 'B' };
console.log(Object.keys(obj)); // ["1", "2", "3", "a", "b"]

4. JavaScript 的 BigInt 和 Number 类型有什么区别?

区别：

表示范围：
- Number：安全整数范围为 -2^53 ~ 2^53（由 Number.MAX_SAFE_INTEGER 定义）。
- BigInt：支持任意大小的整数。

操作：

BigInt 无法与 Number 混合运算。

1n + 2; // TypeError
1n + BigInt(2); // 3n

精度：
- Number 是浮点类型，可能有精度损失。
- BigInt 精确表示整数。
性能：
- BigInt 操作效率较低。

示例：

console.log(Number.MAX_SAFE_INTEGER); // 9007199254740991
console.log(9007199254740991 + 1); // 9007199254740992 (精度丢失)
console.log(9007199254740991n + 1n); // 9007199254740992n (精确)

5. 什么是 JavaScript 的尾调用? 使用尾调用有什么好处?

尾调用：

尾调用是指一个函数的最后一步调用另一个函数。
尾调用条件：
1. 调用是函数的最后一步。
2. 返回调用的结果。

好处：

减少内存占用：
- 避免多余的调用栈帧，提升性能。
- 对递归函数尤为重要（即尾递归优化）。

示例：

普通递归（会累积调用栈）：

function factorial(n) {if (n === 1) return 1;return n * factorial(n - 1); // 不是尾调用
}

尾递归（优化调用栈）：

function factorial(n, acc = 1) {if (n === 1) return acc;return factorial(n - 1, acc * n); // 尾调用
}

6. 使用 `let` 全局声明变量，能通过 `window` 对象取到吗?

答案：不能。
原因：
- 使用 let 或 const 声明的全局变量不会成为 window 对象的属性。
- 示例：
```
let x = 10;
console.log(window.x); // undefined
```
对比：
- 使用 var 声明的全局变量会成为 window 对象的属性。
```
var y = 20;
console.log(window.y); // 20
```

7. `let`、`const` 和 `var` 的区别是什么?

1. `var`：

作用域： 函数作用域。
变量提升： 会提升至作用域顶部，默认值为 undefined。
可重复声明： 可以在同一作用域内多次声明。

2. `let`：

作用域： 块作用域。
变量提升： 也会提升，但在提升前无法访问（称为“暂时性死区”）。
不可重复声明： 同一作用域内不允许重复声明。

3. `const`：

作用域： 块作用域。
常量： 声明时必须初始化，值不能重新赋值（对象属性可以修改）。
不可重复声明： 同一作用域内不允许重复声明。

8. 说说你对 JS 作用域的理解?

1. 什么是作用域?

作用域是指代码中变量、函数或对象的可访问范围。

2. 分类：

全局作用域：
- 定义在任何函数或块外的变量，具有全局可访问性。
- 示例：
```
var globalVar = "I am global";
```

函数作用域：

使用 var 声明的变量在函数内部是局部的。

示例：

function scopeTest() {var localVar = "I am local";console.log(localVar);
}

块作用域：
- 使用 let 或 const 声明的变量只能在声明的块中访问。
- 示例：
```
if (true) {let blockVar = "I am block scoped";console.log(blockVar);
}
```

3. 闭包与作用域：

闭包是函数能够“记住”并访问其定义时的作用域。

示例：

function outer() {let outerVar = "I am outer";return function inner() {console.log(outerVar); // 闭包访问};
}
const fn = outer();
fn(); // "I am outer"

1. ES6 箭头函数和普通函数有什么区别?

1.1 语法上的区别：

箭头函数更简洁，不需要 function 关键字：

// 普通函数
function sum(a, b) {return a + b;
}// 箭头函数
const sum = (a, b) => a + b;

1.2 特性上的区别：

this 绑定规则：

箭头函数没有自己的 this，会捕获其定义时的上下文 this。
普通函数的 this 根据调用方式动态绑定。

const obj = {value: 10,arrowFunc: () => this.value, // 捕获定义时的上下文normalFunc() {return this.value; // 根据调用时绑定},
};console.log(obj.arrowFunc()); // undefined (指向全局或模块的 this)
console.log(obj.normalFunc()); // 10

arguments 对象：
- 箭头函数没有 arguments 对象，可以通过剩余参数代替。
- 普通函数有 arguments，可以访问函数的实际参数。
```
const arrowFunc = () => console.log(arguments); // Error
function normalFunc() {console.log(arguments); // 可用
}
```

作为方法或事件处理函数：

箭头函数的 this 不会改变，适合绑定事件。
普通函数会动态绑定，可能需要手动处理 this。

const obj = {value: 42,handler: () => console.log(this.value), // 指向全局或模块
};
document.body.addEventListener('click', obj.handler);

是否可作为构造函数：
- 箭头函数不能作为构造函数。
- 普通函数可以通过 new 操作符生成实例。

2. ES6 箭头函数能当构造函数吗?

答案：不能。

箭头函数没有 [[Construct]] 内部方法，无法用 new 操作符调用。

示例：

const Arrow = () => {};
const obj = new Arrow(); // TypeError: Arrow is not a constructor

3. ES6 有哪些新特性?

变量声明：let 和 const
- 块作用域，避免变量提升。
- 示例：
```
let a = 10;
const b = 20;
```
箭头函数
- 简洁语法，自动绑定 this。
- 示例：
```
const add = (a, b) => a + b;
```
模板字符串
- 支持多行和嵌入表达式。
- 示例：
```
const greeting = `Hello, ${name}`;
```

解构赋值

解构对象和数组。

示例：

const [a, b] = [1, 2];
const { x, y } = { x: 3, y: 4 };

展开运算符 ...
- 用于复制、合并或解构。
- 示例：
```
const arr = [...arr1, ...arr2];
```

默认参数

函数参数支持默认值。

示例：

const greet = (name = 'Guest') => `Hello, ${name}`;

类和继承

新增 class 和 extends。

示例：

class Person {constructor(name) {this.name = name;}
}
class Student extends Person {constructor(name, grade) {super(name);this.grade = grade;}
}

模块化

使用 import 和 export。

示例：

import { foo } from './module.js';
export const bar = 42;

Promise

用于异步编程。

示例：

const promise = new Promise((resolve, reject) => {resolve('Success');
});

Symbol 和 Map/Set
- 新的数据类型和数据结构。
- 示例：
```
const sym = Symbol('id');
const map = new Map();
```

4. TypeScript 有哪些常用类型?

基本类型：
- string, number, boolean, null, undefined, any, void, never.
数组类型：
- number[] 或 Array<number>。
- 示例：
```
const nums: number[] = [1, 2, 3];
```
元组类型：
- 固定长度、已知类型的数组。
- 示例：
```
const tuple: [number, string] = [42, 'Hello'];
```
枚举类型：
- 定义一组命名常量。
- 示例：
```
enum Direction {Up,Down,Left,Right,
}
```

对象类型：

定义对象结构。

示例：

interface Person {name: string;age: number;
}

联合类型：
- 变量可为多种类型之一。
- 示例：
```
let value: string | number;
```
类型别名：
- 定义自定义类型。
- 示例：
```
type ID = string | number;
```

5. 什么是 TypeScript 的对象类型? 怎么定义对象类型?

对象类型定义：

在 TypeScript 中，对象类型是描述对象结构的类型。
可以使用 interface 或 type 定义对象类型。

定义方式：

使用接口 (interface)：

interface Person {name: string;age: number;
}const user: Person = {name: 'Alice',age: 25,
};

使用类型别名 (type)：

type Person = {name: string;age: number;
};const user: Person = {name: 'Bob',age: 30,
};

嵌套对象类型：

interface Address {city: string;zipCode: number;
}interface Person {name: string;address: Address;
}const user: Person = {name: 'Charlie',address: {city: 'New York',zipCode: 10001,},
};

可选属性和只读属性：

interface Person {name: string;age?: number; // 可选readonly id: string; // 只读
}const user: Person = {name: 'Diana',id: '12345',
};// user.id = '54321'; // Error: Cannot assign to 'id' because it is a read-only property

2025年前端面试热门题目——HTML|CSS|Javascript|TS知识

以下是对这些 HTML 面试问题的详细解答： 1. HTML 的 src 和 href 属性有什么区别? src (Source) 属性： 用于嵌入资源，例如图像、脚本或 iframe。加载资源时，当前页面的加载会暂停，直到资源加载完成。常用于 <img&g…...

编程日记 2025/5/25 18:55:39

将4G太阳能无线监控的视频接入电子监控大屏，要考虑哪些方面？

随着科技的飞速发展，4G太阳能无线监控系统以其独特的优势在远程监控领域脱颖而出。这种系统结合了太阳能供电的环保特性和4G无线传输的便捷性，为各种环境尤其是无电或电网不稳定的地区提供了一种高效、可靠的视频监控解决方案。将这些视频流接入大屏显示…...

编程日记 2025/5/25 18:08:54

【102. 二叉树的层序遍历中等】

题目： 给你二叉树的根节点 root ，返回其节点值的层序遍历。 （即逐层地，从左到右访问所有节点）。示例 1： 输入：root [3,9,20,null,null,15,7] 输出：[[3],[9,20],[15,7]] 示例…...

编程日记 2025/5/24 20:35:56

文件包含tomato靶机通关

靶机地址：192.168.152.152 注：靶机打开后在 kali 中扫描一下就能得到打开网站第一步信息收集将网址放到 dirb 中扫描一下得到了三个目录我们挨个访问一下第一个是主目录第二个是主页面第三个报错第二步我们在主目录页面继续访问我们进行…...

编程日记 2025/5/25 15:36:42

oracle dblink 的创建及使用

Oracle Database Link（DB Link）是Oracle提供的一种功能，允许你在一个数据库中直接访问另一个远程或本地数据库的对象（如表、视图、序列等）。DB Link的设置简化了跨数据库操作，使得数据的集成和同步变得更加…...

编程日记 2025/5/25 8:17:55

java开发入门学习五-流程控制

流程控制语句 if， if...else， if..else if..else 与前端相同略 switch case 与前端不同的是case不能使用表达式，使用表达式会报错 class TestSwitch {public static void main(String[] args) {// switch 表达式只能是特定的数据类型…...

编程日记 2025/5/25 18:25:27

【蓝桥杯——物联网设计与开发】拓展模块3 - 温度传感器模块

一、温度传感器模块 （1）资源介绍 🔅原理图蓝桥杯物联网竞赛实训平台提供了一个拓展接口 CN2，所有拓展模块均可直接安装在 Lora 终端上使用； 图1 拓展接口温度传感器模块电路原理图如下所示： 图2 …...

编程日记 2025/5/25 18:04:22

Zookeeper 底层原理解析

一、引言在分布式系统的浩瀚星空中，Zookeeper 宛如一颗最为闪耀的导航星，为众多分布式应用指引方向、保驾护航。无论是大名鼎鼎的 Hadoop、HBase，还是其他各类复杂的分布式架构，Zookeeper 都扮演着不可或缺的关键角色。它如同一…...

编程日记 2025/5/23 7:54:29

面试题整理9----谈谈对k8s的理解1

谈谈对k8s的理解 1. Kubernetes 概念 1.1 Kubernetes是什么 Kubernetes 是一个可移植、可扩展的开源平台，用于管理容器化的工作负载和服务，方便进行声明式配置和自动化。Kubernetes 拥有一个庞大且快速增长的生态系统，其服务、支持和工具的…...

编程日记 2025/5/25 17:24:32

PromptGIP：Unifying lmage Processing as Visual Prompting Question Answering

“Unifying Image Processing as Visual Prompting Question Answering” 文章提出了一种名为 PromptGIP 的通用模型，将图像处理任务统一为视觉提示问答范式，在多个图像处理任务上展现出良好性能，为通用图像处理提供了新的思路和方法。 confe…...

编程日记 2025/5/24 15:12:48

chart文件结构

在 Helm 中，Chart 是一个用于定义、安装和升级 Kubernetes 应用程序的包。Chart 文件结构遵循一定的目录和文件组织方式，以下是典型的 Helm Chart 文件结构： 1. Chart 文件结构示例 mychart/ ├── Chart.yaml # 描述 Chart 的基…...

编程日记 2025/5/19 8:46:08

SQL优化插入数据 insert优化批量插入 insert into tb_test 2values(1, Tom), (2, Cat), (3, jerry); 手动提交事务 start transaction; insert into test1 values(4, Tom), (5, Cat), (6, jerry); insert into test1 values(7, Tom), (8, Cat), (9, jerry); insert int…...

编程日记 2025/5/23 20:00:50

输出1-100之间的随机数，控制输出格式，每行10个（注释有详解）

C 随机数生成与格式化输出在编程中，随机数的生成是一个常见的需求，尤其是在游戏开发、模拟实验和数据分析等领域。本文将通过一个简单的 C 程序来演示如何生成随机数并进行格式化输出。我们将逐步解析代码，并讨论其工作原理及应用场景。代…...

编程日记 2025/5/24 8:07:07

【数字化】华为数字化转型架构蓝图-2

目录 1、客户联结的架构思路 1.1 ROADS体验设计 1.2 具体应用场景 1.3 统一的数据底座 1.4 案例与成效 2、一线作战平台的架构思路 2.1 核心要素 2.2 关键功能 2.3 实施路径 2.4 案例与成效 3、能力数字化的架构思路 3.1 能力数字化的核心目标 3.2 能力数字化的实…...

编程日记 2025/5/23 17:04:36

MyBatis是什么？为什么有全自动ORM框架还是MyBatis比较受欢迎？

MyBatis是什么？ MyBatis是一个半自动的ORM持久层框架，内部封装了JDBC，mybatis是通过XML或注解的方式将需要执行的statement配置，支持定制化sql，存储过程以及高级映射。解释所谓的半自动ORM意思就是将JDBC的工作交…...

编程日记 2025/5/21 10:35:31

基础元器件的学习

1、二极管 1.1二极管的符号 ZD是稳压二极管 VD、V、D是普通二极管的符号。 1.2二极管的反向恢复时间首先交流电为上正下负，然后下正上负。当二极管接到反向电压，二极管存在寄生电容，电压不能立刻突变，当输入频率变高时&#…...

编程日记 2025/5/22 23:42:57

GTID下复制问题和解决

环境介绍数据库1主2从，mysql版本是v5.19 表结构一、主库新增记录，从库提示主键冲突模拟故障 1， master上关闭 sql_log_bin,删除id 103 后打开 2， 确认此时从库有id103,主库没有 3， master insert id103 主从异常…...

编程日记 2025/5/25 2:03:45

Linux 下的 GPT 和 MBR 分区表详解

文章目录 Linux 下的 GPT 和 MBR 分区表详解一、分区表的作用二、MBR（Master Boot Record）1. **特点**2. **优点**3. **缺点**4. **适用场景** 三、GPT（GUID Partition Table）1. **特点**2. **优点**3. **缺点**4. **适用场景** 四…...

编程日记 2025/5/19 23:50:55

mysql的事务控制和数据库的备份和恢复

事务控制语句行锁和死锁行锁两个客户端同时对同一索引行进行操作客户端1正常运行客户端2想修改，被锁行除非将事务提交才能继续运行死锁客户端1删除第5行客户端2设置第1行为排他锁客户端1删除行1被锁客户端2更新行5被锁如何避免死锁 mysql的备份和还…...

编程日记 2025/5/24 6:16:25

2014年IMO第4题

△ A B C \triangle ABC △ABC 中, B C BC BC 上有一点 P P P 满足 ∠ B A P = ∠ A C B \angle BAP=\angle ACB ∠BAP=∠ACB, 还有一点 Q Q Q 满足 ∠ A = Q A C = ∠ A B C \angle A=QAC=\angle ABC ∠A=QAC=∠ABC. 分别延长 A P AP AP, A Q AQ AQ 一倍至 M M M, N …...

编程日记 2025/5/21 1:36:35

如何实现层叠布局

文章目录 1 概念介绍2 使用方法3 示例代码我们在上一章回中介绍了GirdView Widget,本章回中将介绍Stack这种Widget，闲话休提，让我们一起Talk Flutter吧。 1 概念介绍在Flutter中Stack主要用来叠加显示其它的Widget，类似我们日常生活中的楼层或者说PS中的图层，因此它也是一…...

编程日记 2025/5/23 18:09:37

Qwen2.5-7B-Instruct Lora微调

Qwen2.5-7B-Instruct Lora 微调本文简要介绍如何基于 transformers、peft 等框架，对 Qwen2.5-7B-Instruct 模型进行 Lora 微调。Lora 是一种高效微调方法。环境配置在完成基本环境配置和本地模型部署的情况下，你还需要安装一些第三方库&#xff0c…...

编程日记 2025/5/20 14:39:51

MacOS安装MySQL

官网下载MySQL 苹果芯片选择ARM版本安装过程中会要求你输入root的密码（不少于8位），这里设置为12345678 打开系统设置查看是否成功安装MySQL 配置MySQL环境变量 vi ~/.zshrc加入一行export PATH$PATH:/usr/local/mysql/bin 执行source ~/…...

编程日记 2025/5/21 16:52:15

基础库正则表达式

我们已经可以用requests 库来获取网页的源代码，得到 HTML 代码。但我们真正想要的数据是包含在 HTML代码之中的，要怎样才能从 HTML,代码中获取想要的信息呢?正则表达式就是其中一个有效的方法。本篇博客我们将了解一下正则表达式的相关用法。正则表达…...

编程日记 2025/5/23 8:09:48

Matlab 和 R 语言的数组索引都是从 1 开始，并且是左闭右闭的

文章目录一、前言二、主要内容三、小结 🍉 CSDN 叶庭云：https://yetingyun.blog.csdn.net/ 一、前言在早期的计算机科学中，数组索引从 1 开始是很常见的。例如，Fortran 和 Pascal 等编程语言也采用了从 1 开始的索引。这种索引…...

编程日记 2025/5/20 10:19:58

选择排序和冒泡排序；MySQL架构

1. 选择排序和冒泡排序 （1）选择排序原理： 选择排序有升序和降序两种排序方法。升序排序的原理是：对于一个无序数列，先假定其中一个数为这个数列的最小值，然后让这个假定最小值和其他数依次比较&#xff0…...

编程日记 2025/5/21 1:38:40

蓝桥杯算法训练黑色星期五

题目描述有些西方人比较迷信，如果某个月的13号正好是星期五，他们就会觉得不太吉利，用古人的说法，就是“诸事不宜”。请你编写一个程序，统计出在某个特定的年份中，出现了多少次既是13号又是星期五的情形&am…...

编程日记 2025/5/25 7:29:17

Mybatis-Plus快速入门

参考：黑马MyBatisPlus教程全套视频教程，快速精通mybatisplus框架 1.Mapper-plus配置 1.MapperScan("Mapper目录的位置") 2.Mapper层文件需要继承BaseMapper extends BaseMapper<实体类> 3.开启日志 4.配置类 Configuration public cl…...

编程日记 2025/5/21 10:27:08

MySQL库的操作

目录 1. 创建数据库2. 创建数据库案例3. 认识系统编码以及字符集和校验规则4. 操纵数据库4.1 查看数据库4.2 显示创建语句4.3 修改数据库4.4 数据库的删除4.5 备份和恢复4.6 查看连接情况 1. 创建数据库 （1）语法： create database db_name;…...

编程日记 2025/5/22 20:48:43

JVM性能优化一：初识内存泄露-内存溢出-垃圾回收

本文主要是让你充分的认识到什么叫做内存泄露，什么叫做内存溢出，别再傻傻分不清了，别再动不动的升级服务器的内存了。文章目录 1.基本概念1.1.内存泄露1.2.内存溢出1.3.垃圾回收1.4.内存泄露-垃圾回收-内存溢出三者的关系关系 2.代码示例2.…...

编程日记 2025/5/22 17:01:38

2024年山东省职业院校技能大赛网络建设与运维X86架构与ARM架构搭建赛题

完整赛题解析主页联系！ 一、X86架构计算机操作系统安装与管理 1.PC1 系统为 ubuntu-desktop-amd64 系统（已安装，语言为英文），登录用户为 ubuntu，密码为Key-1122。配置ubuntu用户能免密使用sudo命令。 sud…...

编程日记 2025/5/24 22:17:02

flask_sqlalchemy event监听查询事件

flask_sqlalchemy event监听查询事件在Flask-SQLAlchemy中，可以使用事件监听器来监控查询事件。这可以通过listens_for(ModelClass, “event_name”)装饰器来实现，其中ModelClass是你想要监控的模型类，event_name是你想要监控的事件名称&…...

编程日记 2025/5/23 4:21:50

解决vscode ssh远程连接服务器一直卡在下载 vscode server问题

目录方法1：使用科学上网方法2：手动下载方法3 在使用vscode使用ssh远程连接服务器时，一直卡在下载"vscode 服务器"阶段，但MobaXterm可以正常连接服务器，大概率是网络问题，解决方法如下: 方…...

编程日记 2025/5/25 9:34:20

OpenAI发布全新AI模型 o3 与 o3-mini：推理与编码能力迎来重大突破. AGI 来临

每周跟踪AI热点新闻动向和震撼发展想要探索生成式人工智能的前沿进展吗？订阅我们的简报，深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同，从行业内部的深度分析和实用指南中受益。不要错过这个机会，成为AI领…...

编程日记 2025/5/21 6:47:18

Java --- 多线程

目录前言： 一.线程的创建： 1.通过继承 Thread 类来创建线程： 2.通过Runnable接口创建线程： 3.通过Java8引入的lambda语法： 线程的优先级： 二.线程的生命周期： 三. 中断线程&#xff1a…...

编程日记 2025/5/22 23:36:28

医学图像三维重建，原图与灰度图叠加，原图与多图叠加显示；多图像融合显示，彩色灰度图像融合

Part1: Summary 我们在做图像分割或融合时，有时需要显示多份数据进行叠加显示；可能需要这种效果： 四视图： 基于这个，我看一下网上的实现总结了一下；实现了以下几种效果： Part2：多种…...

编程日记 2025/5/21 18:07:49

Linux中的多线程

1.Linux线程概念什么叫做线程? 我们认为，线程操作系统调度的基本单位！重新理解进程? Linux内核观点：进程是承担分配系统资源的基本实体，即操作系统分配资源，是以进程为单位进行分配的。线程是进程内部的执行流资源…...

编程日记 2025/5/24 7:00:50

hive常用函数有哪些

Hive是一个基于Hadoop的数据仓库工具，它提供了类似于SQL的接口，用于数据查询和分析。Hive提供了许多内置函数，这些函数可以分为几种类型，包括： • 字符串函数：用于处理字符串数据。 • concat()&#xff1…...

编程日记 2025/5/18 0:16:53

深度学习试题及答案解析（二）

1. 神经风格转换中，优化算法的每次迭代更新的是什么？ 神经风格转换（Neural Style Transfer, NST）是一种使用深度学习技术，特别是卷积神经网络（CNN），来将一幅图像的风格应用到另一幅图…...

编程日记 2025/5/25 13:37:04

【CSS in Depth 2 精译_089】15.2：CSS 过渡特效中的定时函数

当前内容所在位置（可进入专栏查看其他译好的章节内容） 第五部分添加动效 ✔️【第 15 章过渡】 ✔️ 15.1 状态间的由此及彼15.2 定时函数 ✔️ 15.2.1 定制贝塞尔曲线 ✔️15.2.2 阶跃 ✔️ 15.3 非动画属性文章目录 15.2 定时函数 Timing function…...

编程日记 2025/5/25 8:59:46

LINUX内核常用加锁

1、mutex互斥锁互斥锁的实现主要利用到了原子变量可以锁内存总线的机制来对lock变量值进行原子修改，并通过在加锁及释放锁过程中引入内存屏障(加锁引入lfence，释放锁引入sfence)，来确保锁临界区资源(Critical Section)能够在不同的CPU之间可…...

编程日记 2025/5/23 15:57:18

【Select 语法全解密】.NET开源ORM框架 SqlSugar 系列

系列文章目录 🎀🎀🎀 .NET开源 ORM 框架 SqlSugar 系列 🎀🎀🎀 文章目录系列文章目录前言一、Select 执行位置二、返回一个字段和多个字段三、单表返回DTO四、多表返回DTO4.1 手动DTO4.2 实体自动映射14.…...

编程日记 2025/5/24 3:43:02

STM32之GPIO输出与输出

欢迎来到破晓的历程的博客 ⛺️不负时光，不负己✈️ 文章目录一.GPIO输入1.1GPIP简介1.2GPIO基本结构1.3GPIO位结构1.4GPIO的八种模式1.4.1浮空/上拉/下拉输入1.4.2 模拟输入1.4.3 推挽输出\开漏输出二.GPIO输入2.1.按键介绍2.2传感器模块介绍2.3按键电路一.G…...

编程日记 2025/5/25 4:13:07

【数据库】Redis—Java 客户端

一、常见的几种 Java 客户端 Jedis：以 Redis 命令作为方法的名称，便于学习，简单实用，但其实例是线程不安全的，多线程下需要基于连接池来使用。lettce：基于 Netty 实现，支持同步、异步和响应式编…...

编程日记 2025/5/21 1:54:04

《图解机器学习》（杉山将著）第一部分绪论学习笔记

《图解机器学习》（杉山将著）第一部分绪论学习笔记《图解机器学习》（杉山将著）第一部分绪论学习笔记一、什么是机器学习1.1 学习的种类1.2 机器学习任务的例子1.3 机器学习的方法二、学习模型2.1 线性模型2.2 核模型2.3 层级模型…...

编程日记 2025/5/25 3:14:02

Deepin和Windows传文件（Xftp，WinSCP）

在Linux系统和Windows系统传输文件，通常通过Windows系统中安装的Xftp和WinSCP访问Linux系统，在访问前需要安装配置SSH-Server 安装SSH-Server 安装SSH-Server sudo apt-get install openssh-server ssh -v 启动SSH服务 sudo systemctl start ssh //也…...

编程日记 2025/5/25 17:23:30

C语言习题2.0

C语言习题1.0 C语言习题-CSDN博客目录 C语言习题1.0 C语言习题-CSDN博客找一个数字的连续因子求N个分数的和正整数AB 函数预处理文件处理操作符找一个数字的连续因子 //找连续因子,及其个数 int main() {int a;scanf("%d", &a);int num 0; …...

编程日记 2025/5/24 21:03:21

达梦本地编码：PG_GBK, 导入文件编码：PG_UTF8错误

问题达梦本地编码：PG_GBK, 导入文件编码：PG_UTF8错误解决右键管理服务器查看配置新建一个数据库实例，配置跟之前的保持一致新建一个用户，跟以前的用户名一样在用户上，右键导入，选择dmp的位置导…...

编程日记 2025/5/22 22:59:19

【Apache Paimon】-- 11 -- Flink 消费 kakfa 写 S3 File

目录 1、项目构建 2、项目新增和修改 2.1 pom.xml 新增依赖 2.2 本地测试或者 flink on k8s 时，新增 S3FileSystemFactory.java 第一步：创建包=org.apache.flink.fs.s3hadoop 第二步：新增 java 类 S3FileSystemFactory 特别注意（1）本地测试时需要新增以下内容（…...

编程日记 2025/5/24 19:58:00

使用C语言编写UDP循环接收并打印消息的程序

使用C语言编写UDP循环接收并打印消息的程序前提条件程序概述伪代码C语言实现编译和运行C改进之自由设定端口注意事项在本文中，我们将展示如何使用C语言编写一个简单的UDP服务器程序，该程序将循环接收来自指定端口的UDP消息，并将接收到的消息打印到控制台。我们将使用POSIX套…...

编程日记 2025/5/20 23:34:51

1. HTML 的 src 和 href 属性有什么区别?