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

CSS（JavaEE初阶系列14）

news 2025/7/7 12:43:59

目录

前言：

1.CSS是什么

1.1CSS基本语法

2.引入样式

2.1内部样式表

2.2行内样式表

2.3外部样式

3.选择器

3.1选择器的种类

3.1.1基础选择器

3.1.2复合选择器

4.常用元素属性

4.1字体属性

4.2文本属性

4.3背景属性

4.4圆角矩形

4.5元素的显示模式

4.6盒模型

4.7内边距

4.8外边距

4.9弹性布局

结束语：

前言：

在上一节中小编与大家分享了有关于JavaScript的一些基础知识，以及给大家演示了几个案例，接下来小编带着大家一起来看一下有关于前端中的另一个技术CSS，想要让界面好看，那么就离不开CSS的渲染。话不多说我们一起来看吧。

1.CSS是什么

CSS是层叠样式表，所谓“层叠”就是针对html的元素/标签，可以同时应用多组CSS样式，将多组样式叠加在一起。“样式”就是大小、位置、间距、颜色、字体、边框、背景....统称为“样式”，它描述了一个网页张啥样。

CSS能够对网页元素的位置的排版进行像素精确控制，实现美化页面的效果，能够做到页面的样式和结构分离。

1.1CSS基本语法

选择器 + {一条/N条声明}

  • 选择器决定针对谁修改。
  • 声明决定修改啥。
  • 声明的属性是键值对，使用;区分键值对，使用：区分键和值。

<body>

    <style>

        p{

            /* 设置字体颜色 */

            color: red;

            /* 设置字体大小 */

            font-size: 30px;

        }

    </style>

    <p>hello</p>

</body>

注意：

  • CSS要写到style标签中（后面还会介绍其他写法）。
  • style标签可以放到页面任意位置，一般是放置在head标签中。
  • CSS使用/**/作为注释。

2.引入样式

2.1内部样式表

内部样式是直接把CSS嵌入到HTML中，放到style标签里。

    <!-- 在style标签中写的是css代码，他可以放置在head中也可以放置在body中 -->

    <style>

        div{

            font-size: 50px;

            color: red;

        }

    </style>

代码展示：

<!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><!-- 在style标签中写的是css代码，他可以放置在head中也可以放置在body中 --><style>div{font-size: 50px;color: greenyellow;}</style><div>hello world！</div>
</body>
</html>


结果展示：

2.2行内样式表

行内样式是将CSS写到一个单独的.css文件中，有html通过link标签来引进来。

首先我们先来创建一个.css文件。

代码展示：

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><!-- 通过link标签将css文件引入进来 --><link rel="stylesheet" href="style.css">
</head>
<body><div>hello world！</div>
</body>
</html>


css文件代码展示：

div {font-size: 50px;color: blue;
}


结果展示：

2.3外部样式

内部样式也叫内联样式，他是直接把CSS属性写到元素的style属性内。

代码展示：

<!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><div style="color: blueviolet; font-size: 60px;"> hello world!</div>
</body>
</html>


结果展示：

3.选择器

选择器就是要我们选中页面中的元素然后再进行操作。只有先选中元素才能生效。下面我们来分别来看一下四种选择器。

3.1选择器的种类

3.1.1基础选择器

  • 标签选择器

标签选择器是用来选中页面中的所有同名标签的元素，它的缺点也很显而易见就是很难针对某个元素进行个性化制定。

代码展示：

<!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><style>p {color: red;font-size: 30px;}div {color: burlywood;font-size: 20px;}</style><p>hello</p><p>world</p><div>css</div><div>JavaScript</div>
</body>
</html>


结果展示：

  • 类选择器

在css中创建一个“类名”，这个类名对应一组css属性，制定让html元素应用这样的类名即可。

代码展示：

css文件代码：

.one {color: rosybrown;font-size: 50px;
}
.tow {color: blueviolet;font-size: 30px;
}


html文件代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>类选择器</title><link rel="stylesheet" href="Test3.css">
</head>
<body><div class="one">hello</div><div class="tow">hello</div>
</body>
</html>


结果展示：

  • id选择器

一个html标签中可以有一个id属性，这个属性的值会被作为身份标识的唯一值。所以通过id选择器就可以给制定元素设置样式了。

代码展示：

css代码展示：

