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

前端笔记-day04

news 2025/10/23 5:23:23

文章目录

    • 01-后代选择器
    • 02-子代选择器
    • 03-并集选择器
    • 04-交集选择器
    • 05-伪类选择器
    • 06-拓展-超链接伪类
    • 07-CSS特性-继承性
    • 08-CSS特性-层叠性
    • 09-CSS特性-优先级
    • 11-Emmet写法
    • 12-背景图
    • 13-背景图平铺方式
    • 14-背景图位置
    • 15-背景图缩放
    • 16-背景图固定
    • 17-background属性
    • 18-显示模式
    • 19-显示模式转换
    • 20-综合案例-热词
    • 21-综合案例-banner效果

01-后代选择器

<!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里面的span标签包含的文字颜色 *//* 这叫做后代选择器 */div span{color: aqua;}</style>
</head>
<body><span>span 标签</span><div><span>这是div的儿子 span</span><p><span>这是孙子span</span></p></div>
</body>
</html>

02-子代选择器

<!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 > span{color: aquamarine;}</style>
</head>
<body><div><span>erzi</span><p><span>sunzi</span></p></div>
</body>
</html>

03-并集选择器

<!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,span{color: aqua;}</style>
</head>
<body><div>div</div><p>p</p><span>span</span>
</body>
</html>

04-交集选择器

<!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标签文字颜色是红色 *//* 选择器之前没有任何的符号 */p.box{color: red;}</style>
</head>
<body><p class="box">p标签，使用了类选择器</p><p>p标签</p><div class="box">div标签，使用了类选择器</div></body>
</html>

05-伪类选择器

<!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>/* 设置鼠标悬停样式 */a:hover{color: aqua;}.box:hover{color: blue;}</style>
</head>
<body><a href="#">a标签，超链接</a><div class="box">div标签</div>
</body>
</html>

06-拓展-超链接伪类

<!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>/* a:link{color: red;}a:visited{color: aqua;}a:hover{color: black;}a:active{color: blue;} */a{color: red;}a:hover{color: antiquewhite;}</style>
</head>
<body><a href="#">a标签测试伪类</a>
</body>
</html>

07-CSS特性-继承性

<!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>body{font-size: 30px;color: red;font-weight: 700;}</style>
</head>
<body><div>div</div><p>p</p><span>span</span><a href="#">a</a><h1>h1标签</h1>
</body>
</html>

08-CSS特性-层叠性

<!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{color: green;font-size: 30px;}div{color: red;font-size: 700;}</style>
</head><body><div>div标签</div>
</body>
</html>

09-CSS特性-优先级

<!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>/* 通配符选择器 */*{color: red;}/* 标签选择器 */div{color: green;}/* 类选择器 */.box{color: blue;}/* id选择器 */#text{color: orange;}/* 行内样式 *//*  ！important*/*{color: red!important}</style>
</head>
<body><!--  --><div class="box" id="text" style="color: purple;">div标签</div>
</body>
</html>

11-Emmet写法

Emmet 是一种简化 HTML 和 CSS 编写的工具，它通过简洁的语法提高了编码效率。

