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

HTML和CSS (前端共三篇)【详解】

news 2025/9/27 9:10:47

目录

一、前端开发介绍

二、HTML入门

三、HTML基础标签

四、CSS样式修饰

五、HTML表格标签

六、HTML表单标签

一、前端开发介绍

        web应用有BS和CS架构两种，其中我们主要涉及的是BS架构。而BS架构里，B（Browser浏览器）是客户端的角色，它负责与用户交互：给用户展示数据、收集用户输入的数据。

        前端页面是在浏览器里渲染显示的，而同一页面在不同浏览器里显示的效果是有差异的，所以建议大家都使用chrome浏览器

前端开发有一套Web标准也称为网页标准，由一系列的标准组成，大部分由W3C（ World Wide Web Consortium，万维网联盟）负责制定。由三个组成部分：

  • HTML：负责展示内容、收集数据。但是不好看

  • CSS：负责修饰HTML的样式。

  • JavaScript：负责网页的行为（交互效果）

二、HTML入门

1.HTML: HyperText Markup Language，超文本标记语言。

  • 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。

  • 标记语言：由标签构成的语言

    • HTML标签都是预定义好的。例如：使用<h1> 标签展示标题，使用<img>展示图片。

    • HTML代码直接在浏览器中运行，HTML标签由浏览器解析。

 2. HTML快速入门

        第一步:创建一个名为HTML的文件夹

        第二步：创建一个文本文件，然后修改文件名为hello.html,注意文件的后缀是.html

        第三步：选中文件，鼠标右击，选择使用记事本打开文件，并且编写前端代码

<html><head><title>HTML 快速入门</title></head><body><h1>Hello HTML</h1></body>
</html>

第四步：然后选中文件，鼠标右击，选择使用浏览器打开文件 ，结果是 Hello HTML 

3. 开发工具VSCode

        

  • Visual Studio Code（简称 VS Code ）是 Microsoft 于2015年4月发布的一款代码编辑器。VS Code 对前端代码有非常强大的支持，同时也其他编程语言（例如：C++、Java、Python、PHP、Go等）。VS Code 提供了非常强大的插件库，大大提高了开发效率。

  • 官网： https://code.visualstudio.com

右键点击Open with Live Server运行

三、HTML基础标签

1.文本类标签，是html提供的用于展示文本内容的标签，是html里非常常见的基础标签。

        2. 路径的写法

        无论是前端开发还是后端开发，都会经常用到路径，那么前端开发中路径是怎么写的呢？同样有两种写法：

  • 绝对路径：指完整路径

    磁盘文件的绝对路径：C:\img\a.jpg 或者 /Users/tom/abc.jpg。前端开发中不要使用这种路径

    互联网网址绝对路径(url)：http://www.baidu.com。注意：url中开头的http或者https等不能省略，必须写

  • 相对路径：指想要加载的目标资源，和当前资源的相对位置。有两种写法：

    以./开头的路径：表示从当前目录加载资源，其中./可以省略。例如

    • ./hello.html表示从当前目录里加载hello.html页面文件

    • hello.html等价于./hello.html

    以../开头的路径：表示从上级目录里加载资源，其中../不能省略。例如：

    • ../welcome.html 表示从上组目录里加载welcome.html

         3. 颜色的写法

        4.尺寸的写法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>文体类标签</title>
