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

HTML、CSS 和 JavaScript 常见用法及使用规范

news 来源：原创 2025/8/23 15:21:05

一、HTML 深度剖析

1. 文档类型声明

HTML 文档开头的 <!DOCTYPE html> 声明告知浏览器当前文档使用的是 HTML5 标准。它是文档的重要元信息，能确保浏览器以标准模式渲染页面，避免怪异模式下的兼容性问题。

2. 元数据标签

<meta> 标签：用途广泛，比如设置字符编码 <meta charset="UTF-8">，保证页面能正确显示各种语言字符。还可用于设置页面描述 <meta name="description" content="这是一个示例网页的描述">，利于搜索引擎优化。
视口设置：<meta name="viewport" content="width=device-width, initial-scale=1.0"> 可让页面在不同设备上正确缩放，实现响应式布局。

3. 超链接标签

<a> 标签：基本用法是 <a href="https://www.example.com">访问示例网站</a>。此外，还能创建邮件链接 <a href="mailto:example@example.com">发送邮件</a> 和下载链接 <a href="example.pdf" download>下载 PDF 文件</a>。
锚点链接：用于页面内跳转，先在目标位置设置 <a id="section1"></a>，然后在链接处使用 <a href="#section1">跳转到第一节</a>。

4. 列表标签

无序列表：<ul> 标签，每个列表项用 <li> 包裹，如 <ul><li>苹果</li><li>香蕉</li></ul>。
有序列表：<ol> 标签，同样用 <li> 表示列表项，浏览器会自动为其编号。
定义列表：由 <dl> 包裹，包含 <dt>（定义术语）和 <dd>（术语定义），例如 <dl><dt>HTML</dt><dd>超文本标记语言</dd></dl>。

5. 表单标签

<form> 标签：用于收集用户输入，通过 action 属性指定表单数据提交的 URL，method 属性指定提交方式（GET 或 POST）。
输入字段：常见的有 <input type="text">（文本输入框）、<input type="password">（密码输入框）、<input type="radio">（单选框）、<input type="checkbox">（复选框）、<input type="submit">（提交按钮）等。
下拉列表：使用 <select> 和 <option> 标签创建，如 <select><option value="option1">选项 1</option></select>。
文本域：<textarea> 标签用于输入多行文本。

6. 多媒体标签

<img> 标签：用于显示图片，除了 src 和 alt 属性，还可通过 width 和 height 属性设置图片尺寸。
<video> 标签：可嵌入视频，支持多种视频格式，如 <video src="example.mp4" controls></video>，controls 属性添加视频控制条。
<audio> 标签：用于播放音频，用法与 <video> 类似，如 <audio src="example.mp3" controls></audio>。

7. 框架标签

<iframe> 标签：可在页面中嵌入另一个网页，例如 <iframe src="https://www.example.com" width="500" height="300"></iframe>。

8. HTML 实体

当需要显示特殊字符（如 <、>、& 等）时，可使用 HTML 实体，如 < 表示 <，> 表示 >，& 表示 &。

9. 表单元素及属性

表单 `<form>`

表单是 HTML 中用于收集用户输入数据的重要元素，以下是常见属性：

属性	描述	示例
`action`	指定表单数据提交的 URL	`<form action="submit.php">`
`method`	表单数据提交的方式，有 `GET` 和 `POST` 两种	`<form method="POST">`
`enctype`	当表单包含文件上传时，指定表单数据的编码类型，常见值有 `application/x-www-form-urlencoded`、`multipart/form-data` 等	`<form enctype="multipart/form-data">`

除了基本的 action、method 和 enctype 属性外，还可以使用 novalidate 属性来禁用表单的默认验证。

<form action="submit.php" method="POST" enctype="multipart/form-data" novalidate><!-- 表单内容 -->
</form>

文本框 `<input type="text">`

文本框用于接收用户输入的单行文本，常见属性如下：

属性	描述	示例
`name`	表单数据提交时的名称	`<input type="text" name="username">`
`value`	文本框的初始值	`<input type="text" value="默认文本">`
`placeholder`	提示用户输入的文本，当文本框为空时显示	`<input type="text" placeholder="请输入用户名">`
`readonly`	设置文本框为只读，用户不能修改其内容	`<input type="text" readonly>`
`disabled`	禁用文本框，用户不能与之交互，且提交表单时该字段数据不会被发送	`<input type="text" disabled>`
`maxlength`	限制用户输入的最大字符数	`<input type="text" maxlength="20">`

