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

HTML番外篇(四)-HTML5新增元素-CSS常见函数-理解浏览器前缀-BFC

news 2025/12/15 18:29:29

一、HTML5新增元素

1.HTML5语义化元素

在HMTL5之前，我们的网站分布层级通常包括哪些部分呢？

  • header、nav、main、footer

◼ 但是这样做有一个弊端：

  • 我们往往过多的使用div, 通过id或class来区分元素；
  • 对于浏览器来说这些元素不够语义化；
  • 对于搜索引擎来说, 不利于SEO的优化；

◼ HTML5新增了语义化的元素：

  • <header>：头部元素
  • <nav>：导航元素
  • <section>：定义文档某个区域的元素
  • <article> ：内容元素
  • <aside>：侧边栏元素
  • <footer>：尾部元素

在这里插入图片描述

<!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>Document</title>
</head>
<body><!-- <div class="header"></div> --><header></header><!-- div.nav --><nav></nav><!-- section --><section><article>1</article><article>2</article><article>3</article></section><!-- aside --><aside></aside><!-- footer --><footer></footer></body>
</html>

二、video、audio元素

Web端事实上一直希望可以更好的嵌入音频和视频, 特别是21世纪以来, 用户带宽的不断提高, 浏览器因为和视频变得非常容易.

  • 在HTML5之前是通过flash或者其他插件实现的, 但是会有很多问题;

  • 比如无法很好的支持HTML/CSS特性, 兼容性问题等等;

HTML5增加了对媒体类型的支持：

  • 音频：<audio>

  • 视频：<video>

Video和Audio使用方式有两个：

  • 一方面我们可以直接通过元素使用video和autio；

  • 另一方面我们可以通过JavaScript的API对其进行控制；

1.HTML5新增元素 - video

HTML <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器，用于支持文档内的视频播放。

在这里插入图片描述

video常见的属性:

在这里插入图片描述

2.video支持的视频格式

每个视频都会有自己的格式, 浏览器的video并非支持所有的视频格式

在这里插入图片描述

3.video的兼容性写法

在<video>元素中间的内容，是针对浏览器不支持此元素时候的降级处理。

  • 内容一：通过<source>元素指定更多视频格式的源;

  • 内容二：通过p/div等元素指定在浏览器不支持video元素的情况, 显示的内容;

在这里插入图片描述

<!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>Document</title>
</head>
<body><!-- <img src="" alt=""> --><!-- 基本使用 --><!-- <video src="./assets/fcrs.mp4" width="600" controls muted></video> --><!-- 兼容性写法 --><video src="./assets/fcrs.mp4" width="600" controls muted><source src="./asset/fcrs.ogg"><source src="./asset/fcrs.webm"><p>当前您的浏览不支持视频的播放, 请更换更好用的浏览器!</p></video></body>
</html>

4.HTML5新增元素 - audio

HTML <audio> 元素用于在文档中嵌入音频内容, 和video的用法非常类似

常见属性:

在这里插入图片描述

5.audio支持的音频格式

每个音频都会有自己的格式, 浏览器的audio并非支持所有的视频格式

具体的支持的格式可以通过下面的链接查看:

  • https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs

在<audio>元素中间的内容，是针对浏览器不支持此元素时候的降级处理

在这里插入图片描述

三、input、全局data-*元素

1.input元素的扩展内容

◼ HTML5 对 input 元素也进行了扩展，在之前我们已经学习过的其中几个属性也是HTML5的特性：

  • placeholder：输入框的占位文字
  • multiple：多个值
  • autofocus：最多输入的内容

◼ 另外对于 input 的 type 值也有很多扩展：

  • date
  • time
  • number
  • tel
  • color
  • email
  • 等等…

◼ 查看MDN文档:

  • https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input

2.新增全局属性 data-*

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:

  • data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
  • 通常用于HTML和JavaScript数据之间的传递；

在小程序中, 就是通过data-来传递数据的, 所以该全局属性必须要掌握.