</head>
<body><h1>公司简介</h1><hr color="orange" size="2px"><p><b>"中关村黑马程序员训练营"</b>是由<a href="http://www.itcast.cn" target="_blank">传智播客</a>联合中关村软件园、CSDN， 并委托传智播客进行教学实施的软件开发高端培训机构，致力于服务各大软件企业，解决当前软件开发技术飞速发展， 而企业招不到优秀人才的困扰。<br>目前，“中关村黑马程序员训练营”已成长为行业“学员质量好、课程内容深、企业满意”的移动开发高端训练基地， 并被评为中关村软件园重点扶持人才企业。</p><p>黑马程序员的学员多为大学毕业后，有理想、有梦想，想从事IT行业，而没有环境和机遇改变自己命运的年轻人。 黑马程序员的学员筛选制度，远比现在90%以上的企业招聘流程更为严格。任何一名学员想成功入学“黑马程序员”， 必须经历长达2个月的面试流程，这些流程中不仅包括严格的技术测试、自学能力测试，还包括性格测试、压力测试、 品德测试等等测试。毫不夸张地说，黑马程序员训练营所有学员都是精挑细选出来的。百里挑一的残酷筛选制度确 保学员质量，并降低企业的用人风险。</p><p>中关村黑马程序员训练营不仅着重培养学员的基础理论知识，更注重培养项目实施管理能力，并密切关注技术革新， 不断引入先进的技术，研发更新技术课程，确保学员进入企业后不仅能独立从事开发工作，更能给企业带来新的技术体系和理念。</p><p>一直以来，黑马程序员以技术视角关注IT产业发展，以深度分享推进产业技术成长，致力于弘扬技术创新，倡导分享、 开放和协作，努力打造高质量的IT人才服务平台。 </p>
</body>
</html>

2. 媒体类标签

        

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>媒体标签</title>
</head>
<body><img src="img/1.jpg" width="500px"><video src="video/1.mp4" controls width="500px"></video><audio src="audio/1.mp3" controls></audio>
</body>
</html>

四、CSS样式修饰

1.CSS: Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）

        div和span标签

        有任何特殊的显示效果和特殊功能，所以可以使用CSS添加几乎任何样式

        

<div>div里的内容没有任何样式，但是宽度会独占一行
</div>
<span>span里的内容同样没有任何样式，但是宽度是由内容决定的。内容多大，就占多大空间
</span>

2. CSS基础语法

        1.CSS的引入方式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS引入方式</title><!-- <style>div{color: blue;}</style> --><link rel="stylesheet" href="./css/demo.css">
</head>
<body><!-- ctrl + / 是注释快捷键引入方式1：行内样式，用的少在html标签里直接加样式代码 style="css样式属性:值; css样式属性:值;"问题：要给一个标签加样式，就要修改这个标签；如果要加的样式很多，这个标签里的内容会很长如果多个标签要加相同的样式，那么每个标签里都得写样式--><!-- <div style="color: red;">黑马程序员昌平Java418期秦宇迪和雷宇迪</div><div style="color: red;">黑马程序员</div> --><!-- 引入方式2：内部样式，用的多在head标签里增加子标签style，在style里写css样式书写语法是：选择要修饰的标签 {css样式属性: 值;css样式属性: 值;}问题：只能选择当前页面里的标签进行修饰。如果有多个页面都要加相同的样式，每个页面里都得重复写一次--><!-- <div>小红</div><div>小明</div> --><!-- 引入方式3：外联样式，用的更多创建单独的css文件（xxx.css），把样式代码写到css文件里在html里的head标签内使用link标签引入css文件即可--><div>小红15K</div><div>小明15K</div>
</body>
</html>

        2.CSS选择器

  • 标签选择器：根据标签名称选择要修饰的元素

  • id选择器：根据标签的id属性值选择要修饰的元素

  • class选择器：根据标签的class属性值选择要修饰的元素

  • 特别注意的是如果一个标签被选设置同样的设置(比如都设置颜色，颜色不同)，既有标签的设置，又有id的设置，又有class的设置，优先级  id > class > 标签

<head><style>div{/*选中所有div标签，设置div里内容显示成红色*/color: red;}#d1 {/*选中id为d1的标签，设置内容颜色为蓝色*/color: blue;}.cls{/*选中class属性值为cls的标签，设置内容颜色为绿色*/color: green;}        </style>
</head>
<body><div>hello</div><div>css</div><div id="d1">hello</div><span class="cls">hello</span><span class="cls">world</span>
</body>

