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

HTML、CSS 和 JavaScript 基础知识点

news 来源：原创 2025/7/14 16:50:52

HTML、CSS 和 JavaScript 基础知识点

一、HTML 基础

1. HTML 文档结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文档标题</title>
</head>
<body><!-- 页面内容 -->
</body>
</html>

2. 常用 HTML 标签

文本标签：

<h1>到<h6>标题、<p>段落、<span>行内元素、<br>换行、<hr>水平线

列表：

<ul>无序列表、<ol>有序列表、<li>列表项、<dl>定义列表

表格：

<table>、<tr>行、<td>单元格、<th>表头、<thead>、<tbody>、<tfoot>

表单：

<form>、<input>、<textarea>、<select>、<option>、<button>、<label>

多媒体：
```
<img>、<audio>、<video>、<iframe>
```

3. HTML5 新特性

语义化标签：<header>, <footer>, <nav>, <article>, <section>, <aside>
表单增强：<input type="date">, <input type="email">, <input type="range">
多媒体支持：<video>, <audio>, <canvas>
Web存储：localStorage, sessionStorage
Web Workers
地理定位 API

二、CSS 基础

1. CSS 引入方式

<!-- 内联样式 -->
<div style="color: red;"></div><!-- 内部样式表 -->
<style>div { color: red; }
</style><!-- 外部样式表 -->
<link rel="stylesheet" href="styles.css">

2. CSS 选择器

基础选择器：

/* 元素选择器 */
p { color: blue; }/* 类选择器 */
.class-name { color: red; }/* ID选择器 */
#id-name { color: green; }/* 通配符选择器 */
* { margin: 0; padding: 0; }

组合选择器：

/* 后代选择器 */
div p { color: red; }/* 子元素选择器 */
div > p { color: blue; }/* 相邻兄弟选择器 */
h1 + p { color: green; }/* 通用兄弟选择器 */
h1 ~ p { color: yellow; }

属性选择器：

/* 存在属性 */
[title] { color: red; }/* 属性值等于 */
[type="text"] { color: blue; }/* 属性值包含 */
[class*="btn"] { color: green; }

伪类和伪元素：