<!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>Document</title><style>.box {}</style>
</head>
<body><div class="box" age="18" data-name="why" data-age="18" data-height="1.88"></div><h1 class="title"></h1><script>const boxEl = document.querySelector(".box")console.log(boxEl.dataset)</script></body>
</html>

四、white-space、text-overflow

1.CSS属性 - white-space

white-space用于设置空白处理和换行规则

  • normal：合并所有连续的空白，允许单词超屏时自动换行

  • nowrap：合并所有连续的空白，不允许单词超屏时自动换行

  • pre：阻止合并所有连续的空白，不允许单词超屏时自动换行

  • pre-wrap：阻止合并所有连续的空白，允许单词超屏时自动换行

  • pre-line：合并所有连续的空白（但保留换行），允许单词超屏时自动换行

在这里插入图片描述

<!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>Document</title><style>.box {width: 200px;background: orange;/* white-space *//* nowrap不换行, 合并: 会合并 *//* pre: 不换行, 合并: 不合并 *//* pre-wrap: 换行, 合并: 不合并 *//* pre-line: 换行, 合并: 合并连续的空白, 但保留换行符 */white-space: pre-line;}</style>
</head>
<body><div class="box">我是box       kobe boxboxbox哈哈哈哈哈       呵呵呵呵和 my name is why</div></body>
</html>

2.CSS属性 - text-overflow

text-overflow 通常用来设置文字溢出时的行为

  • clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
  • ellipsis：溢出那行的结尾处用省略号表示

text-overflow 生效的前提是 overflow 不为 visible

常见的是将white-space、text-overflow、overflow一起使用：

<!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>Document</title><style>.box {width: 150px;background-color: #f00;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}</style>
</head>
<body><div class="box">my name is why, nickname is box, age is 18</div></body>
</html>

在这里插入图片描述

五、CSS 常见函数扩展

在前面我们有使用过很多个CSS函数:

  • 比如rgb/rgba/translate/rotate/scale等;
  • CSS函数通常可以帮助我们更加灵活的来编写样式的值；

下面我们再学习几个非常好用的CSS函数:

  • var: 使用CSS定义的变量;
  • calc: 计算CSS值, 通常用于计算元素的大小或位置;
  • blur: 毛玻璃(高斯模糊)效果;
  • gradient：颜色渐变函数；

1.CSS函数 - var

CSS中可以自定义属性

  • 属性名需要以两个减号（–）开始;
  • 属性值则可以是任何有效的CSS值;

在这里插入图片描述

我们可以通过var函数来使用:

在这里插入图片描述

规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效)

  • 所以推荐将自定义属性定义在html中，也可以使用 :root 选择器;

2.CSS函数 -calc

calc() 函数允许在声明 CSS 属性值时执行一些计算。

  • 计算支持加减乘除的运算；
    • + 和 -运算符的两边必须要有空白字符。
  • 通常用来设置一些元素的尺寸或者位置；

在这里插入图片描述

3.CSS函数 - blur

blur() 函数将高斯模糊应用于输出图片或者元素;

  • blur(radius)
  • radius, 模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊;

通常会和两个属性一起使用：

  • filter: 将模糊或颜色偏移等图形效果应用于元素;
  • backdrop-filter: 为元素后面的区域添加模糊或者其他效果;

在这里插入图片描述

4.linear-gradient的使用

linear-gradient：创建一个表示两种或多种颜色线性渐变的图片；

在这里插入图片描述

radial-gradient：创建了一个图像，径向渐变，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；

在这里插入图片描述

六、理解浏览器前缀

有时候可能会看到有些CSS属性名前面带有：-o-、-xv-、-ms-、mso-、-moz-、-webkit-

官方文档专业术语叫做：vendor-specific extensions（供应商特定扩展）

为什么需要浏览器前缀了？

  • CSS属性刚开始并没有成为标准，浏览器为了防止后续会修改名字给新的属性添加了浏览器前缀；

上述前缀叫做浏览器私有前缀，只有对应的浏览器才能解析使用

  • -o-、-xv-：Opera等
  • -ms-、mso-：IE等
  • -moz-：Firefox等
  • -webkit-：Safari、Chrome等