3.CSS常用属性

        1.常用样式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS常用样式</title><style>div {color: red;font-size: 50px;font-family: '楷体';background-color: beige;/* 首行缩进。2em是2个中文字符的距离 */text-indent: 2em;/* 行高 */line-height: 100px;/* 当一行内容不满时，水平就居中显示 */text-align: center;}a{/* 设置文字的样式。underline下划线；overline上划线；line-throgh删除线；none无线条 */text-decoration: none;}</style>
</head>
<body><div>418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K418均薪15K</div><a href="http://www.baidu.com">跳转到百度</a>
</body>
</html>

          2 页面布局与盒子模型

                所谓“盒子模型”， 是指CSS把页面中所有的元素（标签），都看做是一个盒子，从而通过设置盒子的大小等样式进行页面布局。

        

        

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型</title><style>#inner{width: 200px;height:200px;background-color: yellow;}#box{background-color: lightgreen;width: 200px;height: 200px;border: green 50px solid;padding: 50px;margin: 50px;}</style>
</head>
<body><div id="box"><div id="inner"></div></div>
</body>
</html>

五、HTML表格标签

         1.场景：在网页中以表格（行、列）形式整齐展示数据

         2.表格标签

        

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HTML-表格</title><style>td {text-align: center; /* 单元格内容居中展示 */}</style>
</head>
<body><table border="1px" cellspacing="0"  width="600px"><tr><th>序号</th><th>品牌Logo</th><th>品牌名称</th><th>企业名称</th></tr><tr><td>1</td><td> <img src="图片路径" width="100px"> </td><td>某公司</td><td>某某有限公司</td></tr><tr><td>2</td><td> <img src="图片路径"  width="100px"> </td><td>公司</td><td>某某团控股有限公司</td></tr></table></body>
</html>

六、HTML表单标签

        表单，是用于收集用户所输入的数据的组件

        1.标签介绍

<!--
01.表单标签：form是一个容器，里边用来放各种各样的表单项。脱离开表单项，form标签本身没有任何作用属性：name：名称。可以不给名称action：表单数据提交的路径。如果没有路径，表示提交给当前页面自己method：表单数据提交的方式。常用方式有get、post
-->
<form name="myform" action="" method="get"></form>

       2.get和post的区别（重点）

       get方式：

                数据是在HTTP请求行里提交的，会显示到地址栏

                安全性相对较低

                参数长度有限制

        post方式：

                数据是在HTTP请求体里提交的，不会显示到地址栏

                安全性相对较高

                参数长度理论上没有限制

        3.input标签   

        4.select下拉框标签     

        5.tetxtarea文本域标签

        如果需要让用户输入大段的文本内容的话，可以使用textarea文本域标签，它允许用户输入多行内容

<form method="post" action=""><!--文本框(text)，密码框(password)：name：表单项的名称。如果这个表单项的数据要提交，就必须有name属性value：默认值-->帐号：<input type="text" name="username" value="默认值"> <br>密码：<input type="password" name="password" value="123456"><br><!--单选按钮(radio)，复选框(checkbox)：name：表单项名称。如果这个表单项的数据要提交，就必须有namename相同的radio属于同一组；同组radio的特性是：选择互斥name相同的checkbox属于同一组，但是同组的目的仅仅是方便服务端接收数据而已value：选项的值，每个选项都要有值。选中哪个选项，提交表单时就提交哪个选项的value值默认值：哪个选项想要默认选中，就在哪个选项上加属性 checked="checked" 或者简写：checked-->性别：<input type="radio" name="sex" value="male" checked>男<input type="radio" name="sex" value="female">女 <br>爱好：<input type="checkbox" name="hobby" value="sing" checked>唱<input type="checkbox" name="hobby" value="dance" checked>跳<input type="checkbox" name="hobby" value="rap" checked>rap<input type="checkbox" name="hobby" value="ball">篮球 <br><!--文件选择框(file)name：如果这个表单项的数据要提交，就必须有name注意：默认情况下，文件选择框提交的仅仅是文件名称，而不是上传文件-->文件：<input type="file" name="file"><!--隐藏域：不显示到页面上的表单项，但是在提交表单时，它的数据可以被提交（只要有name）type：hiddenname：如果数据要提交，就必须有namevalue：隐藏域的值实际使用场景：等学习到的时候再说--><input type="hidden" name="hide" value="隐藏域的值"><!--按钮：普通按钮(button)：没有任何功能的按钮，所以将来可以使用JavaScript自定义任何功能提交按钮(submit)：点击时会提交表单。按钮在哪个表单里，就提交哪个表单重置按钮(reset)：点击时会把表单里所有表单项数据，恢复成默认值常用属性：name：可以不设置。value：是按钮上的文字--><input type="button" value="普通按钮"><input type="submit" value="提交按钮"><input type="reset" value="重置按钮"><br><br><hr><!--下拉框：select标签：下拉框本身name：如果下拉框的数据要提交，就必须有name属性option标签：下拉选项，要放在select标签里边使用value：选项的值。选中哪个选项，就提交哪个选项的value值默认值：如果没有任何设置，默认选中第一个选项如果要手动设置默认值：哪个选项想要默认选中，就在哪个选项option上加属性 selected="selected"或者简写 selected-->地址：<select name="address"><option value="tj">天津市</option><option value="bj" selected>北京市</option><option value="sh">上海市</option></select><!--文本域：textareaname：如果数据要提交，就必须有name属性-->slogan：<textarea name="slogan" rows="5" cols="10" maxlength="5">默认值</textarea>
</form>