<!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{width: ;height: ;width: ;background-color: ;width: 500px;height: 200px;background-color: #fff;}</style>
</head>
<body><div class="box"></div><p class="boxx"></p><p id="id"></p><div><p></p></div><span></span><span></span><span></span><div>111</div>
</body>
</html>

12-背景图

<!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{width: 400px;height: 400px;background-image: url(./images/1111.jpg);}</style>
</head>
<body><div>divbiaoqian</div>
</body>
</html>

13-背景图平铺方式

<!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{width: 400px;height: 400px;background-color: pink;background-image: url(images/20.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */}</style>
</head>
<body><div>div标签</div>
</body>
</html>

14-背景图位置

<!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{width: 400px;height: 400px;background-color: pink;background-image: url(./images/20.jpg);background-repeat: no-repeat;/* 左上角 *//* background-position: 0 0; *//* background-position: left right; *//* background-position: right bottom; *//* 水平：正数向左负数向右 *//* background-position: 50px 0; *//* background-position: -50px 0; *//* 垂直：整数向下 负数向上 *//* background-position: 0 100px; *//* background-position: 0 -100px; *//* background-position: 50px center; *//* background-position: bottom left; *//* 关键字可以只写一个，另一个方向居中 */background-position: bottom;background-position: 50px ;} </style>
</head>
<body><div>divbiaoqian</div>
</body>
</html>

15-背景图缩放

<!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{width: 400px;height: 400px;background-color: pink;background-image: url(images/20.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; *//* background-size: contain; *//* cover完全覆盖 背景图可能显示不全 *//* background-size: cover; *//* 宽度保持一致 */background-size: 100%;}</style>
</head>
<body><div>div标签</div>
</body>
</html>

16-背景图固定

<!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>body{background-color: pink;background-image: url(images/1111.jpg);background-repeat: no-repeat;/* background-repeat: repeat; *//* background-repeat: repeat-x; *//* background-repeat: repeat-y; */background-position: center top;background-attachment: fixed;}</style>
</head>
<body><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p><p>vjdkfnvjf</p><p>fdkvkfk</p><p>dfv  vff</p><p>fkmkfvkfdvk</p>
</body>
</html>

17-background属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- background复合属性 --><style>div{width: 400px;height: 400px;/* 颜色 图片路径 平铺方式 背景图位置、背景图缩放*//* background: pink url(./images/20.jpg) no-repeat center bottom/cover; */background: pink url(./images/20.jpg) no-repeat center bottom/contain;}</style>
</head>
<body><div>div标签</div>
</body>
</html>

18-显示模式

<!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>/* 块级元素的特点是独占一行，宽度默认是父级的100% 加宽高生效 */div{width: 100px;height: 100px;}.div1{background-color: red;}.div2{background-color: aqua;}/* 行内元素加宽高不生效 */span{width: 100px;height: 100px;}.span1{background-color: pink;}.span2{background-color: blue;}/* 行内块：一行共存多个；默认尺寸由内容撑开 ；加宽高生效 */img{height: 100px;width: 100px;}</style>
</head>
<body><!-- 块级 --><div class="div1">div标签1</div><div class="div2">div标签2</div><!-- 行内 --><span class="span1">span1</span><span class="span2">span2</span><!-- 行内块 --><img src="./images/20.jpg" alt=""><img src="./images/20.jpg" alt="">
</body>
</html>

19-显示模式转换

<!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>/* 块级元素的特点是独占一行，宽度默认是父级的100% 加宽高生效 */div{width: 100px;height: 100px;/* display: inline-block; */display: inline;}.div1{background-color: red;}.div2{background-color: aqua;}/* 行内元素加宽高不生效 */span{width: 100px;height: 100px;/* display: block; */display: inline-block;}.span1{background-color: pink;}.span2{background-color: blue;}/* 行内块：一行共存多个；默认尺寸由内容撑开 ；加宽高生效 */img{height: 100px;width: 100px;display: block;}</style>
</head>
<body><!-- 块级 --><div class="div1">div标签1</div><div class="div2">div标签2</div><!-- 行内 --><span class="span1">span1</span><span class="span2">span2</span><!-- 行内块 --><img src="./images/20.jpg" alt=""><img src="./images/20.jpg" alt="">
</body>
</html>

20-综合案例-热词

<!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{background-color: #3064bb;width: 200px;height: 80px;text-align: center;}div>a{line-height: 80px;font-size: 18px;text-decoration: none;color: white;}div:hover{background-color: #608dd9;}</style>
</head>
<body><!-- 也可以不用在div里面嵌套a标签 直接把a标签通过display变为块级标签 --><div><a href="#">HTML</a></div><div><a href="#">CSS</a></div><div><a href="#">JavaScript</a></div><div><a href="#">Vue</a></div><div><a href="#">React</a></div>
</body>
</html>

在这里插入图片描述

21-综合案例-banner效果

<!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>.banner{height: 500px;background-color: #f3f3f4;background-image: url(./images/20.jpg);background-repeat: no-repeat;background-position: left bottom;/* text—align是对文字属性进行更改，文字属性具有继承性 */text-align: right;color: #333;}.p1{height: 100px;line-height: 100px;font-size: 35px;}.p2{font-size: 20px;}.banner a{background-color:#f06b1f;height: 40px;width: 125px;color: #fff;/* 转行内块无法右对齐，因为已经占了一整行了 */display: inline-block;text-align: center;line-height: 40px;font-size: 20px;}</style>
</head>
<body><div class="banner"><p class="p1">让创造产生价值</p><p class="p2">我们希望小游戏平台可以提供无线的可能，地处江南单纯的拿出你的觉得你节食减肥那段艰难决定</p><a>我要报名</a></div>
</body>
</html>

在这里插入图片描述

相关文章：

前端笔记-day04

文章目录 01-后代选择器02-子代选择器03-并集选择器04-交集选择器05-伪类选择器06-拓展-超链接伪类07-CSS特性-继承性08-CSS特性-层叠性09-CSS特性-优先级11-Emmet写法12-背景图13-背景图平铺方式14-背景图位置15-背景图缩放16-背景图固定17-background属性18-显示模式19-显示模…...

编程日记 2024/5/12 19:44:02

计算机字符集产生的历史与乱码

你好&#xff0c;我是 shengjk1&#xff0c;多年大厂经验&#xff0c;努力构建 通俗易懂的、好玩的编程语言教程。 欢迎关注&#xff01;你会有如下收益&#xff1a; 了解大厂经验拥有和大厂相匹配的技术等 希望看什么&#xff0c;评论或者私信告诉我&#xff01; 文章目录 一…...

编程日记 2024/5/12 19:43:00

Rerank进一步提升RAG效果

RAG & Rerank 目前大模型应用中&#xff0c;RAG&#xff08;Retrieval Augmented Generation&#xff0c;检索增强生成&#xff09;是一种在对话&#xff08;QA&#xff09;场景下最主要的应用形式&#xff0c;它主要解决大模型的知识存储和更新问题。 简述RAG without R…...

编程日记 2024/5/12 19:39:56

使用train.py----yolov7

准备工作 在训练之前&#xff0c;数据集的工作和配置环境的工作要做好 数据集&#xff1a;看这里划分数据集&#xff0c;训练自己的数据集。_划分数据集后如何训练-CSDN博客 划分数据集2&#xff0c;详细说明-CSDN博客 配置环境看这里 从0开始配置环境-yolov7_gpu0是inter g…...

编程日记 2024/5/12 19:37:54

机器学习第37周周报 GGNN

文章目录 week37 GGNN摘要Abstract一、文献阅读1. 题目2. abstract3. 网络架构3.1 数据处理部分3.2 门控图神经网络3.3 掩码操作 4. 文献解读4.1 Introduction4.2 创新点4.3 实验过程4.3.1 传感器设置策略4.3.2 数据集4.3.3 实验设置4.3.4 模型参数设置4.3.5 实验结果 5. 结论 …...

编程日记 2024/5/12 19:36:53

Baidu Comate：释放编码潜能，革新软件开发

Baidu Comate Baidu Comate&#xff0c;智能代码助手&#xff0c;凭借着文心大模型的强大支撑&#xff0c;结合了百度多年的编程实战数据和丰富的开源资源&#xff0c;形成了一款崭新的编码辅助利器。它不仅具备着高智能、多场景、价值创造的特质&#xff0c;更可广泛应用于各…...

编程日记 2024/5/12 19:35:51

MATLAB的Bar3函数调节渐变色(内附渐变色库.mat及.m文件免费下载链接)

一. colormap函数 可以使用colormap函数&#xff1a; t1[281.1,584.6, 884.3,1182.9,1485.2; 291.6,592.6,896,1197.75,1497.33; 293.8,596.4,898.6,1204.4,1506.4; 295.8,598,904.4,1209.0,1514.6];bar3(t1,1) set(gca,XTickLabel,{300,600,900,1200,1500},FontSize,10) set…...

编程日记 2024/5/12 19:34:50

使用 TensorFlow.js 和 OffscreenCanvas 实现实时防挡脸弹幕

首先&#xff0c;要理解我们的目标&#xff0c;我们将实时获取视频中的面部区域并将其周围的内容转为不透明以制造出弹幕的“遮挡效应”。 步骤一&#xff1a;环境准备 我们将使用 TensorFlow.js 的 Body-segmentation 库来完成面部识别部分&#xff0c;并使用 OffscreenCanv…...

编程日记 2024/5/12 19:33:49

【计算机网络篇】数据链路层（10）在物理层扩展以太网

文章目录 &#x1f354;扩展站点与集线器之间的距离&#x1f6f8;扩展共享式以太网的覆盖范围和站点数量 &#x1f354;扩展站点与集线器之间的距离 &#x1f6f8;扩展共享式以太网的覆盖范围和站点数量 以太网集线器一般具有8~32个接口&#xff0c;如果要连接的站点数量超过了…...

编程日记 2024/5/12 19:32:48

conan2 基础入门(03)-使用(msvc为例)

conan2 基础入门(03)-使用(msvc为例) 文章目录 conan2 基础入门(03)-使用(msvc为例)⭐准备生成profile文件预备文件和Code ⭐使用指令预览正确执行结果可能出现的问题 ⭐具体讲解conanconanfile.txt执行 install cmakeCMakeLists.txt生成项目构建 END ⭐准备 在阅读和学习本文…...

编程日记 2024/5/12 19:31:47

uniapp this 作用域保持的方法

在 UniApp&#xff08;或任何基于 Vue.js 的框架&#xff09;中&#xff0c;this 关键字通常用于引用当前 Vue 实例的上下文。然而&#xff0c;当你在回调函数、定时器、Promise、异步函数等中使用 this 时&#xff0c;你可能会发现 this 的值不再指向你期望的 Vue 实例&#x…...

编程日记 2024/5/12 19:29:44

vue2 与vue3的差异汇总

Vue 2 与 Vue 3 之间存在多方面的差异&#xff0c;这些差异主要体现在性能、API设计、数据绑定、组件结构、以及生命周期等方面。以下是一些关键差异的汇总&#xff1a; 数据绑定与响应式系统 Vue 2 使用 Object.defineProperty 来实现数据的响应式&#xff0c;这意味着只有预…...

编程日记 2024/5/12 19:28:43

Java反射（含静态代理模式、动态代理模式、类加载器以及JavaBean相关内容）

目录 1、什么是反射 2、Class类 3、通过Class类取得类信息/调用属性或方法 4、静态代理和动态代理 5.类加载器原理分析 6、JavaBean 1、什么是反射 Java反射机制的核心是在程序运行时动态加载类并获取类的详细信息&#xff0c;从而操作类或对象的属性和方法。本质是JVM得…...

编程日记 2024/5/12 19:25:40

Scoop国内安装、国内源配置

安装配置源可参考gitee上的大佬仓库&#xff0c;里面的步骤、代码都很详细&#xff0c;实测速度也很好 glsnames/scoop-installer 也可以结合其它bucket使用 使用Github加速网站&#xff0c;也可以换做其他代理方式&#xff0c;自行测试 例如&#xff1a;https://mirror.ghprox…...

编程日记 2024/5/12 19:24:38

【软件开发规范篇】JAVA后端开发编程规范

作者介绍&#xff1a;本人笔名姑苏老陈&#xff0c;从事JAVA开发工作十多年了&#xff0c;带过大学刚毕业的实习生&#xff0c;也带过技术团队。最近有个朋友的表弟&#xff0c;马上要大学毕业了&#xff0c;想从事JAVA开发工作&#xff0c;但不知道从何处入手。于是&#xff0…...

编程日记 2024/5/12 19:23:35

数据结构与算法学习笔记三---循环队列的表示和实现(C语言)

目录 前言 1.为啥要使用循环队列 2.队列的顺序表示和实现 1.定义 2.初始化 3.销毁 4.清空 5.空队列 6.队列长度 7.获取队头 8.入队 9.出队 10.遍历队列 11.完整代码 前言 本篇博客介绍栈和队列的表示和实现。 1.为啥要使用循环队列 上篇文章中我们知道了顺序队列…...

编程日记 2024/5/12 19:22:34

vue3中的reactive和ref

在Vue 3中&#xff0c;reactive和ref是两个常用的响应式API&#xff0c;用于创建响应式的数据。它们的主要区别在于reactive用于创建对象或数组的响应式引用&#xff0c;而ref用于创建单个值的响应式引用。下面我将分别介绍它们的详细用法&#xff0c;并提供代码示例。 1. rea…...

编程日记 2024/5/12 19:21:33

Centos安装 docker和docker-compose

安装docker yum install -y yum-utils yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo yum install docker-ce docker-ce-cli containerd.io sudo systemctl start docker sudo systemctl enable docker docker version 在L…...

编程日记 2024/5/12 19:20:31

VUE 或 Js封装通用闭包循环滚动函数

1、vue3 闭包滚动函数的使用 js 调用也基本雷同 // 滚动Tab组件const scoreTabRef ref()// 滚动的选项const scrollOption ref({// 滚动的Dom元素scrollDom: null,// 滚动的时间间隔scrollInterval: 1500,// 滚动的距离scrollSep: 100,// 滚动历时时间scrollDuration: 10…...

编程日记 2024/5/12 19:18:29

个人所得税计算器

个人所得税计算器 本文使用drools规则引擎根据预定义的规则计算个人所得税。我国个人所得税的纳税义务人是在中国境内居住有所得的人，以及不在中国境内居住而从中国境内取得所得的个人，包括中国国内公民，在华取得所得的外籍人员和港、澳、台同胞。个人所得税的计算公式如下…...

编程日记 2024/5/12 19:15:25

Cursor实现用excel数据填充word模版的方法

cursor主页&#xff1a;https://www.cursor.com/ 任务目标&#xff1a;把excel格式的数据里的单元格&#xff0c;按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例&#xff0c;…...

编程新知 2025/8/23 5:46:26

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

编程新知 2025/10/19 8:14:08

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/10/19 16:20:28

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

编程新知 2025/10/22 11:16:12

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2025/10/16 6:24:08

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...

编程新知 2025/10/6 4:05:22

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

编程新知 2025/10/15 0:25:46

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2025/10/21 17:26:12

4. TypeScript 类型推断与类型组合

一、类型推断 (一) 什么是类型推断 TypeScript 的类型推断会根据变量、函数返回值、对象和数组的赋值和使用方式&#xff0c;自动确定它们的类型。 这一特性减少了显式类型注解的需要&#xff0c;在保持类型安全的同时简化了代码。通过分析上下文和初始值&#xff0c;TypeSc…...

编程新知 2025/7/7 15:21:47