/* 伪类 */
a:hover { color: red; }
li:nth-child(odd) { background: #eee; }/* 伪元素 */
p::first-letter { font-size: 2em; }
p::after { content: "★"; }

3. CSS 盒模型

组成：content(内容) + padding(内边距) + border(边框) + margin(外边距)

box-sizing：

/* 标准盒模型 */
box-sizing: content-box; /* 默认值 *//* 怪异盒模型 */
box-sizing: border-box; /* 宽度包含padding和border */

4. 布局技术

浮动布局：

.float-left { float: left; }
.clearfix::after {content: "";display: block;clear: both;
}

Flex 布局：

.container {display: flex;justify-content: center; /* 主轴对齐 */align-items: center;    /* 交叉轴对齐 */flex-wrap: wrap;       /* 换行 */
}
.item {flex: 1;               /* 弹性比例 */
}

Grid 布局：

.container {display: grid;grid-template-columns: 1fr 2fr 1fr; /* 列定义 */grid-template-rows: 100px auto;     /* 行定义 */gap: 10px;                          /* 间距 */
}
.item {grid-column: 1 / 3;                 /* 跨列 */grid-row: 1;                        /* 行位置 */
}

5. 响应式设计

媒体查询：

@media (max-width: 768px) {body { font-size: 14px; }
}

视口单位：

.box {width: 50vw;    /* 视口宽度的50% */height: 100vh;  /* 视口高度的100% */font-size: 2vmin; /* 视口较小尺寸的2% */
}

三、JavaScript 基础

1. 基础语法

变量声明：

// ES5
var name = "张三";// ES6+
let age = 25;       // 块级作用域变量
const PI = 3.14;    // 常量

数据类型：

// 原始类型
typeof "hello"      // "string"
typeof 42           // "number"
typeof true         // "boolean"
typeof undefined    // "undefined"
typeof null         // "object" (历史遗留问题)
typeof Symbol()     // "symbol"
typeof BigInt(10)   // "bigint"// 引用类型
typeof {}           // "object"
typeof []           // "object"
typeof function(){} // "function"

2. 运算符

// 算术运算符
let sum = 10 + 5;    // 15// 比较运算符
10 == "10"           // true (值相等)
10 === "10"          // false (值和类型都相等)// 逻辑运算符
true && false        // false
true || false       // true
!true               // false// 三元运算符
let result = age > 18 ? '成年' : '未成年';

3. 流程控制

条件语句：

if (score >= 90) {console.log('优秀');
} else if (score >= 60) {console.log('及格');
} else {console.log('不及格');
}// switch语句
switch(day) {case 1: console.log('周一'); break;case 2: console.log('周二'); break;default: console.log('周末');
}

循环语句：

// for循环
for (let i = 0; i < 5; i++) {console.log(i);
}// while循环
let j = 0;
while (j < 5) {console.log(j);j++;
}// for...of (ES6)
for (let item of array) {console.log(item);
}// for...in (遍历对象属性)
for (let key in obj) {console.log(key, obj[key]);
}

4. 函数

函数定义：

// 函数声明
function add(a, b) {return a + b;
}// 函数表达式
const multiply = function(a, b) {return a * b;
};// 箭头函数 (ES6)
const divide = (a, b) => a / b;// 默认参数 (ES6)
function greet(name = 'Guest') {console.log(`Hello, ${name}`);
}// 剩余参数 (ES6)
function sum(...numbers) {return numbers.reduce((acc, num) => acc + num, 0);
}

高阶函数：

// 函数作为参数
function operate(a, b, operation) {return operation(a, b);
}operate(5, 3, (x, y) => x * y); // 15// 函数返回函数
function multiplier(factor) {return function(number) {return number * factor;};
}const double = multiplier(2);
double(5); // 10

5. 对象和数组

对象：

// 对象字面量
const person = {name: '张三',age: 25,greet() {console.log(`我是${this.name}`);}
};// 访问属性
person.name;        // "张三"
person['age'];      // 25
person.greet();     // "我是张三"// ES6增强
const { name, age } = person; // 解构赋值
const newPerson = { ...person, age: 26 }; // 扩展运算符

数组：

// 数组方法
const numbers = [1, 2, 3, 4, 5];numbers.map(x => x * 2);      // [2, 4, 6, 8, 10]
numbers.filter(x => x > 2);   // [3, 4, 5]
numbers.reduce((a, b) => a + b); // 15// ES6数组操作
const newArr = [...numbers, 6, 7]; // [1, 2, 3, 4, 5, 6, 7]
const [first, second, ...rest] = numbers; // 解构赋值

6. DOM 操作

// 获取元素
const btn = document.getElementById('myButton');
const items = document.querySelectorAll('.item');// 事件监听
btn.addEventListener('click', function(event) {console.log('按钮被点击了');
});// 修改内容
const heading = document.querySelector('h1');
heading.textContent = '新标题';
heading.style.color = 'red';// 创建元素
const newDiv = document.createElement('div');
newDiv.className = 'box';
document.body.appendChild(newDiv);// 表单处理
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {e.preventDefault();const input = this.querySelector('input');console.log(input.value);
});

7. 异步编程

回调函数：

function fetchData(callback) {setTimeout(() => {callback('数据加载完成');}, 1000);
}fetchData(function(data) {console.log(data);
});

Promise：

function fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {resolve('数据加载完成');// 或 reject('加载失败');}, 1000);});
}fetchData().then(data => console.log(data)).catch(error => console.error(error));

async/await：

async function loadData() {try {const data = await fetchData();console.log(data);} catch (error) {console.error(error);}
}loadData();

四、综合案例

1. 简单的待办事项应用

