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

Html5+Css3学习笔记

news 2025/7/12 8:23:17

Html5 + CSS3

一、概念

1.什么是html5

html: Hyper Text Markup Language ( 超文本标记语言)

文本：记事本

超文本：文字、图片、音频、视频、动画等等（网页）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

html语言经过浏览器的编译显示成超文本

开发者使用5种浏览器（拥有不同的内核）

edge，谷歌，firefox，safari, 欧朋浏览器

国内目前的浏览器用的还是google的内核

谷歌性能最好，v8引擎，解析速度高

2.什么是css3

css: Cascading Style Sheet ( 级联样式表)

作用：美化网页

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

3.w3c标准

w3c： World Wide Web Consortium （万维网联盟）

成立于1994 年，web技术领域最权威最具有影响力的国际中立性技术标准机构

官网：https://www.w3.org/

W3C标准包括：

结构化标准化语言（HTML、XML）
表现标准语言（css）
行为标准（javaScript — DOM、ECMAScript）

4.前端学什么？

结构化标准化语言（HTML、XML）骨架
表现标准语言（css）皮囊
行为标准（javaScript — DOM、ECMAScript）动画交互

二、开发工具

VSCode官网

三、html和css的语法

1.基本语法

1.1html的语法

在vscode 直接打html就会自动给出基本格式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>

1.2html的标签

1. 标签的基本结构

HTML标签通常由尖括号<和>包围的关键词构成，如<html>。
大多数HTML标签是成对出现的，称为双标签。例如，<html>和</html>分别作为HTML文档的开始和结束标签。第一个标签是开始标签，第二个标签是结束标签，它们之间的内容构成了标签的主体。
有些特殊的标签是单个标签，称为单标签或自闭合标签，例如<br />用于换行，它不需要结束标签。

2. 标签的分类

HTML标签可以根据其功能分为不同的类型，包括但不限于以下几种：

结构标签：用于定义HTML文档的整体结构，如<html>、<head>、<body>等。
文本格式化标签：用于改变文本的显示方式，如<h1>到<h6>用于定义六级标题，<p>用于定义段落，<br />用于换行等。
链接标签：用于创建超链接，如<a href="URL">链接文本</a>。
图像标签：用于在HTML页面中嵌入图像，如<img src="图像URL" alt="图像描述" />。
列表标签：用于创建列表，包括无序列表<ul>和有序列表<ol>，以及列表项<li>。
表格标签：用于创建表格，包括<table>、<tr>（表格行）、<th>（表头单元格）、<td>（表格单元格）等。
表单标签：用于创建表单，收集用户输入，包括<form>、<input>、<textarea>、<select>等。
布局标签：如<div>和<span>，用于布局和样式控制。<div>是块级元素，通常用于布局；<span>是行内元素，用于对文本的某部分进行样式控制。

1.3css的语法

选择器 {声明1;声明2;
}
如：
h1 {font-size: 50px;color: 'red'
}

1.4 入门代码