#test {color: brown;font-size: 50px;
}


html代码展示：
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id选择器</title><link rel="stylesheet" href="Test4.css">
</head>
<body><div id="test">hello world</div>
</body>
</html>

结果展示：

  • 通配符选择器

通配符选择器就是给所有的都设置样式。

代码展示：

<!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><style>* {color: aquamarine;font-size: 40px;}</style><div>hello</div><p>world</p>
</body>
</html>


结果展示：

3.1.2复合选择器

上述都是css中最基础的选择器，其实在css中海油很多复杂的“复合选择器”，下面我们只给大家介绍一种后代选择器。

  • 后代选择器 
    <!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><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>

后代选择器的效果就是把上述三种基础选择器进行组合，同时能够体现出“标签的层次结构”。

代码展示：

<!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><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>


结果展示：

除了后代选择器之外还有以下这些，小编这里就不给大家一一介绍了。

  • 子选择器
  • 并集选择器
  • 伪类选择器

4.常用元素属性

4.1字体属性

代码展示：

<!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><div class="one">hello</div><style>.one {font-family: '微软雅黑';font-size: 100px;font-weight: 900;font-style: italic;}</style>
</body>
</html>


结果展示：

我们也可以在控制台中通过勾选下面的条件来看到效果。

4.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><div class="one">hello world</div><style>.one {font-size: 100px;/* 文本颜色 */color: brown;/* 文本对齐，左对齐(left)，右对齐(right)，居中对齐(center) */text-align: center;/* 文本装饰，加一个下划线... */text-decoration: underline;/* 文本缩进 */text-indent: 20px;/* 行高(行间距) */line-height: 100px;}</style>
</body>
</html>


结果展示：

注意：

这里颜色的写法有很多中，其中可以直接写表示颜色的单词，也可使用rgb的方式来表示，还可以使用十六进制的方式来表示。

 

4.3背景属性

代码展示：

<!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><div class="background">1</div><style>.background {font-size: 100px;width: 200px;height: 160px;color: blueviolet;background-color: gold;/* 导入背景图 */border-image: url(cat.jpg);/* 禁止平铺 */background-repeat: no-repeat;/* 设置背景图的位置 */background-position: center center;/* 设置背景图的大小 */background-size: 2000px 1600px;}      </style>
</body>
</html>
<!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><div class="one"></div><style>.one {background-image: url(cat.jpg);height: 300px;background-repeat: no-repeat;background-position: center center;}</style>
</body>
</html>


结果展示：

4.4圆角矩形

我们之前生成的边框都是矩形的，但是如果我们想要让他变成圆边的该怎么弄呢？如下代码所示：

代码展示：

<!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><div>111</div><style>div {width: 200px;height: 100px;border: 2px solid green;border-radius: 10px;}</style>
</body>
</html>


结果展示：

4.5元素的显示模式

在CSS中，HTML的标签的显示模式有很多，此处只重点介绍两个：

块级元素和行内元素。

块级元素：

        像我们之前学习的h1-h6、p、div、ul、ol...都是块级元素。

它的特点：

  • 独占一行。
  • 高度、宽度、内外边距、行高都可以控制。
  • 宽度默认是父级元素宽度的100%（和父级元素一样框宽）。
  • 是一个容器（盒子），里面可以放行内和块级元素。

行内元素/内联元素：
        常见的元素有：a、strong、b、em、i、del、s、ins...

特点：

  • 不独占一行，一行可以显示多个。
  • 设置高度、宽度、行高无效。
  • 左右外边距有效（上下无效），内边距有效。
  • 默认宽度就是本身的内容。
  • 行内元素只能容纳文本和其他行内元素，不能放块级元素。

行内元素和块级元素的区别：

  • 块级元素独占一行，行内元素不独占一行。
  • 块级元素可以设置宽高，行内元素不能设置宽高。
  • 块级元素四个方向都能设置内外边距，行内元素垂直方向不能设置。

使用display属性可以修改元素的显示模式：

  • display：block；（修改成块级元素）。
  • display：inline；（修改成行内元素）。

一般都是修改成块级元素，不会说是把块级元素修改成行内元素，也可以使用display：none实现元素隐身的效果。

4.6盒模型

每一个HTML元素就相当于是一个矩形的“盒子”，这个盒子是由这几个部分组成的。

  • 边框：border
  • 内容：content
  • 内边距：padding
  • 外边距：margin