<!DOCTYPE html>
<html>
<head><title>待办事项</title><style>body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; }#todo-form { display: flex; margin-bottom: 20px; }#todo-input { flex: 1; padding: 8px; }button { padding: 8px 16px; background: #4CAF50; color: white; border: none; }ul { list-style: none; padding: 0; }li { padding: 10px; border-bottom: 1px solid #ddd; display: flex; }li.completed { text-decoration: line-through; color: #888; }.delete-btn { margin-left: auto; color: red; cursor: pointer; }</style>
</head>
<body><h1>待办事项</h1><form id="todo-form"><input type="text" id="todo-input" placeholder="输入待办事项..." required><button type="submit">添加</button></form><ul id="todo-list"></ul><script>document.addEventListener('DOMContentLoaded', function() {const form = document.getElementById('todo-form');const input = document.getElementById('todo-input');const list = document.getElementById('todo-list');// 从本地存储加载待办事项let todos = JSON.parse(localStorage.getItem('todos')) || [];// 渲染待办事项列表function renderTodos() {list.innerHTML = '';todos.forEach((todo, index) => {const li = document.createElement('li');if (todo.completed) {li.classList.add('completed');}li.innerHTML = `<span>${todo.text}</span><span class="delete-btn" data-index="${index}">×</span>`;li.addEventListener('click', function() {toggleTodo(index);});list.appendChild(li);});// 保存到本地存储localStorage.setItem('todos', JSON.stringify(todos));}// 添加新待办事项form.addEventListener('submit', function(e) {e.preventDefault();const text = input.value.trim();if (text) {todos.push({ text, completed: false });input.value = '';renderTodos();}});// 切换完成状态function toggleTodo(index) {todos[index].completed = !todos[index].completed;renderTodos();}// 删除待办事项list.addEventListener('click', function(e) {if (e.target.classList.contains('delete-btn')) {const index = e.target.dataset.index;todos.splice(index, 1);renderTodos();}});// 初始渲染renderTodos();});</script>
</body>
</html>

在这里插入图片描述

HTML、CSS 和 JavaScript 基础知识点

HTML、CSS 和 JavaScript 基础知识点一、HTML 基础 1. HTML 文档结构 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.…...

编程日记 2025/7/14 16:50:52

直接在Excel中用Python Matplotlib/Seaborn/Plotly......

本次分享如何利用pyxll包，实现直接在Excel中使用Python Matplotlib/Seaborn/Plotly等强大可视化工具。 pyxll配置 pyxll安装 pip install pyxll pyxll install pyxll自定义方法例如，自定义一个计算斐波那契数的方法fib，并使用pyxll装饰器…...

编程日记 2025/7/14 16:27:56

互联网大厂Java求职面试：优惠券服务架构设计与AI增强实践-5

互联网大厂Java求职面试：优惠券服务架构设计与AI增强实践-5 第一轮面试：业务场景切入面试官（技术总监）： 欢迎郑薪苦参与今天的面试。我们先从一个实际业务场景谈起——假设你正在设计一个电商平台的优惠券服务系统&…...

编程日记 2025/7/14 16:24:22

KV cache 缓存与量化：加速大型语言模型推理的关键技术

引言在大型语言模型（LLM）的推理过程中，KV 缓存（Key-Value Cache） 是一项至关重要的优化技术。自回归生成（如逐 token 生成文本）的特性决定了模型需要反复利用历史token的注意力计算结果&#…...

编程日记 2025/7/14 16:49:12

[250512] Node.js 24 发布：ClangCL 构建，升级 V8 引擎、集成 npm 11

目录 Node.js 24 版本发布：Windows 平台构建工具链转向 ClangCL Node.js 24 版本发布：Windows 平台构建工具链转向 ClangCL 流行的开源跨平台 JavaScript 运行时环境 Node.js 近日发布了 24.0 版本。此版本带来了多项性能提升、安全增强和开发体验的改进…...

编程日记 2025/6/28 23:42:53

Linux常用命令39——free显示系统内存使用量情况

在使用Linux或macOS日常开发中，熟悉一些基本的命令有助于提高工作效率，free命令的功能是显示系统内存使用量情况，包含物理内存和交换内存的总量、使用量、空闲量情况。本篇学习记录free命令的基本使用。首先查看帮助文档： 语法格…...

编程日记 2025/6/29 0:12:30

4. 文字效果/2D-3D转换 - 3D翻转卡片

4. 文字效果/2D-3D转换 - 3D翻转卡片案例：3D产品展示卡片 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><style type"text/css">.scene {width: 300px;height…...

编程日记 2025/6/28 23:32:13

游戏引擎学习第276天:调整身体动画

运行游戏，演示我们遇到的拉伸问题，看起来不太好，并考虑切换到更顶视角的视角我们开始讨论游戏开发中的一些美学决策，特别是在处理动画方面。虽然我们是游戏程序员，通常不负责设计或艺术部分，但因为这是一…...

编程日记 2025/7/13 17:28:38

Java线程池性能优化全解析：从配置到实践

一、线程池配置原则 1.1 核心参数设定线程池的性能优化始于合理配置，关键参数包括：核心线程数（corePoolSize） CPU密集型任务：设为Runtime.getRuntime().availableProcessors()（通常为CPU核心数）IO密集型任务：设为CPU核心数 * 2（或更高，根据IO等待时间调整）最大线…...

编程日记 2025/7/11 17:02:40

【入门】歌德巴赫猜想

描述任一个大于等于4的偶数都可以拆分为两个素数之和。输入描述一个整数n( 4 < n < 200 ） 输出描述将小于等于n的偶数拆分为2个质数之和，列出所有方案！ 用例输入 1 10 用例输出 1 422 633 835 1037 1055 #include<b…...

编程日记 2025/7/7 17:46:17

kafka----初步安装与配置

目录标题 ⭐kafka 与 zookeeper间的关系一.集群部署二.修改配置文件三.分发安装包四.启动与关闭 kafka 与 zookeeper 相同，是以集群的形式使用 ⭐kafka 与 zookeeper间的关系 kafka 的使用要在 zookeeper 集群配置好的基础上使用要想启动kafka 要先启动 zookeep…...

编程日记 2025/6/29 1:14:19

如何通过 Windows 图形界面找到 WSL 主目录

WSL（Windows Subsystem for Linux）是微软开发的一个软件层，用于在 Windows 11 或 10 上原生运行 Linux 二进制可执行文件。当你在 WSL 上安装一个 Linux 发行版时，它会在 Windows 内创建一个 Linux 环境，包括自己的文件系统和主目录。但是，如何通过 Windows 的图形文件资…...

编程日记 2025/7/11 15:25:52

Cursor 编辑器的高级使用技巧与创意玩法

以下是针对 Cursor 编辑器的高级使用技巧与创意玩法深度解析，涵盖代码生成优化、工作流定制、隐藏功能等层面，助你将 AI 辅助编程效率提升至新高度：一、代码生成进阶技巧 1. 精准控制生成粒度行级控制：在代码行内用 // > 指定生成方向（替代模糊注释）def merge_…...

编程日记 2025/7/8 12:22:39

element-ui 源码调用接口跨域问题

今天在看 upload 组件源码时，在组件源码当中调用的本地启动的 nodejs 服务写的上传接口，遇到跨域问题： 问题一、在 upload.md 中调用 nodejs 服务中的上传接口，控制台报跨域报错。解决方法1：在根目录增加 vue.conf…...

编程日记 2025/6/28 23:07:46

Docker与PostgreSQL

1. 背景介绍 Docker是一种开源的容器化技术，它通过使用容器来隔离应用程序及其运行环境，使得开发人员能够快速、可靠地构建、部署和运行应用程序。Docker容器是轻量级的虚拟化单元，能够在任何支持Docker的操作系统上运行，从而消除…...

编程日记 2025/6/29 8:47:15

iVX 研发基座：大型系统开发的协作与安全架构实践

通过图形化开发、组件化封装和多厂商协作机制，iVX 解决了传统开发模式在效率、安全和扩展性上的痛点。文章结合政务、教育、企业等行业案例，展示其在数据治理、权限控制和 DevOps 等方面的创新实践，为大型系统开发提供完整的技术参考。一、…...

编程日记 2025/7/8 21:03:01

Vxe UI vue vxe-table 实现表格数据分组功能，不是使用树结构，直接数据分组

Vxe UI vue vxe-table 实现表格数据分组功能，不是使用树结构，直接数据分组查看官网：https://vxetable.cn gitbub：https://github.com/x-extends/vxe-table gitee：https://gitee.com/x-extends/vxe-table 代码通过…...

编程日记 2025/7/8 9:58:12

基于TI AM6442+FPGA解决方案，支持6网口，4路CAN，8个串口

TI AM6442FPGA解决方案具有以下技术优势及适用领域： 一、技术优势 ‌异构多核架构‌：AM6442处理器集成7个内核（2xCortex-A534xCortex-R5F1xCortex-M4F），可实现应用处理、实时控制和独立任务分核协同，满足…...

编程日记 2025/7/14 14:24:27

6. 多列布局/用户界面 - 杂志风格文章布局

6. 多列布局/用户界面 - 杂志风格文章布局案例：多栏杂志排版 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><style type"text/css">body {font-family: "…...

编程日记 2025/6/29 8:40:29

计算机系统----软考中级软件设计师（自用学习笔记）

目录 1、计算机的基本硬件系统 2、CPU的功能 3、运算器的组成 4、控制器 5、计算机的基本单位 6、进制转换问题 7、原码、反码、补码、移码 8、浮点数 9、寻址方式 10、奇偶校验码 11、海明码 12、循环冗余校验码 13、RISC和CISC 14、指令的处理方式 15、存储器…...

编程日记 2025/7/8 0:36:27

FPGA图像处理（六）------ 图像腐蚀and图像膨胀

默认迭代次数为1，只进行一次腐蚀、膨胀一、图像腐蚀 1.相关定义 2.图像腐蚀效果图 3.fpga实现彩色图像灰度化，灰度图像二值化，图像缓存生成滤波模块（3*3），图像腐蚀算法 timescale 1ns / 1ps // // Des…...

编程日记 2025/6/29 8:38:45

2025年RIS SCI2区，改进白鲸优化算法+复杂非线性方程组求解，深度解析+性能实测

目录 1.摘要2.白鲸优化算法BWO原理3.改进策略4.结果展示5.参考文献6.代码获取7.读者交流 1.摘要本文提出了一种改进白鲸优化算法（ABWOA）用来解决非线性方程组（SNLEs）求解问题。ABWOA引入了平衡因子和非线性自适应参数&#xff0…...

编程日记 2025/6/29 8:52:02

【论信息系统项目的资源管理】

论信息系统项目的资源管理前言一、规划好资源管理，为保证项目完成做好人员规划二、估算活动资源，为制订项目进度计划提供资源需求三、获取项目资源，组建一个完备的项目团队四、建设项目团队，提高工作能力，促进团队成员…...

编程日记 2025/6/29 8:34:39

开发与AI融合的Windsurf编辑器

Windsurf编辑器是开发人员和人工智能真正融合在一起的地方，提供了一种感觉像文字魔术的编码体验。手册：Windsurf - Getting Started 下载链接：Download Windsurf Editor for Windows | Windsurf (formerly Codeium) 下载安装从上面的下载…...

编程日记 2025/6/29 8:23:45

maven工程跳过@SpringTest

每次跑springboot都比较费劲，会自动测试所有的SpringBootTest的类，这里对根pom添加这个插件，即可跳过测试，实测节省时间2分钟以上 <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>ma…...

编程日记 2025/6/29 8:50:29

算法竞赛相关 Java 二分模版

目录找和目标值相关方法 Arrays.binarySearch(); 二分答案模版找和目标值相关 public class BinarySearchTemplate {// 查找大于 x 的最小值（即严格上界）public static int upperBound(int[] arr, int x) {int left 0, right arr.length;while (…...

编程日记 2025/6/29 8:23:41

如何使用远程桌面控制电脑

目的： 通过路由器使用pc控制台式机，实现了有线/无线pc与台式机的双向远程桌面控制最核心就两条：get ip地址与被控制机器的账户与密码。现象挺神奇：被控制电脑的电脑桌面处于休眠模式，此时强行唤醒被控电脑会导致中断…...

编程日记 2025/6/29 8:38:42

运行Spark程序-在shell中运行1

（一）分布式计算要处理的问题【老师提问：分布式计算要面临什么问题？】【老师总结】分布式计算需要做到： 1.分区控制。把大的数据拆成一小份一小份的（分区，分片）让多台设备同时计算…...

编程日记 2025/6/29 8:40:39

多边形,矩形,长方体设置

在cesium中,我们可以通过既有的库来进行对地图的构建 // 向场景中添加一个几何体（立方体） scene.primitives.add(new Cesium.Primitive({// 定义几何体实例geometryInstances: new Cesium.GeometryInstance({// 使用BoxGeometry.fromDimensions方法创建…...

编程日记 2025/6/29 8:44:17

3.3 阶数的作用

第一步：引入背景与动机在数学中，特别是在使用泰勒公式进行函数近似时，阶数的选择对结果的精度和适用范围有着重要影响。阶数越高，近似的精度通常也越高，但计算复杂度也会增加。因此，理解不同阶数的作用及…...

编程日记 2025/6/29 8:32:04

OAuth安全架构深度剖析：协议机制与攻防实践

目录一、OAuth协议核心架构解析 1. 协议框架与核心组件 2. 授权流程类型对比二、OAuth安全漏洞技术原理与攻击向量 1. 重定向URI劫持攻击 2. 令牌注入与滥用 3. 跨站请求伪造（CSRF） 三、纵深防御体系构建指南 1. 协议层加固 2. 工程化防护 3…...

编程日记 2025/6/29 8:48:19

关于网站提交搜索引擎

发布于Eucalyptus-blog 一、前言将网站提交给搜索引擎是为了让搜索引擎更早地了解、索引和显示您的网站内容。以下是一些提交网站给搜索引擎的理由： 提高可见性：通过将您的网站提交给搜索引擎，可以提高您的网站在搜索结果中出现的机会。当用…...

编程日记 2025/7/9 17:18:48

一文理清人工智能，机器学习，深度学习的概念

目录一、人工智能的起源与核心范畴（1950-1980） 1.1 智能机器的最初构想 1.2 核心范畴的初步分化二、机器学习的兴起与技术分化（1980-2010） 2.1 统计学习的黄金时代 2.2 神经网络的复兴与子集定位 2.3 技术生态的形成与AI…...

编程日记 2025/6/29 8:40:47

MySQL 数据库：创建新数据库和数据表全攻略

MySQL 数据库：创建新数据库和数据表全攻略在 MySQL 数据库管理中，创建新的数据库和数据表是基础且关键的操作。无论是开发新的应用程序，还是对现有数据进行整理和存储，都离不开这些操作。本文将详细介绍如何在 MySQL 中创建新数…...

编程日记 2025/6/29 5:07:59

React Native 与 Expo

🧩 Expo 和 React Native 的关系项目定义React Native一个由 Meta（Facebook）开发的原生移动端开发框架，使用 JavaScript React 来构建 iOS 和 Android 应用Expo一个构建在 React Native 之上的开发工具链，封装了很多…...

编程日记 2025/6/29 1:33:51

【RabbitMQ】七种工作模式介绍

文章目录 1. 简单模式2. 工作队列模式3. 发布订阅模式交换机类型 Publish/Subscribe 模式 4. Routing（路由模式）5. Topics（通配符模式）6. RPC（RPC 通信）7. Publisher Confirms（发布确认&#xf…...

编程日记 2025/7/13 15:41:53

【C++进阶篇】二叉搜索树的实现（赋源码）

掌握二叉搜索树：从基础知识到实际应用的全貌一. 二叉搜索树简介1.1 基本概念1.2 意义与价值1.3 典型应用场景1.4 性能分析1.5 总结与展望二. 搜索二叉树实现2.1 插入2.2 查找2.3 删除2.3.1 单或无孩型2.3.2 双孩型2.3.4 整合代码三. ⼆叉搜索树key和key/value使⽤…...

编程日记 2025/6/29 8:50:54

huggingface 下载不了模型问题？ from modelscope.hub.snapshot_download import snapshot_download model_dir snapshot_download(damo/nlp_xlmr_named-entity-recognition_viet- ecommerce-title, cache_dirpath/to/local/dir, revisionv1.0.1) 方法一&#xff1…...

编程日记 2025/7/8 18:01:27

2025年金融创新、区块链与信息技术国际会议（FRCIT 2025 2025）

2025 International Conference on Financial Innovation, Regional Chains, and Information Technology （一）会议信息会议简称：FRCIT 2025 大会地点：中国郑州收录检索：提交Ei Compendex,CPCI,CNKI,Google Schola…...

编程日记 2025/6/29 8:50:48

rtty操作记录说明

rtty操作记录说明前言整理资料发现了几年前做的操作记录，分享出来，希望对大家有用。 rtty-master：rtty客户端程序，其中buffer\log\ssl为源码的子目录，从git上下载https://github.com/zhaojh329， rtty…...

编程日记 2025/7/11 0:30:26

股指期货是什么？有啥特点？怎么用？

股指期货，英文简称SPIF，全称是股票价格指数期货，也叫股价指数期货、期指。简单来说，它就是以股价指数为“赌注”的一种期货合约。想象一下，你和朋友打了个赌，约定在未来的某个日子，按照事先说好…...

编程日记 2025/6/29 5:07:33

提示词设计模板（基于最佳实践）

1. 任务清晰化模糊指令 ➜ 明确指令 ❌ "写一篇关于环保的文章" ✅ *"列出5种城市环保措施，并分别说明其对减少碳排放的影响（要求：数据支持案例）"* 2. 任务步骤化案例：策划线上营销活动 1.…...

编程日记 2025/6/29 8:23:29

涌现理论：连接万物的神秘力量

一、理论起源与概述现象引介：通过蜂群“风浪”（蜜蜂抖动翅膀呈波浪式扩散）、鱿鱼变色捕猎等生物现象，引出涌现理论。理论定义：涌现理论可有效介入复杂问题，解释事物起源，适用于物理、化学、生…...

编程日记 2025/7/9 17:06:55

9.9 Ollama私有化部署Mistral 7B全指南：命令行交互到API集成全流程解析

Ollama私有化部署Mistral 7B全指南：命令行交互到API集成全流程解析关键词：Ollama 私有化部署, Mistral 7B 运行, 本地大模型管理, 命令行交互, REST API 集成一、Mistral 7B 模型特性解析 Mistral 7B 是由 Mistral AI 团队开发的高性能开源大语言模型，在同等参数量级模型…...

编程日记 2025/6/29 8:34:08

【Redis 进阶】缓存

思维导图： 1. 缓存的基本概念 1.1 缓存的实例化解释以火车站刷身份证为例，身份证存放在皮箱中虽安全，但取用不便；而将其置于衣袋，则显著提高了访问效率。这一过程恰似计算机系统中缓存的运作机制——将常用数据暂存于…...

编程日记 2025/7/8 3:05:12

游戏资源传输服务器

目录项目简介项目实现nginx配置服务器逻辑图项目代码简介reactor 模型部分文件传输部分项目演示视频演示演示分析项目简介使用C开发，其中资源存储在fastdfs 中，用户通过http上传或下载资源文件，此项目需要开启nginx中的nginx-upload-mod…...

编程日记 2025/6/29 8:28:43

dockerdesktop 重新安装

1、卸载 dockerdesktop 卸载时，最后一步删除镜像文件会卡住取消 2、在资源管理器中将镜像文件路径改名如：e:\docker 修改 e:\docker1 3、重新安装wsl wsl --shutdown 以管理员身份运行hy.bat pushd "%~dp0" dir /b %SystemRoot%\servic…...

编程日记 2025/7/9 13:44:59

免费实用的远程办公方案

假如你需要快速检索出远程电脑文件并下载？ 假如你需要访问远程电脑的共享文件夹？ 假如你需要访问远程电脑的USB设备，例如软件加密狗、调试器、固件烧录器、U盘等？ 本篇文章能够解决以上痛点。这个方案非常实用，也很…...

编程日记 2025/7/2 14:12:22

论文知识总结

参考1 一 Intelligent reflecting surface (IRS)跟RIS区别是什么 Intelligent Reflecting Surface (IRS) 和 Reconfigurable Intelligent Surface (RIS) 在很多情况下所指相同或相近，常被视为同一类技术的不同表述，但在一些特定语境下也有细微区别&…...

编程日记 2025/6/29 8:35:48

WebGIS 开发黑科技：解锁地理信息的新视界

你能想象吗？在我们生活的这个广袤星球上，每一处角落的地理信息，竟能通过网页，以超乎想象的方式呈现在眼前。WebGIS，这个看似神秘的词汇，实则是当下地理信息领域的 “黑科技”。它究竟有何神奇魔力&#xff…...

编程日记 2025/6/29 8:30:18

HTML、CSS 和 JavaScript 基础知识点

一、HTML 基础

1. HTML 文档结构

2. 常用 HTML 标签

3. HTML5 新特性

二、CSS 基础

1. CSS 引入方式

2. CSS 选择器

3. CSS 盒模型

4. 布局技术

5. 响应式设计

三、JavaScript 基础

1. 基础语法

2. 运算符

3. 流程控制

4. 函数

5. 对象和数组

6. DOM 操作

7. 异步编程

四、综合案例

1. 简单的待办事项应用

相关文章：