自动完成：autocomplete 属性可设置文本框是否启用自动完成功能，值可以是 on 或 off。

<input type="text" name="email" autocomplete="off">

输入模式：inputmode 属性可以指定输入的类型，如 numeric 表示只能输入数字。

<input type="text" name="phone" inputmode="numeric">

密码框 `<input type="password">`

密码框用于输入密码，其属性与文本框类似，输入的内容会以星号或圆点显示。

<input type="password" name="password" placeholder="请输入密码">

按钮 `<input type="button">`、`<button>`

按钮可用于触发操作，常见属性如下：

属性	描述	示例
`value`	按钮上显示的文本（`<input type="button">`）	`<input type="button" value="点击我">`
`disabled`	禁用按钮，用户不能点击	`<button disabled>禁用按钮</button>`
`onclick`	定义按钮被点击时执行的 JavaScript 代码	`<button onclick="alert('按钮被点击')">点击触发事件</button>`

除了使用 onclick 事件，还可以通过 disabled 属性动态控制按钮的可用性。

<button id="myButton" disabled>禁用按钮</button>
<script>const button = document.getElementById('myButton');// 模拟一段时间后启用按钮setTimeout(() => {button.disabled = false;}, 3000);
</script>

复选框 `<input type="checkbox">`

复选框允许用户选择多个选项，常见属性如下：

属性	描述	示例
`name`	表单数据提交时的名称	`<input type="checkbox" name="hobbies">`
`value`	复选框选中时提交的值	`<input type="checkbox" value="reading">`
`checked`	设置复选框默认选中	`<input type="checkbox" checked>`

单选框 `<input type="radio">`

单选框允许用户从一组选项中选择一个，同一组单选框需使用相同的 name 属性。

属性	描述	示例
`name`	用于分组，同一组单选框使用相同名称	`<input type="radio" name="gender">`
`value`	单选框选中时提交的值	`<input type="radio" value="male">`
`checked`	设置单选框默认选中	`<input type="radio" checked>`

可以使用 JavaScript 来控制复选框和单选框的选中状态。

<input type="checkbox" id="check1"> 选项 1
<input type="checkbox" id="check2"> 选项 2
<button onclick="checkAll()">全选</button>
<script>function checkAll() {const checkboxes = document.querySelectorAll('input[type="checkbox"]');checkboxes.forEach(checkbox => {checkbox.checked = true;});}
</script>

列表框 `<select>` 和 `<option>`

列表框用于提供一组选项供用户选择，常见属性如下：

属性	描述	示例
`name`	表单数据提交时的名称	`<select name="city">`
`multiple`	允许用户选择多个选项	`<select multiple>`
`size`	指定列表框中可见的选项数量	`<select size="3">`
`value`	`<option>` 标签的属性，指定该选项被选中时提交的值	`<option value="beijing">北京</option>`
`selected`	设置 `<option>` 默认选中	`<option selected>默认选项</option>`

10. 其他 HTML 元素和属性

表格 `<table>`

表格用于展示数据，包含 <tr>（行）、<th>（表头单元格）和 <td>（数据单元格）。

<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>25</td></tr>
</table>

图像 `<img>`

图像元素用于显示图片，常见属性如下：

属性	描述	示例
`src`	图片的 URL 地址	`<img src="image.jpg">`
`alt`	图片无法显示时显示的替代文本	`<img alt="这是一张图片">`
`width` 和 `height`	设置图片的宽度和高度	`<img width="200" height="150">`

视频 `<video>`

可以使用 preload 属性来控制视频的预加载策略，有 auto、metadata 和 none 三种值。

<video src="video.mp4" preload="metadata" controls></video>

音频 `<audio>`

可以使用 loop 属性让音频循环播放。

<audio src="audio.mp3" loop controls></audio>

二、CSS 深入探究

1. 盒模型

盒模型由内容区（content）、内边距（padding）、边框（border）和外边距（margin）组成。可通过 width 和 height 属性设置内容区大小，padding、border 和 margin 属性分别控制内边距、边框和外边距。

.box {width: 200px;height: 200px;padding: 20px;border: 1px solid black;margin: 20px;
}

2. 浮动与清除浮动

浮动：使用 float 属性（left 或 right）可让元素脱离正常文档流，实现多列布局。但浮动元素会导致父元素高度塌陷。
清除浮动：可使用 clear 属性（left、right 或 both）清除浮动影响，也可使用 BFC（块级格式化上下文）来解决高度塌陷问题。

3. 定位