如下图所示：

4.7内边距

padding是设置内容和边框之间的距离的。

基础写法：
默认内容是顶着边框来放置的，用padding来控制这个距离可以给四个方向都加上边距。

  • padding-top 上
  • padding-bottom 下
  • padding-left 左
  • padding-right 右

复合写法：

可以把多个方向的padding合并到一起。

  • padding：5px; 表示四个方向都是5px。
  • padding：5px 10px; 表示上下内边距是5px，左右内边距是10px。
  • padding：5px 10px 20px; 表示上内边距是5px，左右内边距是10px，下内边距是20px。
  • padding：5px 10px 20px 30px; 表示上内边距是5px，右内边距是10px，下内边距是20px，左内边距是30px。（顺时针）

代码展示：

<!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><div>设置内边距</div><style>* {/* 防止撑大盒子 */box-sizing: border-box;}div {padding-top: 20px;padding-bottom: 10px;padding-left: 20px;padding-right: 10px;}</style>
</body>
</html>


结果展示：

4.8外边距

基础写法：

控制盒子和盒子之间的距离。可以给四个方向都加上外边距。

  • margin-top 上
  • margin-bottom 下
  • margin-left 左
  • margin-right 右

复合写法：

规则与padding一样。

  • margin：10px; 四个方向都是10px
  • margin：10px 20px; 上下外边距为10px，左右外边距为20px。
  • margin：10px 20px 30px; 上外边距10px，左右外边距20px，下外边距30px。
  • margin：10px 20px 30px 40px; 上外边距10px，右外边距20px，下外边距30px，左外边距40px。

代码展示：

<!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><div>test</div><style>* {box-sizing: border-box;}div {margin-top: 10px;margin-bottom: 20px;margin-left: 30px;margin-right: 40px;}</style>
</body>
</html>


结果展示：

 

4.9弹性布局

我们先来看一下下面的这个案例。

代码展示：

<!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><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>


结果展示：

通过结果我们可以看出来里面的元素是垂直方向排列的，那么有的时候我们希望块级元素是可以水平方向排列。此时我们就可以使用弹性布局了。

如下所示：
代码展示：

<!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><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;/* 开启弹性布局 *//* 一旦开启了弹性布局，此时内部的子元素就会按照水平的方向进行排布，子元素里面的子元素是不受影响的 */display: flex;/* justify-content：设置水平方向的排列规则 */justify-content: space-between;/* align-items：设置垂直方向的排列规则 */align-items: center;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>


结果展示：

结束语：

好了这节的CSS基础知识小编就给大家讲解到这里了，有不会的地方记得给小编留言，希望这节对大家了解CSS有一定帮助，想要学习的同学记得关注小编和小编一起学习吧！如果文章中有任何错误也欢迎各位大佬及时为小编指点迷津（在此小编先谢过各位大佬啦！）

相关文章：

CSS（JavaEE初阶系列14）

目录 前言&#xff1a; 1.CSS是什么 1.1CSS基本语法 2.引入样式 2.1内部样式表 2.2行内样式表 2.3外部样式 3.选择器 3.1选择器的种类 3.1.1基础选择器 3.1.2复合选择器 4.常用元素属性 4.1字体属性 4.2文本属性 4.3背景属性 4.4圆角矩形 4.5元素的显示模式 4…...

编程日记 2023/8/20 16:44:48

学习笔记230810--get请求的两种传参方式

问题描述 今天写了一个对象方式传参的get请求接口方法&#xff0c;发现没有载荷&#xff0c;ip地址也没有带查询字符串&#xff0c;数据也没有响应。 代码展示 错误分析 实际上这里的query是对象方式带参跳转的参数名&#xff0c;而get方法对象方式传参的参数名是parmas 解…...

编程日记 2023/8/20 16:43:45

游戏找不到msvcr100.dll解决方法，常见的三种解决方法

在计算机领域&#xff0c;msvcr100.dll是一个非常重要的动态链接库文件。它是Microsoft Visual C 2010 Redistributable的一部分&#xff0c;用于支持Visual Studio 2010的开发环境。然而&#xff0c;在某些情况下&#xff0c;msvcr100.dll可能会出现问题&#xff0c;导致程序无…...

编程日记 2023/8/20 16:42:44