注意：不需要手动添加，后面学习了模块化打包工具会自动添加浏览器前缀

七、深入理解BFC

1.FC – Formatting Context

什么是FC呢？

  • FC的全称是Formatting Context，元素在标准流里面都是属于一个FC的；

在这里插入图片描述

块级元素的布局属于Block Formatting Context（BFC）

  • 也就是 block level box 都是在BFC中布局的；

行内级元素的布局属于Inline Formatting Context（IFC）

  • 而inline level box都是在IFC中布局的；

2.BFC – Block Formatting Context

block level box都是在BFC中布局的，那么这个BFC在哪里呢？拿出来给我看看。

在这里插入图片描述

MDN上有整理出在哪些具体的情况下会创建BFC：

  • 根元素（<html>）
  • 浮动元素（元素的 float 不是 none）
  • 绝对定位元素（元素的 position 为 absolute 或 fixed）
  • 行内块元素（元素的 display 为 inline-block）
  • 表格单元格（元素的 display 为 table-cell，HTML表格单元格默认为该值），表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
  • 匿名表格单元格元素（元素的 display 为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、 row、tbody、thead、tfoot 的默认属性）或 inline-table）
  • overflow 计算值(Computed)不为 visible 的块元素
  • 弹性元素（display 为 flex 或 inline-flex 元素的直接子元素）
  • 网格元素（display 为 grid 或 inline-grid 元素的直接子元素）
  • display 值为 flow-root 的元素

3.BFC有什么作用呢？

◼ 我们来看一下官方文档对BFC作用的描述：

在这里插入图片描述

简单概况如下：

  • 在BFC中，box会在垂直方向上一个挨着一个的排布；
  • 垂直方向的间距由margin属性决定；
  • 在同一个BFC中，相邻两个box之间的margin会折叠（collapse）；
  • 在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的；

那么这个东西有什么用呢？

  • 解决margin的折叠问题；
  • 解决浮动高度塌陷问题；

4.BFC的作用一：解决折叠问题（权威）

在同一个BFC中，相邻两个box之间的margin会折叠（collapse）

官方文档明确的有说

The vertical distance between two sibling boxes is determined by the ‘margin’ properties. Vertical margins between adjacent block-level boxes in a block formatting context collapse.

那么如果我们让两个box是不同的BFC呢？那么就可以解决折叠问题。

<!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>Document</title><style>/* .box {overflow: auto;} */.container {overflow: auto;}.box1 {height: 200px;width: 400px;background-color: orange;margin-bottom: 30px;}.box2 {height: 150px;background-color: purple;margin-top: 50px;}</style>
</head>
<body><div class="container"><div class="box1"></div></div><div class="box2"></div><p><a href=""></a><span></span></p></body>
</html>

5.BFC的作用二：解决浮动高度塌陷（权威）

网上有很多说法，BFC可以解决浮动高度塌陷，可以实现清除浮动的效果。

  • 但是从来没有给出过BFC可以解决高度塌陷的原理或者权威的文档说明；
  • 他们也压根没有办法解释，为什么可以解决浮动高度的塌陷问题，但是不能解决绝对定位元素的高度塌陷问题呢？

事实上，BFC解决高度塌陷需要满足两个条件：

  • 浮动元素的父元素触发BFC，形成独立的块级格式化上下文（Block Formatting Context）；
  • 浮动元素的父元素的高度是auto的；

BFC的高度是auto的情况下，是如下方法计算高度的

  1. 如果只有 inline-level，是行高的顶部和底部的距离；
  2. 如果有 block-level，是由最顶层的块上边缘和最底层块盒子的下边缘之间的距离
  3. 如果有绝对定位元素，将被忽略；
  4. 如果有浮动元素，那么会增加高度以包括这些浮动元素的下边缘