七、文档阅读

        这里只是教大家一个入门，还有很多标签我们没有学习，如果忘记和查找去一个官网

        文档地址: w3school 在线教程       

        

相关文章：

HTML和CSS (前端共三篇)【详解】

目录 一、前端开发介绍 二、HTML入门 三、HTML基础标签 四、CSS样式修饰 五、HTML表格标签 六、HTML表单标签 一、前端开发介绍 web应用有BS和CS架构两种&#xff0c;其中我们主要涉及的是BS架构。而BS架构里&#xff0c;B&#xff08;Browser浏览器&#xff09;是客户端的…...

编程日记 2024/3/4 7:49:18

Linux——进程控制（二）进程等待

目录 前言 一、进程等待 二、如何进行进程等待 1.wait 2.waitpid 2.1第二个参数 2.2第三个参数 3. 等待多个进程 三、为什么不用全局变量获取子进程的退出信息 前言 前面我们花了大量的时间去学习进程的退出&#xff0c;退出并不难&#xff0c;但更深入的学习能为本…...

编程日记 2024/3/4 7:47:16

多线程导入excel

设置线程池参数&#xff0c;创建线程池 corePoolSize要保留在池中的线程数&#xff0c;即使它们是空闲的&#xff0c;除非{code - allowCoreThreadTimeOut}被设置maximumPoolSize允许在池中的最大线程数keepAliveTime当线程数大于核心时&#xff0c;这是多余的空闲线程将在终止…...

编程日记 2024/3/4 7:46:14

设计模式（十五）状态模式

请直接看原文:设计模式系列 ------------------------------------------------------------------------------------------------------------------------------- 前言 建议在阅读本文前先阅读设计模式&#xff08;十一&#xff09;策略模式这篇文章&#xff0c;虽说状态…...

编程日记 2024/3/4 7:45:13

Java基于SpringBoot的在线文档管理系统的设计与实现论文

摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;在线文档管理当然也不能排除在外。在线文档管理系统是以实际运用为开发背景&#xff0c;运用软件工程原理和开发方法&am…...

编程日记 2024/3/4 7:40:10

突破编程_C++_STL教程（ list 的高级特性）

1 std::list 的排序 1.1 基础类型以及 std::string 类型的排序 std::list的排序可以通过调用其成员函数sort()来实现。sort()函数使用默认的比较操作符&#xff08;<&#xff09;对std::list中的元素进行排序。这意味着&#xff0c;如果元素类型定义了<操作符&#xff…...

编程日记 2024/3/4 7:39:09

Scratch 第十六课-弹珠台游戏