静态定位：默认值，元素按照正常文档流排列。
相对定位：position: relative，元素相对于其正常位置进行偏移，不会脱离文档流。
绝对定位：position: absolute，元素相对于最近的已定位祖先元素进行定位，会脱离文档流。
固定定位：position: fixed，元素相对于浏览器窗口固定位置，常用于创建固定导航栏等。
粘性定位：position: sticky，元素在滚动时固定在某个位置，直到滚动出特定区域。

4. 弹性布局（Flexbox）

弹性布局是一种一维布局模型，可轻松实现元素的水平和垂直对齐。

.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */
}

5. 网格布局（Grid）

网格布局是二维布局模型，可创建复杂的网格结构。

.grid-container {display: grid;grid-template-columns: 1fr 1fr 1fr; /* 三列布局 */grid-gap: 20px; /* 网格间距 */
}

6. 响应式设计

媒体查询：使用 @media 规则根据不同的屏幕尺寸应用不同的样式。

@media (max-width: 768px) {/* 当屏幕宽度小于等于 768px 时应用的样式 */body {font-size: 14px;}
}

弹性单位：如 em、rem、vw、vh 等，可根据父元素或视口大小动态调整元素尺寸。

7. 动画与过渡

过渡：使用 transition 属性实现元素状态的平滑过渡，如颜色、大小等的变化。

.button {background-color: blue;transition: background-color 0.3s ease;
}
.button:hover {background-color: red;
}

动画：使用 @keyframes 规则定义动画，然后通过 animation 属性应用动画。

@keyframes slide {from {transform: translateX(0);}to {transform: translateX(100px);}
}
.box {animation: slide 2s infinite;
}

1. 旋转角度

使用 transform 属性的 rotate() 函数可以实现元素的旋转，单位可以是度（deg）、弧度（rad）、梯度（grad）或圈数（turn）。

.rotate-element {transform: rotate(45deg); /* 顺时针旋转 45 度 */
}

2. 缩放

使用 transform 属性的 scale() 函数可以实现元素的缩放，参数可以是一个值（等比例缩放）或两个值（分别指定水平和垂直方向的缩放比例）。

.scale-element {transform: scale(1.5); /* 等比例放大 1.5 倍 */
}

3. 倾斜

使用 transform 属性的 skew() 函数可以实现元素的倾斜，参数分别指定水平和垂直方向的倾斜角度。

.skew-element {transform: skew(20deg, 10deg); /* 水平倾斜 20 度，垂直倾斜 10 度 */
}

4. 平移

使用 transform 属性的 translate() 函数可以实现元素的平移，参数分别指定水平和垂直方向的平移距离。

.translate-element {transform: translate(50px, 20px); /* 水平向右平移 50px，垂直向下平移 20px */
}

5. 过渡效果

使用 transition 属性可以实现元素状态变化时的平滑过渡，常见属性如下：

属性	描述	示例
`transition-property`	指定要过渡的 CSS 属性	`transition-property: width;`
`transition-duration`	指定过渡的持续时间	`transition-duration: 0.5s;`
`transition-timing-function`	指定过渡的时间曲线，如 `ease`、`linear` 等	`transition-timing-function: ease-in-out;`
`transition-delay`	指定过渡的延迟时间	`transition-delay: 0.2s;`

.box {width: 100px;height: 100px;background-color: blue;transition: width 0.5s ease-in-out;
}
.box:hover {width: 200px;
}

6. 动画效果

使用 @keyframes 规则定义动画，然后通过 animation 属性应用动画。

@keyframes slide {from {transform: translateX(0);}to {transform: translateX(200px);}
}
.animated-element {animation: slide 2s infinite; /* 应用名为 slide 的动画，持续 2 秒，无限循环 */
}

三、JavaScript 深度解读

1. 数据类型

基本数据类型：包括 Number、String、Boolean、Null、Undefined、Symbol。
引用数据类型：如 Object、Array、Function 等。

2. 变量声明

var：旧的变量声明方式，存在变量提升和函数作用域问题。
let：块级作用域变量声明，避免了变量提升带来的问题。
const：声明常量，一旦赋值不能再重新赋值，但对于引用类型，其内部属性可以修改。

3. 函数

函数声明：function add(a, b) { return a + b; }
函数表达式：const add = function(a, b) { return a + b; };
箭头函数：const add = (a, b) => a + b;

4. 作用域

全局作用域：变量在整个脚本中都可访问。
函数作用域：变量只能在函数内部访问。
块级作用域：使用 let 和 const 声明的变量在块级作用域内有效。