<!DOCTYPE html>
<html lang="en"> <!-- 设置语言为英语 -->
<head><meta charset="UTF-8"> <!-- 设置网页编码格式 UTF-8是国际编码，支持各种语言 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在手机上自适应 --> <title>02css基本语法</title><style>h1 {font-size: 50px;  /*font：字体， font-size：字体大小， px为像素*/font-family: '宋体'; /*字体类型*/font-weight:bold;   /*字体粗细  bold:就是600*/font-style:normal;  /*italic:斜体*/color: #00f;  /*颜色可以三种表示方式：英文 red、pink   rgb(250,0,0)    十六进制: #000000两位表示，但是两位相同可以用一位简写 如#00f */}</style>
</head>
<body><h1>我爱中国</h1><h2>我爱中国</h2><h3>我爱中国</h3><h4>我爱中国</h4><h5>我爱中国</h5><h6>我爱中国</h6>我爱世界
</body>
</html>

经验：css的最后一条声明的“；”是可以不写的，但是W3C规范建议最后一条声明的结束也要把“；”写上

h1为标题标签

数字越大，字号越小,占据了一整行

html中的注释格式为

css中的注释格式为/* */

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.html种引入CSS样式

三种引入方式

行内样式
内部样式表
外部样式表

2.1 行内样式

样式写在标签里面

示例代码：

<h1 style="color: red;font-size: 50px;">行内样式</h1>
<h1 style="color: red;">行内样式</h1>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

2.2 内部样式表

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h1 {color: red;}</style>
</head>
<body><h1>标题1</h1><h1>标题1</h1>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

css语言写在style标签里，但还是在代码内部

优点
- 方便在同一个页面种修改样式
缺点
- 不利于多页面之间共享复用代码及维护，对内容于样式的分离不够彻底

2.3 外部样式表

css代码全部保存在扩展名为.css的样式中

HTML文件引用扩展名为.css样式表，有两种方式:

链接式

语法：
<head><link href="css/style.css" rel="stylesheet" type="text/css" />
</head>href:文件路径
rel:使用外部样式表，固定写法stylesheet
type:文件类型 (不是必须的)

案例：
common.css存放以下css代码h1 {font-size: 200px;color: red;
}---------------------------------------------------------------------------------------------<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>05外部样式表-链接式</title><!-- 相对路径/绝对路径,推荐使用相对路径./ 表示当前文件夹 ../表示上一级文件夹 --><link rel="stylesheet" href="./css/common.css" />
</head>
<body><h1>Hello  外部样式-链接式</h1>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

导入式

# 语法：
<head><style><!--@import url('css的地址')--></style>
</head>

案例：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>06外部样式表-导入式</title><style type="text/css"><!-- @import url('./css/common.css');    --></style>
</head>
<body><h1>坤坤爱篮球</h1>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

链接式和导入式的区别：

标签是属于XHTML，@import是属于css2.1（版本落后）
使用链接的css文件先加载到网页种，再进行编译显示。而@import导入的css文件，客户端先显示HTML结构，再把css文件加载到网页中。link不会因为网速慢，先加载出未经美化的超文本
@import是属于CSS2.1特有的，对不兼容CSS2.1的浏览器是无效的

现在基本不使用导入式

3.CSS样式优先级

遵从如下原则：

行内样式 > 内部样式表 > 外部样式表
就近原则

代码示例：

h1 {font-size: 50px;color: red;
}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>07css样式优先级</title><link rel="stylesheet" href="./css/style.css"> 外部演示表的样式<style> 内部样式表的样式h1 {color: blue;}h2 {color: red;}h2 {color: blue;}</style>
</head>
<body><h1 style="color: green;">北京欢迎你</h1>  行内样式表的样式<h2>武汉欢迎你</h2>
</body>
</html>

如果有多个相同的样式，最后一个会覆盖前面的，不相同的样式会叠加

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.CSS基本选择器

4.1 标签选择器

语法：

标签名 {属性：值;
}如：
h1 {font-size: 20px;
}

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {font-size: 16px;color: red;}</style>
</head>
<body><p>2024年6月份，全国居民消费价格同比上涨0.2%。其中，城市上涨0.2%，农村上涨0.4%；食品价格下降2.1%，非食品价格上涨0.8%；消费品价格下降0.1%，服务价格上涨0.7%。1—6月平均，全国居民消费价格比上年同期上涨0.1%。</p>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.2 类选择器

语法：

<style>.类名 {属性:值;}
</style><标签名 class="类名"></标签名>

案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>09类选择器</title><style>.mycolor{color: blue;}.mysize {font-size: 50px;}</style>
</head>
<body><!-- 语法：如果有多个类选择器，可以在后面空格继续加 --><p class="mycolor mysize">我爱编程</p><font class="mycolor">Hello</font>
</body>
</html>

作用：可以多次使用

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.3 ID选择器

语法：

<style>#id选择器名称 {属性:值;}
</style><标签名 id="id选择器名称"></标签名>

案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不要以数字开头 */#first {font-size: 50px;}</style>
</head>
<body><p id="first">北京欢迎你</p>
</body>
</html>

标签选择器直接应用于html标签
类选择器，可以在页面中多次使用
id选择器，在同一个页面中只能使用一次。（实际上可以用多次，但是为了确保唯一性制定出来的规范）

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

4.4 优先级

ID选择器 > 类选择器 > 标签选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>11选择器的优先级</title><style>/* 类选择器 */.blueColor {color: blue;}/* 标签选择器 */p {color: green;}/* id选择器 */#colorPink{color: pink;}</style>
</head>
<body><p class="blueColor" id="colorPink">我爱编程</p>
</body>
</html>

5. CSS的高级选择器

层次选择器
结构伪类选择器
属性选择器

5.1 层次选择器

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

前两个可能有用

后代选择器案例:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p font {color: red;}</style>
</head>
<body><!-- 儿孙后代 --><p>我爱中国,<font>我<span>爱</span>世界</font></p><font>我爱编程</font>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

子选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 子选择器 */p>span {color: red;}</style>
</head>
<body><!-- 儿孙后代 --><p>我爱中国,<font>我<span>爱</span>世界</font></p><p>我爱编程,<span>我爱html</span></p>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传、

相邻兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div+p{color: blue;}</style>
</head>
<body><div>我爱编程<p>我爱世界</p><span>我爱湖北</span></div><p>我爱世界</p><p>我爱世界22</p>
</body>
</html>

通用兄弟选择器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div~p {color: red;}</style>
</head>
<body><div>我爱中国 <p>我爱世界</p></div><p>我爱编程</p><p>我爱学习</p>
</body>
</html>

5.2 结构伪类选择器

E:first-child	作为E的第一个子元素
E:last-child	作为最后一个子元素
E:nth-child(n)	第n个子元素
E:first-of-type	选择父元素内具有指定类型的第一个E元素
E:last-of-type
E F:nth-of-type(n)	选择父元素内具有指定类型的第n个F元素

前三个够了

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>16结构伪类选择器</title><style>/*给第一个li设置颜色为红色*/ul li:first-child {color: red;}/*给li中的最后一个设置颜色为蓝色*/ul li:last-child {color: blue;}/*给中间第二个孩子设置颜色为绿色*/ul li:nth-child(2){color: green;}/*给第2个p设置字体大小为50px*/p:nth-child(2) {font-size: 50px;}</style>
</head>
<body><p>p1</p><p>p2</p><p>p3</p><ul><li>li1</li><li>li2</li><li>li3</li></ul>
</body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

5.3 属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有属性attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素，且属性为val
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值以val结尾的任意字符串
E[attr*=val]	只要包含了val的任意字符串

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>17属性选择器</title><style>.demo a {width: 50px;height: 50px;}a[id] {background-color: yellow;}a[id=green] {background-color: green;}a[id=blue] {background-color: blue;}a[id=yellow] {background-color: yellow;}a[href^=http] {background-color: pink;}a[href$=cn] {background-color: black;}a[href*=ba] {font-size:  50px;}</style>
</head>
<body><p class="demo"><a href="http://www.baidu.com" target="_self" id="green">百度</a><a href="#">京东</a><a href="http://www.alibaba.cn">阿里</a><a href="https://www.thepaper.cn">澎湃</a></p></body>
</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

四、总结

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Html5+Css3学习笔记

Html5 CSS3 一、概念 1.什么是html5 html: Hyper Text Markup Language ( 超文本标记语言) 文本：记事本超文本： 文字、图片、音频、视频、动画等等（网页） html语言经过浏览器的编译显示成超文本开发者使用5种浏览器&#xf…...

编程日记 2024/7/14 15:45:59

一、代码 <Window x:Class"学习.MainWindow"xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:d"http://schemas.microsoft.com/expression/blend/2008&…...

编程日记 2024/7/14 15:38:53

独家揭秘！五大内网穿透神器，访问你的私有服务

本文精心筛选了五款炙手可热的内网穿透工具，它们各怀绝技，无论您是企业用户、独立开发者，还是技术探索者，这篇文章都物有所值，废话不多说，主角们即将上场。目录 1. 巴比达 - 安全至上的企业护航者 2. 花…...

编程日记 2024/7/14 15:37:52

Ubuntu 编译和运行ZLMediaKit

摘要本文描述了如何在Ubuntu上构建ZLMediaKIt项目源码，以及如何体验其WebRTC推流和播放功能。实验环境操作系统版本：Ubuntu 22.04.3 LTS gcc版本：11.4.0 g版本：11.4.0 依赖库安装 #让ZLMediaKit媒体服务器具备WebRTC流转发…...

编程日记 2024/7/14 15:36:51

基于JavaSpringBoot+Vue+uniapp微信小程序校园宿舍管理系统设计与实现

基于JavaSpringBootVueuniapp微信小程序实现校园宿舍管理系统设计与实现目录第一章绪论 1.1 研究背景 1.2 研究现状 1.3 研究内容第二章相关技术介绍 2.1 Java语言 2.2 HTML网页技术 2.3 MySQL数据库 2.4 Springboot 框架介绍 2.5 VueJS介绍 2.6 ElementUI介绍…...

编程日记 2024/7/14 15:35:50

Hive的基本操作（创建与修改）

必备知识数据类型基本类型类型写法字符char, varchar, string✔整数tinyint, smallint, int✔, bigint✔小数float, double, numeric(m,n), decimal(m,n)✔布尔值boolean✔时间date✔, timestamp✔ 复杂类型(集合类型) 1、数组：array<T> 面向用户提供…...

编程日记 2024/7/14 15:34:49

Linux开发讲课37--- ARM的22个常用概念

1. ARM中一些常见英文缩写解释 MSB：最高有效位； LSB：最低有效位； AHB：先进的高性能总线； VPB：连接片内外设功能的VLSI外设总线； EMC：外部存储器…...

编程日记 2024/7/14 15:33:48

7-1、2、3 IPFS介绍使用及浏览器交互（react+区块链实战）

7-1、2、3 IPFS介绍使用及浏览器交互（react区块链实战） 7-1 ipfs介绍7-2 IPFS-desktop使用7-3 reactipfs-api浏览器和ipfs交互 7-1 ipfs介绍 IPFS区块链上的文件系统 https://ipfs.io/ 这个网站本身是需要科学上网的 Ipfs是点对点的分布式系统无限…...

编程日记 2024/7/14 15:32:41

CentOS 7 中出现 cannot open Packages database in /var/lib/rpm 错误

转载自:https://www.jianshu.com/p/423306f43e72 # 进入 rpmdb 所在目录 [roothostbase ~]# cd /var/lib/rpm [roothostbase rpm]# ls Basenames __db.001 __db.003 Group Name Packages Requirename Sigmd5 Conflictname __db.002 Dirnames Ins…...

编程日记 2024/7/14 15:29:39

【java深入学习第6章】深入解析Spring事件监听机制

在Spring框架中，事件监听机制是一个强大且灵活的功能，允许我们在应用程序中发布和监听事件。这种机制可以帮助我们实现松耦合的设计，使得不同模块之间的通信更加灵活和可维护。本文将详细介绍Spring的事件监听机制，并通过代码示例…...

编程日记 2024/7/14 15:28:37

Flask与Celery实现Python调度服务

文章目录 Flask与Celery实现Python调度服务一、前言1.组件2.场景说明3.环境二、安装依赖1.安装Anaconda3.安装redis2.安装依赖包三、具体实现1.目录结构2.业务流程3.配置文件4.Celery程序5.Flask程序6.测试脚本7.程序启动1）Windows开发调试2）Linux服务…...

编程日记 2024/7/14 15:27:36

Eureka应用场景和优势

Eureka是一款由Netflix开源的服务注册与发现框架，在微服务架构中扮演着至关重要的角色。以下是Eureka的应用场景和优势： Eureka的应用场景 Eureka主要应用于微服务架构中，特别是在大型、复杂的分布式系统中，用于管理和发现服务。…...

编程日记 2024/7/14 15:26:35

prompt第三讲-PromptTemplate

文章目录前提回顾PromptTemplateprompt 模板定义以f-string渲染格式以mustache渲染格式以jinja2渲染格式直接实例化PromptTemplatePromptTemplate核心变量 prompt value生成invokeformat_prompt(不建议使用)format(不建议使用) batchstreamainvoke PromptTemplate核心方法part…...

编程日记 2024/7/14 15:24:33

卷积神经网络图像识别车辆类型

卷积神经网络图像识别车辆类型 1、图像自行车：汽车：摩托车： 2、数据集目录 3、流程 1、获取数据，把图像转成矩阵，并随机划分训练集、测试集 2、把标签转为数值，将标签向量转换为二值矩阵 3、图像数据归一化，0-1之间的值 4、构造卷积神经网络 5、设置图像输入…...

编程日记 2024/7/14 15:16:25

【接口设计】用 Swagger 实现接口文档

用 Swagger 实现接口文档 1.配置 Swagger1.1 添加 Swagger 依赖1.2 创建 Swagger 配置类 2.编写接口文档在项目开发中，一般都是由前后端工程师共同定义接口，编写接口文档，之后大家根据这个接口文档进行开发、维护。为了便于编写和维护稳定&a…...

编程日记 2024/7/14 15:13:22

TensorFlow系列：第四讲：MobileNetV2实战

一. 加载数据集编写工具类，实现数据集的加载 import keras""" 加载数据集工具类 """class DatasetLoader:def __init__(self, path_url, image_size(224, 224), batch_size32, class_modecategorical):self.path_url path_urlself…...

编程日记 2024/7/14 15:07:15

Redis+Caffeine 实现两级缓存实战

RedisCaffeine 实现两级缓存背景事情的开始是这样的，前段时间接了个需求，给公司的商城官网提供一个查询预计送达时间的接口。接口很简单，根据请求传的城市仓库发货时间查询快递的预计送达时间。因为商城下单就会调用这个接口&#xff…...

编程日记 2024/7/14 15:05:14

SpringBoot：SpringBoot中如何实现对Http接口进行监控

一、前言 Spring Boot Actuator是Spring Boot提供的一个模块，用于监控和管理Spring Boot应用程序的运行时信息。它提供了一组监控端点（endpoints），用于获取应用程序的健康状态、性能指标、配置信息等，并支持通过 HTTP …...

编程日记 2024/7/14 15:01:09

STM32-I2C硬件外设

本博文建议与我上一篇I2C 通信协议共同理解合成一套关于I2C软硬件体系 STM32内部集成了硬件I2C收发电路，可以由硬件自动执行时钟生成、起始终止条件生成、应答位收发、数据收发等功能，减轻CPU的负担特点： 多主机功能&#x…...

编程日记 2024/7/14 14:58:06

暑假第一次作业

第一步：给R1,R2,R3,R4配IP [R1-GigabitEthernet0/0/0]ip address 192.168.1.1 24 [R1-Serial4/0/0]ip address 15.0.0.1 24 [R2-GigabitEthernet0/0/0]ip address 192.168.2.1 24 [R2-Serial4/0/0]ip address 25.0.0.1 24 [R3-GigabitEthernet0/0/0]ip address 192.…...

编程日记 2024/7/14 14:57:05

[2025CVPR]DeepVideo-R1：基于难度感知回归GRPO的视频强化微调框架详解

突破视频大语言模型推理瓶颈，在多个视频基准上实现SOTA性能一、核心问题与创新亮点 1.1 GRPO在视频任务中的两大挑战安全措施依赖问题 GRPO使用min和clip函数限制策略更新幅度，导致：梯度抑制：当新旧策略差异过大时梯度消失收敛困难：策略无法充分优化# 传统GRPO的梯…...

编程新知 2025/6/18 19:00:20

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？

Golang 面试经典题：map 的 key 可以是什么类型？哪些不可以？ 在 Golang 的面试中，map 类型的使用是一个常见的考点，其中对 key 类型的合法性是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

编程新知 2025/7/6 9:38:37

深入理解JavaScript设计模式之单例模式

目录什么是单例模式为什么需要单例模式常见应用场景包括单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量惰性单例通用的惰性单例结语什么是单例模式单例模式（Singleton Pattern&#…...

编程新知 2025/7/10 11:49:06

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/7/10 9:30:33

NFT模式：数字资产确权与链游经济系统构建

NFT模式：数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命一、确权技术革新：构建可信数字资产基石 1. 区块链底层架构的进化跨链互操作协议：基于LayerZero协议实现以太坊、Solana等公链资产互通，通过零知…...

编程新知 2025/7/11 14:54:22

聊一聊接口测试的意义有哪些？

目录一、隔离性 & 早期测试二、保障系统集成质量三、验证业务逻辑的核心层四、提升测试效率与覆盖度五、系统稳定性的守护者六、驱动团队协作与契约管理七、性能与扩展性的前置评估八、持续交付的核心支撑接口测试的意义可以从四个维度展开，首…...

编程新知 2025/7/10 11:47:38

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具，可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板，允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板，并通…...

编程新知 2025/7/12 4:31:43

PAN/FPN

import torch import torch.nn as nn import torch.nn.functional as F import mathclass LowResQueryHighResKVAttention(nn.Module):"""方案 1: 低分辨率特征 (Query) 查询高分辨率特征 (Key, Value).输出分辨率与低分辨率输入相同。"""def __…...

编程新知 2025/7/6 7:40:12

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体（对象或容器）QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质（定义颜色、反光等）QFirstPersonC…...

编程新知 2025/6/15 10:38:44

RabbitMQ入门4.1.0版本（基于java、SpringBoot操作）

RabbitMQ 一、RabbitMQ概述 RabbitMQ RabbitMQ最初由LShift和CohesiveFT于2007年开发，后来由Pivotal Software Inc.（现为VMware子公司）接管。RabbitMQ 是一个开源的消息代理和队列服务器，用 Erlang 语言编写。广泛应用于各种分布…...

编程新知 2025/7/8 16:12:16

Html5 + CSS3

一、概念

1.什么是html5

2.什么是css3

3.w3c标准

4.前端学什么？

二、开发工具

三、html和css的语法

1.基本语法

1.1html的语法

1.2html的标签

1. 标签的基本结构

2. 标签的分类

1.3css的语法

1.4 入门代码

2.html种引入CSS样式

2.1 行内样式

2.2 内部样式表

2.3 外部样式表

3.CSS样式优先级

4.CSS基本选择器

4.1 标签选择器

语法：

案例：

4.2 类选择器

语法：

案例

4.3 ID选择器

语法：

案例：

4.4 优先级

5. CSS的高级选择器

5.1 层次选择器

5.2 结构伪类选择器

5.3 属性选择器

四、总结

相关文章：