第十六课-弹珠台游戏 大家好&#xff0c;今天我们一起做一款弹珠台scratch游戏&#xff0c;我们也可以叫它弹球游戏&#xff01;这款游戏在刚出来的时候非常火爆。小朋友们要认真学习下&#xff01; 这节课的学习目标 物体碰撞如何处理转向问题。复习键盘对角色的控制方式。…...

编程日记 2024/3/4 7:34:05

对简单工厂模式、工厂方法模式的思考

目录 1 背景1.1 题目描述1.2 输入描述1.3 输出描述1.4 输入示例1.5 输出示例 2 简单工厂模式3 工厂方法模式4 思考4.1 改进工厂方法模式 1 背景 题目源自&#xff1a;【设计模式专题之工厂方法模式】2.积木工厂 1.1 题目描述 小明家有两个工厂&#xff0c;一个用于生产圆形积木…...

编程日记 2024/3/4 7:31:03

【详识JAVA语言】面向对象程序三大特性之二：继承

继承 为什么需要继承 Java中使用类对现实世界中实体来进行描述&#xff0c;类经过实例化之后的产物对象&#xff0c;则可以用来表示现实中的实体&#xff0c;但是 现实世界错综复杂&#xff0c;事物之间可能会存在一些关联&#xff0c;那在设计程序是就需要考虑。 比如&…...

编程日记 2024/3/4 7:29:01

【剑指offer--C/C++】JZ3 数组中重复的数字

一、题目 二、本人思路及代码 这道题目它要求的时间空间利用率都是n&#xff0c;那么可以考虑创建一个长度为n的数组repeat初始化为0&#xff0c;下标代码出现的数字&#xff0c;下标对应的数组内容代表该下标数字出现的次数。然后遍历提供的数组&#xff0c;每出现一个数字&a…...

编程日记 2024/3/4 7:26:59

基于SpringBoot的在线拍卖系统设计与实现(源码)

项目源码&#xff1a;https://gitee.com/oklongmm/biye2 引言 随着互联网技术的发展&#xff0c;电子商务得以快速发展&#xff0c;其中之一的在线拍卖系统也逐渐得到了广泛的应用。但是&#xff0c;现有的在线拍卖系统在操作复杂性、安全性和稳定性方面存在一定的问题。为了…...

编程日记 2024/3/4 7:24:56

卢森堡比利时土耳其媒体宣发稿助力跨境出海推广新闻营销

【本篇由言同数字科技有限公司原创】随着全球化进程的加速&#xff0c;越来越多的品牌开始考虑在海外市场扩展业务。对于品牌来说&#xff0c;跨境海外推广是必要的&#xff0c;因为它可以帮助品牌打开更大的市场、吸引更多的消费者、提高品牌知名度和形象&#xff0c;并在全球…...

编程日记 2024/3/4 7:20:52

冒泡排序（C语言详解）

原理&#xff1a;从左到右一次比较&#xff0c;如果左侧数字比右侧数字大&#xff08;小&#xff09;&#xff0c;则两数交换&#xff0c;否则比较下一 组数字&#xff0c;每一次大循环比较可以将乱序的最右侧数字改为最大&#xff08;最小&#xff09;&#xff0c…...

编程日记 2024/3/4 7:17:50

STC-ISP原厂代码研究之 V3.7d汇编版本

最近在研究STC的ISP程序，用来做一个上位机烧录软件，逆向了上位机软件，有些地方始终没看明白，因此尝试读取它的ISP代码，但是没有读取成功。应该是目前的芯片架构已经将引导代码放入在了单独的存储块中，而这存储块有硬件级的使能线，在面包板社区-宏晶STC单片机的ISP的BIN文…...

编程日记 2024/3/4 7:16:49

【word】引用文献如何标注右上角

一、在Word文档中引用文献并标注在右上角的具体步骤如下 1、将光标移动到需要添加文献标注的位置&#xff1a; 2、在文档上方的工具栏中选择“引用”选项&#xff1a; 3、点击“插入脚注”或“插入尾注”&#xff1a; ①如果选择的是脚注&#xff0c;则脚注区域会出现在本页的…...