机器学习知识点总结：什么是GBDT(梯度提升树)

什么是GBDT(梯度提升树) 虽然GBDT同样由许多决策树组成&#xff0c;但它与随机森林由许多不同。 其中之一是GBDT中的树都是回归树&#xff0c;树有分类有回归&#xff0c;区分它们的方法很简单。将苹果单纯分为好与坏的是分类树&#xff0c;如果能为苹果的好坏程度打个分&…...

编程日记 2023/8/20 16:41:43

SpringBoot + Vue 微人事权限组管理模块 (十四)

权限组前端页面制作 权限组管理角色和菜单之间关系&#xff0c;操作员管理着用户和角色之间的关系。 英文的输入框要有个前缀&#xff0c;SpringSecurity里角色英文名需要加一个ROLE_的前缀 上代码 <div><div class"permissManaTool"><el-input pla…...

编程日记 2023/8/20 16:40:41

Liunx系统编程：进程信号的概念及产生方式

目录 一. 进程信号概述 1.1 生活中的信号 1.2 进程信号 1.3 信号的查看 二. 信号发送的本质 三. 信号产生的四种方式 3.1 按键产生信号 3.2 通过系统接口发送信号 3.2.1 kill -- 向指定进程发送信号 3.2.2 raise -- 当自身发送信号 3.2.3 abort -- 向自身发送进程终止…...

编程日记 2023/8/20 16:39:39

宝塔端口监听不到端口

场景&#xff1a; 两个服务器同时在安装nginx 出问题导致20011没有在监听&#xff0c;重新删除nginx 就行了 当时一直以为是安全组没有放过端口&#xff0c;其实是没有监听 排查问题 php -S 0.0.0.0:端口 如果可以访问说明链接可以到服务器只是nginx没监听 sudo netstat …...

编程日记 2023/8/20 16:38:38

机器学习入门的概念

导航 一、 人工智能&#xff0c;机器学习&#xff0c;深度学习和传统学习二、数学基础三、编程语言 如果你刚刚入门机器学习&#xff0c;会接触到了非常多的概念。比如人工智能&#xff0c;机器学习&#xff0c;深度学习&#xff0c;神机网络&#xff0c;强化学习&#xff0c;各…...

编程日记 2023/8/20 16:37:36

插入排序优化——超越归并排序的超级算法

插入排序及优化 插入排序算法算法讲解数据模拟代码 优化思路一、二分查找二、copy函数 优化后代码算法的用途题目&#xff1a;数星星&#xff08;POJ2352 star&#xff09;输入输出格式输入格式&#xff1a;输出格式 输入输出样例输入样例输出样例 题目讲解步骤如下AC 代码 插入…...

编程日记 2023/8/20 16:36:34

面试之快速学习STL-容器适配器

1. 容器适配器 简单的理解容器适配器&#xff0c;其就是将不适用的序列式容器&#xff08;包括 vector、deque 和 list&#xff09;变得适用。 注意&#xff1a;默认使用的基础容器不代表一定只能用它&#xff0c;比如queue可以用deque&#xff0c;list。 如果你希望你的qu…...

编程日记 2023/8/20 16:35:33

性能比较 - Spring Boot 应用程序中的线程池与虚拟线程 (Project Loom)

本文比较了 Spring Boot 应用程序中的不同请求处理方法&#xff1a;ThreadPool、WebFlux、协程和虚拟线程 (Project Loom)。 在本文中&#xff0c;我们将简要描述并粗略比较可在 Spring Boot 应用程序中使用的各种请求处理方法的性能。 高效的请求处理在开发高性能后端…...

编程日记 2023/8/20 16:34:32

rust学习-打印结构体中的vec

write! 宏 将格式化后的数据写入到一个缓冲区&#xff08;buffer&#xff09;&#xff0c;而不是直接打印到标准输出或文件中。 这个缓冲区可以是字符串&#xff0c;也可以是需要写入的文件的缓冲区。 write!(writer, format_string, expr1, expr2, ...);writer 参数是一个实…...

编程日记 2023/8/20 16:33:30

FPGA: RS译码仿真过程

FPGA: RS译码仿真过程 在上一篇中记录了在FPGA中利用RS编码IP核完成信道编码的仿真过程&#xff0c;这篇记录利用译码IP核进行RS解码的仿真过程&#xff0c;带有程序和结果。 1. 开始准备 在进行解码的过程时&#xff0c;同时利用上一篇中的MATLAB仿真程序和编码过程&#x…...