<!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>.container {overflow: auto;background-color: #ccc;}span {display: inline-block;width: 50px;height: 50px;background-color: #aaa;}.box1 {float: left;width: 200px;height: 200px;background-color: #666;}.box2 {float: left;width: 100px;height: 100px;background-color: #999;}</style>
</head>
<body><div class="container"><span>我是span内容</span><div class="box1"></div><div class="box2"></div></div>
</body>
</html>

在这里插入图片描述

相关文章：

HTML番外篇(四)-HTML5新增元素-CSS常见函数-理解浏览器前缀-BFC

一、HTML5新增元素 1.HTML5语义化元素 在HMTL5之前&#xff0c;我们的网站分布层级通常包括哪些部分呢&#xff1f; header、nav、main、footer ◼ 但是这样做有一个弊端&#xff1a; 我们往往过多的使用div, 通过id或class来区分元素&#xff1b;对于浏览器来说这些元素不…...

编程日记 2023/8/25 13:51:57

机器学习之Adam（Adaptive Moment Estimation）自适应学习率

Adam&#xff08;Adaptive Moment Estimation&#xff09;是一种常用的优化算法&#xff0c;特别适用于训练神经网络和深度学习模型。它是一种自适应学习率的优化算法&#xff0c;可以根据不同参数的梯度信息来动态调整学习率&#xff0c;以提高训练的效率和稳定性。 Adam算法…...

编程日记 2023/8/25 13:50:55

深入理解Linux权限管理：保护系统安全的重要措施

Linux操作系统以其稳定性、可靠性和灵活性而受到广泛使用。其中一个关键特性是其强大的权限管理系统&#xff0c;它可以保护系统资源和用户数据的安全性。本文将深入探讨Linux权限管理的概念、原则和实践&#xff0c;帮助您理解如何正确配置和管理权限&#xff0c;以确保系统的…...

编程日记 2023/8/25 13:49:54

kafka复习：（20）：消费者拦截器的使用

一、定义消费者拦截器&#xff08;只消费含"sister"的消息&#xff09; package com.cisdi.dsp.modules.metaAnalysis.rest;import org.apache.kafka.clients.consumer.ConsumerInterceptor; import org.apache.kafka.clients.consumer.ConsumerRecord; import org.…...

编程日记 2023/8/25 13:48:53

水库大坝安全监测的主要内容包括哪些？

在水库大坝的实时监测中&#xff0c;主要任务是通过无线传感网络监测各个监测点的水位、水压、渗流、流量、扬压力等数据&#xff0c;并在计算机上用数据模式或图形模式进行实时反映&#xff0c;以掌握整个水库大坝的各项变化情况。大坝安全监测系统能实现全天候远程自动监测&a…...

编程日记 2023/8/25 13:47:50

Cadence软件屏幕显示问题

问题 就是今天打开Cadence软件想导出网表看一下&#xff0c;发现没有显示确定按钮什么的&#xff0c;那个窗口也是无语&#xff0c;不能移动&#xff0c;缩放也只能左右缩放&#xff0c;还不能缩小什么的&#xff0c;真的醉了&#xff0c;后面就是调整窗口的分辨率。 因为我最…...

编程日记 2023/8/25 13:46:49

访问服务器快慢的因素

我们在租用服务器的过程中&#xff0c;可能在访问速度方面&#xff0c;会受到某些因素影响&#xff0c;如果您要进行此项业务&#xff0c;进行一些简单的了解 是非常的有必要的&#xff0c;下面壹基比小鑫带大家一起去做个具体的探讨吧。 对于服务器不太了解的都认为&#xff0…...

编程日记 2023/8/25 13:45:48

vue(element ui安装)

目录 一&#xff0c;element ui安装二&#xff0c;main.js三&#xff0c;使用element ui最后 一&#xff0c;element ui安装 先在盘服中找到你创建的node的位置 如有不懂根据可以看看上一章安装node 然后在终端找到 进入这个位置之后就可以安装了 输入npm i element-ui -S这个…...

编程日记 2023/8/25 13:44:47

基于FPGA视频接口之HDMI2.0编/解码

简介 为什么要特别说明HDMI的版本，是因为HDMI的版本众多，代表的HDMI速度同样不同，当前版本在HDMI2.1速度达到48Gbps，可以传输4K及以上图像，但我们当前还停留在1080P@60部分，且使用的芯片和硬件结构有很大差别，故将HDMI分为两个部分说明1080@60以下分辨率和4K以上分辨率（…...

编程日记 2023/8/25 13:43:46

Codeforces Round #894 (Div.3)

文章目录 前言A. Gift Carpet题目&#xff1a;输入&#xff1a;输出&#xff1a;思路&#xff1a;代码&#xff1a; B. Sequence Game题目&#xff1a;输入&#xff1a;输出&#xff1a;思路&#xff1a;代码&#xff1a; C. Flower City Fence题目&#xff1a;输入&#xff1a…...

编程日记 2023/8/25 13:42:44

MyBatid动态语句且模糊查询

目录 什么是MyBtais动态语句&#xff1f;&#xff1f;&#xff1f; MyBatis常用的动态标签和表达式 if标签 Choose标签 where标签 MyBatis模糊查询 #与$的区别 ​编辑 MyBatis映射 resultType resultMap 什么是MyBtais动态语句&#xff1f;&#xff1f;&#xff1f;…...

编程日记 2023/8/25 13:41:43

JVM——垃圾回收器G1+垃圾回收调优

4.4 G1&#xff08;一个垃圾回收器&#xff09; 定义: 取代了CMS垃圾回收器。和CMS一样时并发的。 适用场景: 物理上分区&#xff0c;逻辑上分代。 相关JVM参数: -XX:UseG1GC-XX:G1HeapRegionSizesize-XX:MaxGCPauseMillistime 1) G1 垃圾回收阶段 三个回收阶段&#xff0…...

编程日记 2023/8/25 13:40:42

【SA8295P 源码分析】23 - QNX Ethernet MAC 驱动 之 emac1_config.conf 配置文件解析

【SA8295P 源码分析】23 - QNX Ethernet MAC 驱动 之 emac1_config.conf 配置文件解析 系列文章汇总见：《【SA8295P 源码分析】00 - 系列文章链接汇总》 本文链接：《【SA8295P 源码分析】23 - QNX Ethernet MAC 驱动 之 emac1_config.conf 配置文件解析》 主要参数如下： hw_…...

编程日记 2023/8/25 13:39:41

iptables的使用规则

环境中为了安全要限制swagger的访问&#xff0c;最简单的方式是通过iptables防火墙设置规则限制。 在测试服务器中设置访问swagger-ui.html显示如下&#xff0c;区分大小写&#xff1a; iptables设置限制访问9783端口的swagger字段的请求&#xff1a; iptables -A INPUT -p t…...

编程日记 2023/8/25 13:38:40

JS 动画 vs CSS 动画：究竟有何不同？

在 Web 前端开发中&#xff0c;动画是提高用户体验的关键因素之一。我们通常可以使用 JavaScript&#xff08;JS&#xff09;和 CSS 来创建动画效果。但是&#xff0c;这两者之间有哪些区别呢&#xff1f;在本文中&#xff0c;我们将深入研究 JS 动画和 CSS 动画&#xff0c;探…...

编程日记 2023/8/25 13:37:38

供应链 | 大数据报童模型：基于机器学习的实践见解

论文解读&#xff1a;李欣 马玺渊 作者&#xff1a;Gah-Yi Ban, Cynthia Rudin 引用&#xff1a;Ban, Gah-Yi and Cynthia Rudin. The big data newsvendor: Practical insights from machine learning. Operations Research 67.1 (2019): 90-108. 文章链接&#xff1a;https…...

编程日记 2023/8/25 13:36:37

Java开发工作问题整理与记录

1、为什么Autowired不能注入static成员属性 扫描Class类需要注入的元数据的时候&#xff0c;直接选择忽略掉了static成员&#xff08;包括属性和方法&#xff09; Spring 依赖注入是依赖set方法, set方法是普通的对象方法,static变量是类的属性 AutowiredAnnotationBeanPostP…...

编程日记 2023/8/25 13:35:36

静态代码扫描持续构建（Jenkins）

前提条件 已正确安装、配置Jenkins环境&#xff0c;并装有 Gradle 插件、HTML 插件、SVN 插件等。如下图所示&#xff1a; 已正确安装、配置android sdk&#xff0c;在cmd窗口输入命令“android -h”,回车 配置步骤 打开Jenkins&#xff0c;新建一个job&#xff0c;输入项目…...

编程日记 2023/8/25 13:34:34

Git gui教程---汇总篇

想说的 汇总篇就是你应该已经学会基本操作了。剩下的代码上传云端之类的我懒得教了&#xff0c;反正你看命令版也差不多了&#xff0c;具体怎么操作就自己想吧。接下来的汇总篇&#xff0c;主要将每一个篇章对应的git命令写出来&#xff0c;一一对应&#xff0c;毕竟现在的编辑…...

编程日记 2023/8/25 13:33:33

flink sql checkpoint 调优配置

- execution.checkpointing.interval: 检查点之间的时间间隔&#xff08;以毫秒为单位&#xff09;。在此间隔内&#xff0c;系统将生成新的检查点 SET execution.checkpointing.interval 6000; - execution.checkpointing.tolerable-failed-checkpoints: 允许的连续失败检查…...

编程日记 2023/8/25 13:32:32

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明

LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造&#xff0c;完美适配AGV和无人叉车。同时&#xff0c;集成以太网与语音合成技术&#xff0c;为各类高级系统&#xff08;如MES、调度系统、库位管理、立库等&#xff09;提供高效便捷的语音交互体验。 L…...

编程新知 2025/12/14 10:36:13

基于FPGA的PID算法学习———实现PID比例控制算法

基于FPGA的PID算法学习 前言一、PID算法分析二、PID仿真分析1. PID代码2.PI代码3.P代码4.顶层5.测试文件6.仿真波形 总结 前言 学习内容&#xff1a;参考网站&#xff1a; PID算法控制 PID即&#xff1a;Proportional&#xff08;比例&#xff09;、Integral&#xff08;积分&…...

编程新知 2025/12/13 22:32:24

微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】

微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来&#xff0c;Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...

编程新知 2025/12/14 17:38:06

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/12/12 3:26:16

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

编程新知 2025/12/14 14:27:59

第25节 Node.js 断言测试

Node.js的assert模块主要用于编写程序的单元测试时使用&#xff0c;通过断言可以提早发现和排查出错误。 稳定性: 5 - 锁定 这个模块可用于应用的单元测试&#xff0c;通过 require(assert) 可以使用这个模块。 assert.fail(actual, expected, message, operator) 使用参数…...

编程新知 2025/10/11 0:24:31

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

编程新知 2025/12/13 22:42:30

Matlab | matlab常用命令总结

常用命令 一、 基础操作与环境二、 矩阵与数组操作（核心）三、 绘图与可视化四、 编程与控制流五、 符号计算 (Symbolic Math Toolbox)六、 文件与数据 I/O七、 常用函数类别重要提示这是一份 MATLAB 常用命令和功能的总结，涵盖了基础操作、矩阵运算、绘图、编程和文件处理等…...

编程新知 2025/8/11 1:05:59

SiFli 52把Imagie图片，Font字体资源放在指定位置，编译成指定img.bin和font.bin的问题

分区配置 (ptab.json) img 属性介绍&#xff1a; img 属性指定分区存放的 image 名称&#xff0c;指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件&#xff0c;则以 proj_name:binary_name 格式指定文件名&#xff0c; proj_name 为工程 名&…...

编程新知 2025/12/15 14:15:30

JVM虚拟机：内存结构、垃圾回收、性能优化

1、JVM虚拟机的简介 Java 虚拟机（Java Virtual Machine 简称：JVM）是运行所有 Java 程序的抽象计算机，是 Java 语言的运行环境，实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息，使得 Java 程序只需生成在 JVM 上运行的目标代码（字节码），就可以…...

编程新知 2025/12/15 2:10:04