Html5+Css3学习笔记
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种浏览器…...
WPF学习(2) -- 样式基础
一、代码 <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&…...
独家揭秘!五大内网穿透神器,访问你的私有服务
本文精心筛选了五款炙手可热的内网穿透工具,它们各怀绝技,无论您是企业用户、独立开发者,还是技术探索者,这篇文章都物有所值,废话不多说,主角们即将上场。 目录 1. 巴比达 - 安全至上的企业护航者 2. 花…...
Ubuntu 编译和运行ZLMediaKit
摘要 本文描述了如何在Ubuntu上构建ZLMediaKIt项目源码,以及如何体验其WebRTC推流和播放功能。 实验环境 操作系统版本:Ubuntu 22.04.3 LTS gcc版本:11.4.0 g版本:11.4.0 依赖库安装 #让ZLMediaKit媒体服务器具备WebRTC流转发…...
基于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介绍…...
Hive的基本操作(创建与修改)
必备知识 数据类型 基本类型 类型写法字符char, varchar, string✔整数tinyint, smallint, int✔, bigint✔小数float, double, numeric(m,n), decimal(m,n)✔布尔值boolean✔时间date✔, timestamp✔ 复杂类型(集合类型) 1、数组:array<T> 面向用户提供…...
Linux开发讲课37--- ARM的22个常用概念
1. ARM中一些常见英文缩写解释 MSB:最高有效位; LSB:最低有效位; AHB:先进的高性能总线; VPB:连接片内外设功能的VLSI外设总线; EMC:外部存储器…...
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是点对点的分布式系统 无限…...
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…...
【java深入学习第6章】深入解析Spring事件监听机制
在Spring框架中,事件监听机制是一个强大且灵活的功能,允许我们在应用程序中发布和监听事件。这种机制可以帮助我们实现松耦合的设计,使得不同模块之间的通信更加灵活和可维护。本文将详细介绍Spring的事件监听机制,并通过代码示例…...
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服务…...
Eureka应用场景和优势
Eureka是一款由Netflix开源的服务注册与发现框架,在微服务架构中扮演着至关重要的角色。以下是Eureka的应用场景和优势: Eureka的应用场景 Eureka主要应用于微服务架构中,特别是在大型、复杂的分布式系统中,用于管理和发现服务。…...
prompt第三讲-PromptTemplate
文章目录 前提回顾PromptTemplateprompt 模板定义以f-string渲染格式以mustache渲染格式以jinja2渲染格式直接实例化PromptTemplatePromptTemplate核心变量 prompt value生成invokeformat_prompt(不建议使用)format(不建议使用) batchstreamainvoke PromptTemplate核心方法part…...
卷积神经网络图像识别车辆类型
卷积神经网络图像识别车辆类型 1、图像 自行车: 汽车: 摩托车: 2、数据集目录 3、流程 1、获取数据,把图像转成矩阵,并随机划分训练集、测试集 2、把标签转为数值,将标签向量转换为二值矩阵 3、图像数据归一化,0-1之间的值 4、构造卷积神经网络 5、设置图像输入…...
【接口设计】用 Swagger 实现接口文档
用 Swagger 实现接口文档 1.配置 Swagger1.1 添加 Swagger 依赖1.2 创建 Swagger 配置类 2.编写接口文档 在项目开发中,一般都是由前后端工程师共同定义接口,编写接口文档,之后大家根据这个接口文档进行开发、维护。为了便于编写和维护稳定&a…...
TensorFlow系列:第四讲:MobileNetV2实战
一. 加载数据集 编写工具类,实现数据集的加载 import keras""" 加载数据集工具类 """class DatasetLoader:def __init__(self, path_url, image_size(224, 224), batch_size32, class_modecategorical):self.path_url path_urlself…...
Redis+Caffeine 实现两级缓存实战
RedisCaffeine 实现两级缓存 背景 事情的开始是这样的,前段时间接了个需求,给公司的商城官网提供一个查询预计送达时间的接口。接口很简单,根据请求传的城市仓库发货时间查询快递的预计送达时间。因为商城下单就会调用这个接口ÿ…...
SpringBoot:SpringBoot中如何实现对Http接口进行监控
一、前言 Spring Boot Actuator是Spring Boot提供的一个模块,用于监控和管理Spring Boot应用程序的运行时信息。它提供了一组监控端点(endpoints),用于获取应用程序的健康状态、性能指标、配置信息等,并支持通过 HTTP …...
STM32-I2C硬件外设
本博文建议与我上一篇I2C 通信协议共同理解 合成一套关于I2C软硬件体系 STM32内部集成了硬件I2C收发电路,可以由硬件自动执行时钟生成、起始终止条件生成、应答位收发、数据收发等功能,减轻CPU的负担 特点: 多主机功能&#x…...
暑假第一次作业
第一步:给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.…...
手游刚开服就被攻击怎么办?如何防御DDoS?
开服初期是手游最脆弱的阶段,极易成为DDoS攻击的目标。一旦遭遇攻击,可能导致服务器瘫痪、玩家流失,甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案,帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?
在建筑行业,项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升,传统的管理模式已经难以满足现代工程的需求。过去,许多企业依赖手工记录、口头沟通和分散的信息管理,导致效率低下、成本失控、风险频发。例如&#…...
STM32F4基本定时器使用和原理详解
STM32F4基本定时器使用和原理详解 前言如何确定定时器挂载在哪条时钟线上配置及使用方法参数配置PrescalerCounter ModeCounter Periodauto-reload preloadTrigger Event Selection 中断配置生成的代码及使用方法初始化代码基本定时器触发DCA或者ADC的代码讲解中断代码定时启动…...
大语言模型如何处理长文本?常用文本分割技术详解
为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
CMake控制VS2022项目文件分组
我们可以通过 CMake 控制源文件的组织结构,使它们在 VS 解决方案资源管理器中以“组”(Filter)的形式进行分类展示。 🎯 目标 通过 CMake 脚本将 .cpp、.h 等源文件分组显示在 Visual Studio 2022 的解决方案资源管理器中。 ✅ 支持的方法汇总(共4种) 方法描述是否推荐…...
.Net Framework 4/C# 关键字(非常用,持续更新...)
一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...
OPENCV形态学基础之二腐蚀
一.腐蚀的原理 (图1) 数学表达式:dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一,腐蚀跟膨胀属于反向操作,膨胀是把图像图像变大,而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...
Pinocchio 库详解及其在足式机器人上的应用
Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库,专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性,并提供了一个通用的框架&…...
C#中的CLR属性、依赖属性与附加属性
CLR属性的主要特征 封装性: 隐藏字段的实现细节 提供对字段的受控访问 访问控制: 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性: 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑: 可以…...