5. 面向对象编程

构造函数：用于创建对象实例，如 function Person(name, age) { this.name = name; this.age = age; }
原型链：每个对象都有一个原型对象，通过原型链可以实现继承。
类和继承：ES6 引入了 class 关键字，可使用 extends 实现类的继承。

class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a noise.`);}
}
class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}

6. 事件处理

事件绑定：可使用 addEventListener 方法为元素添加事件监听器，支持多种事件类型，如 click、mouseover、keydown 等。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {alert('Button clicked!');
});

事件冒泡和捕获：事件在 DOM 树中传播有冒泡和捕获两个阶段，可通过 addEventListener 的第三个参数控制。

7. 异步编程

回调函数：是最基本的异步处理方式，但容易出现回调地狱问题。

function getData(callback) {setTimeout(() => {const data = { message: 'Hello' };callback(data);}, 1000);
}
getData((data) => {console.log(data.message);
});

Promise：用于处理异步操作，避免回调地狱，有 pending、fulfilled 和 rejected 三种状态。

const promise = new Promise((resolve, reject) => {setTimeout(() => {resolve('Success');}, 1000);
});
promise.then((result) => {console.log(result);
});

async/await：是基于 Promise 的语法糖，使异步代码看起来更像同步代码。

async function fetchData() {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;
}
fetchData().then((data) => {console.log(data);
});

8. 模块化

ES6 模块：使用 import 和 export 关键字实现模块的导入和导出。

// module.js
export const add = (a, b) => a + b;// main.js
import { add } from './module.js';
console.log(add(1, 2));

9. DOM 操作

JavaScript 可以通过 DOM（文档对象模型）操作 HTML 元素，常见方法如下：

方法	描述	示例
`document.getElementById()`	根据元素的 ID 获取元素	`const element = document.getElementById('myElement');`
`document.getElementsByTagName()`	根据元素的标签名获取元素集合	`const elements = document.getElementsByTagName('p');`
`document.getElementsByClassName()`	根据元素的类名获取元素集合	`const elements = document.getElementsByClassName('myClass');`
`document.querySelector()`	根据 CSS 选择器获取第一个匹配的元素	`const element = document.querySelector('.myClass');`
`document.querySelectorAll()`	根据 CSS 选择器获取所有匹配的元素集合	`const elements = document.querySelectorAll('p');`
`element.innerHTML`	获取或设置元素的 HTML 内容	`element.innerHTML = '<p>新内容</p>';`
`element.style`	获取或设置元素的样式	`element.style.color = 'red';`

10. 事件处理

JavaScript 可以监听 HTML 元素的各种事件，如点击、鼠标移动等。常见事件和绑定方法如下：

事件	描述	绑定方法
`click`	元素被点击时触发	`element.addEventListener('click', function() { /* 处理代码 */ });`
`mouseover`	鼠标悬停在元素上时触发	`element.addEventListener('mouseover', function() { /* 处理代码 */ });`
`keydown`	按下键盘按键时触发	`document.addEventListener('keydown', function(event) { /* 处理代码 */ });`

11. 表单验证

在用户提交表单之前，可以使用 JavaScript 对表单数据进行验证，确保数据的有效性。

<form id="myForm"><input type="text" id="username" required><input type="submit" value="提交">
</form>
<script>const form = document.getElementById('myForm');form.addEventListener('submit', function(event) {const username = document.getElementById('username').value;if (username.length < 3) {alert('用户名长度不能少于 3 个字符');event.preventDefault(); // 阻止表单提交}});
</script>

12. 异步编程

JavaScript 中的异步操作可以避免阻塞主线程，提高程序的性能。常见的异步编程方式有回调函数、Promise 和 async/await。

回调函数

function getData(callback) {setTimeout(() => {const data = { message: 'Hello' };callback(data);}, 1000);
}
getData((data) => {console.log(data.message);
});

Promise

const promise = new Promise((resolve, reject) => {setTimeout(() => {const success = true;if (success) {resolve('成功');} else {reject('失败');}}, 1000);
});
promise.then((result) => {console.log(result);
}).catch((error) => {console.error(error);
});

async/await

async function fetchData() {try {const response = await fetch('https://api.example.com/data');const data = await response.json();return data;} catch (error) {console.error(error);}
}
fetchData().then((data) => {console.log(data);
});

13. 事件委托

事件委托是一种利用事件冒泡原理，将事件处理程序绑定到父元素上，从而处理子元素事件的技术。

<ul id="myList"><li>列表项 1</li><li>列表项 2</li>
</ul>
<script>const list = document.getElementById('myList');list.addEventListener('click', function(event) {if (event.target.tagName === 'LI') {console.log('点击了列表项：', event.target.textContent);}});
</script>

14. 本地存储

JavaScript 提供了 localStorage 和 sessionStorage 对象，用于在浏览器中存储数据。

// 存储数据
localStorage.setItem('username', 'John');
// 获取数据
const username = localStorage.getItem('username');
console.log(username);
// 删除数据
localStorage.removeItem('username');

15. 定时器

使用 setTimeout() 和 setInterval() 函数可以实现定时任务。

// 延迟 2 秒后执行函数
setTimeout(() => {console.log('2 秒后执行');
}, 2000);// 每隔 1 秒执行一次函数
const intervalId = setInterval(() => {console.log('每秒执行一次');
}, 1000);// 停止定时器
clearInterval(intervalId);

16. AJAX 请求

使用 XMLHttpRequest 或 fetch API 可以实现异步数据请求。

// 使用 fetch API
fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error(error));

四、综合使用与最佳实践

1. 代码分离

将 HTML、CSS 和 JavaScript 代码分离到不同的文件中，提高代码的可维护性和复用性。

2. 命名规范

HTML 类名和 ID 采用有意义的命名，如 header-nav、main-content。
CSS 类名遵循 BEM（块、元素、修饰符）命名规范，如 .button--primary。
JavaScript 变量和函数名使用驼峰命名法，如 userName、getUserInfo。

3. 注释与文档

添加必要的注释解释代码的功能和实现思路，特别是复杂的逻辑部分。同时，编写文档说明项目的整体架构和使用方法。

4. 性能优化

HTML 中减少不必要的标签嵌套，压缩代码。
CSS 避免使用内联样式，合并和压缩 CSS 文件。
JavaScript 减少 DOM 操作，合理使用事件委托，压缩代码。

HTML、CSS 和 JavaScript 常见用法及使用规范

一、HTML 深度剖析 1. 文档类型声明 HTML 文档开头的 <!DOCTYPE html> 声明告知浏览器当前文档使用的是 HTML5 标准。它是文档的重要元信息，能确保浏览器以标准模式渲染页面，避免怪异模式下的兼容性问题。 2. 元数据标签 <meta> 标签&am…...

编程日记 2025/8/23 15:21:05

人工智能概念股投资：10大潜力标的深度研究

人工智能概念股投资：10大潜力标的深度研究一、人工智能概念股投资的基本概念人工智能（Artificial Intelligence，AI）是指利用计算机程序模拟人类智能的一种技术，通过对数据的分析和学习，实现类似人类思维和…...

编程日记 2025/8/22 21:43:28

centos部署的openstack发布windows虚拟机

‌CentOS上部署的OpenStack可以发布Windows虚拟机‌。在CentOS上部署OpenStack后，可以通过OpenStack平台创建和管理Windows虚拟机。以下是具体的步骤和注意事项： ‌安装和配置OpenStack‌： 首先，确保系统满足OpenStack的最低硬件…...

编程日记 2025/8/19 7:46:19

Fortran 中使用 C_LOC 和 C_F_POINTER 结合的方法来实现不同类型指针指向同一块内存区域

在 Fortran 中，可以使用 C_LOC 和 C_F_POINTER 结合的方法来实现不同类型指针指向同一块内存区域。以下是具体方法和示例： 关键步骤： 获取内存地址：用 C_LOC 获取原始数组的 C 地址。类型转换：用 C_F_POINTER 将地址转…...

编程日记 2025/8/21 5:42:32

两个 STM32G0 I2C 通信异常的案例分析

1. 案例一问题描述客户反馈其产品在使用 STM32G0C1NEY6TR 和一个充电管理 IC 通信时，速率为100KHz 时通信正常，但工作在 400KHz 时，有时会产生 I2C 错误。把 I2C GPIO 配置为推挽输出后产生错误的概率会下降。 2. 案例一问题确认针对客…...

编程日记 2025/8/20 15:26:14

尚硅谷-react[1-6集]

目录步骤 1. devlopment.js 2. react-dom.devopment.js 3. babel.min.js // 将jsx转为js体验 // 这个虚拟dom的内容不能够写引号,单引号双引号 const VDOM <h1>nihao react</h1> // 可以使用括号进行编写 const VDOM1 (<h1>nihao react</h1> )…...

编程日记 2025/8/21 4:26:07

树状数组简单介绍

树状数组简单介绍前言树状数组（Binary Indexed Tree）JavaScript 详细指南一、什么是树状数组？二、核心概念（前置知识）：lowbit 函数三、树状数组的实现1. 初始化树状数组2. 使用示例四、详细原理解释1. 树…...

编程日记 2025/8/22 23:12:47

使用Redis实现分布式限流

一、限流场景与算法选择 1.1 为什么需要分布式限流在高并发系统中，API接口的突发流量可能导致服务雪崩。传统的单机限流方案在分布式环境下存在局限，需要借助Redis等中间件实现集群级流量控制。 1.2 令牌桶算法优势允许突发流量：稳定速…...

编程日记 2025/8/23 7:15:13

【MySQL学习】存储过程

目录一、定义二、基本语法 1.创建存储过程 2.删除存储过程 3.查看存储过程三、控制语句 1.变量声明与赋值四、游标（Cursor） （1）声明游标 （2）处理游标结束 （3）打开游标 …...

编程日记 2025/8/20 12:40:41

Bp靶场 - Jwt

你知道JWT漏洞如何进行攻击利用吗？快来看一看如何利用JWT漏洞进行攻击利用把！https://mp.weixin.qq.com/s/2iBIEGnkiliprsuHyY5Udg...

编程日记 2025/8/23 15:20:10

手机上的APN是什么，该怎么设置

网上说改个APN就可以让网速快几倍，那到底APN是个什么东西，真的能让网速快几倍吗？ APN的作用网络连接基础：APN（接入点名称）是手机连接移动网络的“桥梁”，负责识别运营商网络类型（…...

编程日记 2025/8/19 8:02:30

[bug]langchain agent报错Invalid Format: Missing ‘Action Input:‘ after ‘Action:‘

在学习langchain的agent时候，采用ollama调用本地的deepseek-r1:32b来做一个agent，代码如下： def create_custom_agent():llm ChatOllama(model"deepseek-r1:32b", temperature0.5)memory ConversationBufferWindowMemory(memory…...

编程日记 2025/8/23 1:04:53

blender关联复制与Three.js网格和材质共享验证

blender和three.js小白的学习之路。最近看到Three.js官网上说，模型合并是一个很好的优化性能的方式，因为渲染2000个物体总要比一次性渲染一个模型要来的慢。很有道理！ 但此时就不禁思考一个问题，现有的模型进行合并通过blender…...

编程日记 2025/8/17 20:52:01

Spark宽窄依赖与Join优化：协同划分与非协同划分的底层逻辑

在大数据领域，Spark的性能优化始终是开发者关注的焦点。理解宽依赖（Wide Dependency）和窄依赖（Narrow Dependency）的底层原理，能够帮助我们从根本上优化Join操作的性能。本文将通过这两个核心概念&#xff…...

编程日记 2025/8/19 8:31:51

每日算法-250416

今天我们来探讨两道可以通过贪心算法解决的 LeetCode 题目。什么是贪心算法？ 贪心算法（Greedy Algorithm）是一种在每一步选择中都采取在当前状态下最好或最优（即最有利）的选择，从而希望导致结果是全局最…...

编程日记 2025/8/23 13:05:19

python爬虫降低IP封禁，python爬虫除了使用代理IP和降低请求频率，还有哪些方法可以应对IP封禁？

文章目录前言1. 利用 CDN 节点2. 模拟真实用户行为3. 使用 IP 池轮换策略4. 处理 Cookie 和会话信息5. 分布式爬虫前言除了使用代理 IP 和降低请求频率，以下这些方法也能应对 IP 封禁： Python 3.13.2安装教程（附安装包）Python…...

编程日记 2025/8/23 15:21:02

NLP高频面试题（四十五）——PPO 算法在 RLHF 中的原理与实现详解

近端策略优化（Proximal Policy Optimization, PPO）算法是强化学习领域的一种新颖且高效的策略优化方法，在近年大规模语言模型的人类反馈强化学习（Reinforcement Learning with Human Feedback, RLHF）中发挥了关键作用。本文将以学术严谨的风格，详细阐述 PPO 算法的原理及…...

编程日记 2025/8/18 13:46:50

读取csv def read_file(file_path):data []label []with open(file_path, "r", encoding"utf-8") as file:reader csv.reader(file)next(reader) # 跳过标题行for row in reader:if len(row) < 2:print(f"跳过不完整行: {row}")continue…...