编程日记 2024/3/4 7:15:48

MySQL 5.5、5.6、5.7的主从复制改进

主从复制面临的问题 MySQL一直以来的主从复制都是被诟病，原因是： 1、主从复制效率低 早期mysql的复制是通过将binlog语句异步推送到从库。从库启动一个IO线程将接收到的数据记录到relaylog中；另外启动一个SQL线程负责顺序执行relaylog中的语句实现对数据的拷贝。 这里的…...

编程日记 2024/3/4 7:12:46

性能分析排查思路之日志（1）

本文是性能问题分析排查思路的展开内容之一&#xff0c;主要分为日志1期&#xff0c;机器4期、环境2期共7篇系列文章&#xff0c;本期是第一篇&#xff0c;讲日志的分析方法和经验。 系列文章传送门&#xff1a; 一图梳理性能问题分析排查思路-总体概述&#xff08;0&#xff…...

编程日记 2024/3/4 7:10:44

Vue中如何实现条件渲染？

在Vue中实现条件渲染非常简单且灵活&#xff0c;主要通过Vue的指令来实现。在Vue中&#xff0c;我们可以使用v-if和v-else指令来根据条件来渲染不同的内容。下面就让我们通过一个简单的示例来演示如何在Vue中实现条件渲染&#xff1a; <!DOCTYPE html> <html lang&qu…...

编程日记 2024/3/4 7:09:43

Postman上传文件的操作方法

前言 调用某个接口&#xff0c;测试上传文件功能。一时间不知如何上传文件&#xff0c;本文做个操作记录&#xff0c;期望与你有益。 步骤一、设置Headers key:Content-Type value:multipart/form-data 步骤二、设置Body 选择form-data key:file下拉框选择file类型value&…...

编程日记 2024/3/4 7:08:42

linux系统Jenkins工具介绍

Jenkins概念介绍 Jenkins概念Jenkins目的特性产品发布流程 Jenkins概念 Jenkins是一个功能强大的应用程序&#xff0c;允许持续集成和持续交付项目&#xff0c;无论用的是什么平台。这是一个免费的源代码&#xff0c;可以处理任何类型的构建或持续集成。集成Jenkins可以用于一些…...

编程日记 2024/3/4 7:05:40

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2025/9/27 6:18:24

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

编程新知 2025/9/25 17:50:43

【Oracle APEX开发小技巧12】

有如下需求&#xff1a; 有一个问题反馈页面&#xff0c;要实现在apex页面展示能直观看到反馈时间超过7天未处理的数据&#xff0c;方便管理员及时处理反馈。 我的方法&#xff1a;直接将逻辑写在SQL中&#xff0c;这样可以直接在页面展示 完整代码&#xff1a; SELECTSF.FE…...

编程新知 2025/9/25 20:05:33

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/9/25 21:38:07

Cesium1.95中高性能加载1500个点

一、基本方式&#xff1a; 图标使用.png比.svg性能要好 <template><div id"cesiumContainer"></div><div class"toolbar"><button id"resetButton">重新生成点</button><span id"countDisplay&qu…...

编程新知 2025/7/18 11:40:55

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2025/9/26 4:00:45

MVC 数据库

MVC 数据库 引言 在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/8/16 14:02:21

ElasticSearch搜索引擎之倒排索引及其底层算法

文章目录 一、搜索引擎1、什么是搜索引擎？2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长，文件大。2.其次，树深，IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...

编程新知 2025/9/26 10:22:34

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决

Spring Cloud Gateway 中自定义验证码接口返回 404 的排查与解决 问题背景 在一个基于 Spring Cloud Gateway WebFlux 构建的微服务项目中&#xff0c;新增了一个本地验证码接口 /code&#xff0c;使用函数式路由&#xff08;RouterFunction&#xff09;和 Hutool 的 Circle…...

编程新知 2025/9/24 7:50:38

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/9/22 22:15:11