编程日记 2023/8/20 16:32:28

PostgreSQL 查询数据表、视图信息

--获得指定schema范围内的所有表和视图的列表&#xff0c;可指定一个排除表前缀模式with param as (select public,iit as schema_name,db2g% as exclude_pattern),base_info as (--获得所有基表select pg_namespace.nspname as schema_name, a.relname as tbl_name ,TBL as tb…...

编程日记 2023/8/20 16:31:26

手撕vector容器

一、vector容器的介绍 vector是表示可变大小数组的序列容器。就像数组一样&#xff0c;vector也采用的连续存储空间来存储元素&#xff0c;但是又不像数组&#xff0c;它的大小是可以动态改变的&#xff0c;而且它的大小会被容器自动处理。 总结&#xff1a;vector是一个动态…...

编程日记 2023/8/20 16:30:23

PyMuPDF`库实现PDF旋转功能

本文介绍了一个简单的Python应用程序&#xff0c;用于将PDF文件转换为旋转90度的PDF文件。主要用于csdn网站中导出的博客pdf是横向的&#xff0c;看起来不是很方便&#xff0c;才想到用python编制一个将pdf从横向转为纵向的功能。 功能 该PDF转换工具具有以下功能&#xff1a…...

编程日记 2023/8/20 16:29:21

微人事 登录问题完善

重启服务端的时候&#xff0c;发现前端页面会操作不了&#xff0c;这样后端session会失效&#xff0c;我们就需要让页面重新跳转到登录页 springsecurity配置类后端配置 前端拦截器进行拦截跳转...

编程日记 2023/8/20 16:28:19

【业务功能篇64】安装docker容器，在docker上安装mysql

docker教程&#xff1a; https://www.runoob.com/docker/docker-tutorial.html卸载docker 较旧的 Docker 版本称为 docker 或 docker-engine 。如果已安装这些程序&#xff0c;请卸载它们以及相关的依赖项。 yum remove docker docker-client docker-client-latest docker-co…...

编程日记 2023/8/20 16:27:17

MyBatis的基本概念和核心组件

MyBatis的基本概念 MyBatis 是一款优秀的持久层框架&#xff0c;它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息&#xff0c;将接口和 Java 的 POJOs(Pla…...

编程日记 2023/8/20 16:26:15

sql update执行返回0，能否判断数据不存在

答案&#xff1a;不能。 update执行返回0的情况 1、没有找到需要更新的数据&#xff0c;就是这条记录不存在 例如&#xff1a;where后面的条件是id0&#xff0c;那这条记录肯定是不存在的&#xff0c;返回结果是0 2、更新时的数据和要更新的数据完全一致时 例如&#xff1a;更…...

编程日记 2023/8/20 16:25:13

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

编程新知 2025/7/6 12:58:42

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具&#xff0c;该工具基于TUN接口实现其功能&#xff0c;利用反向TCP/TLS连接建立一条隐蔽的通信信道&#xff0c;支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式&#xff0c;适应复杂网…...

编程新知 2025/7/7 6:04:11

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2025/7/7 0:36:48

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

编程新知 2025/7/6 19:31:37

【Web 进阶篇】优雅的接口设计：统一响应、全局异常处理与参数校验

系列回顾&#xff1a; 在上一篇中&#xff0c;我们成功地为应用集成了数据库&#xff0c;并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了&#xff01;但是&#xff0c;如果你仔细审视那些 API&#xff0c;会发现它们还很“粗糙”&#xff1a;有…...

编程新知 2025/7/6 16:09:40

用docker来安装部署freeswitch记录

今天刚才测试一个callcenter的项目&#xff0c;所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...

编程新知 2025/7/6 22:52:33

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2025/7/3 12:34:43

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2025/7/5 11:09:18

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

编程新知 2025/7/6 10:44:30

Selenium常用函数介绍

目录 一&#xff0c;元素定位 1.1 cssSeector 1.2 xpath 二&#xff0c;操作测试对象 三&#xff0c;窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四&#xff0c;弹窗 五&#xff0c;等待 六&#xff0c;导航 七&#xff0c;文件上传 …...

编程新知 2025/7/6 20:15:13