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

HTML+CSS基础(了解水平)

html 的介绍

学习目标

  • 能够知道html的作用

1. html的定义

2. html的定义

HTML 的全称为:HyperText Mark-up Language, 指的是超文本标记语言。 标记:就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1></h1> 等,标签大多数都是成对出现的。

所谓超文本,有两层含义:

  1. 因为网页中还可以图片、视频、音频等内容(超越文本限制)

  2. 它还可以在网页中跳转到另一个网页,与世界各地主机的网页链接(超链接文本)

3. html的作用

html是用来开发网页的,它是开发网页的语言。

4. 小结

  • html是开发网页的语言

  • html中的标签大多数都是成对出现的, 格式: <标签名></标签名>

html 的基本结构

学习目标

  • 能够写出html的基本结构

1. 结构代码

<!DOCTYPE html>
<html><head>            <meta charset="UTF-8"><title>网页标题</title></head><body>网页显示内容</body>
</html>
  1. 第一行<!DOCTYPE html>是文档声明, 用来指定页面所使用的html的版本, 这里声明的是一个html5的文档。

  2. <html>...</html>标签是开发人员在告诉浏览器,整个网页是从<html>这里开始的,到</html>结束,也就是html文档的开始和结束标签。

  3. <head>...</head>标签用于定义文档的头部,是负责对网页进行设置标题、编码格式以及引入css和js文件的。

  4. <body>...</body>标签是编写网页上显示的内容。

2. 浏览网页文件

网页文件的后缀是.html或者.htm, 一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如果用浏览器打开,浏览器会按照标签描述内容将文件渲染成网页。

3. 小结

vscode 的基本使用

学习目标

  • 能够安装和卸载 vscode 的插件

  • 能够设置 vscode 的颜色主题和字体大小


1. vscode 的基本介绍

全拼是 Visual Studio Code (简称 VS Code) 是由微软研发的一款免费、开源的跨平台代码编辑器,目前是前端(网页)开发使用最多的一款软件开发工具。

2. vscode 的安装

  1. 下载网址: Download Visual Studio Code - Mac, Linux, Windows

  2. 选择对应的安装包进行下载:

  1. 根据下载的安装包双击进行安装即可,当然为了更好的使用 vscode 还可以安装对应的插件。

3. vscode 的插件安装

插件名说明
Chinese (Simplified) Language Pack for VS Code中文(简体)汉化包
open in browser右击在浏览器打开html

① 汉化插件安装

② open in browser插件安装

注意: 如果在vscode打开的html文档中右击没有出现 open in browser 类型的选项,需要把当前打开的文件关掉,重新打开这个文件就好了。

4. vscode 的插件卸载

点击对应安装的插件,然后再点击卸载按钮即可。

5. vscode 的使用

① 打开文件夹创建文件

② 快速创建html文档的基本结构

③ 右击在浏览器打开html文档

6. 设置字体大小

7. 设置颜色主题

8. 设置默认浏览器[可选]

可以根据自己的需要设置默认使用的浏览器

9. 小结

  • vscode 是由微软研发的一款免费、开源的跨平台代码编辑器

  • 通过资源管理器打开文件夹创建HTML文件,编写 HTML 代码

  • 可以根据需要安装对应的插件

  • 可以设置字体大小和颜色主题

初始常用的 html 标签

学习目标

  • 能够知道单标签和双标签的区别


1. 常用的 html 标签

<!-- 1、成对出现的标签:-->
​
<h1>h1标题</h1>
<div>这是一个div标签</div>
<p>这个一个段落标签</p>
​
​
<!-- 2、单个出现的标签: -->
<br>
<img src="images/pic.jpg" alt="图片">
<hr>
​
<!-- 3、带属性的标签,如src、alt 和 href等都是属性 -->
<img src="images/pic.jpg" alt="图片">
<a href="http://www.baidu.com">百度网</a>
​
<!-- 4、标签的嵌套 -->
<div><img src="images/pic.jpg" alt="图片"><a href="http://www.baidu.com">百度网</a>
</div>

提示:

  1. 标签不区分大小写,但是推荐使用小写。

  2. 根据标签的书写形式,标签分为双标签(闭合标签)和单标签(空标签) 2.1 双标签是指由开始标签和结束标签组成的一对标签,这种标签允许嵌套和承载内容,比如: div标签 2.2 单标签是一个标签组成,没有标签内容, 比如: img标签

2. 小结

  • 学习 html 语言就是学习标签的用法,常用的标签有20多个。

  • 编写 html 标签建议使用小写

  • 根据书写形式,html 标签分为双标签和单标签

  • 单标签没有标签内容,双标签可以嵌套其它标签和承载文本内容

资源路径

学习目标

  • 能够知道相对路径和绝对路径的区别


当我们使用img标签显示图片的时候,需要指定图片的资源路径,比如:

<img src="images/logo.png">

这里的src属性就是设置图片的资源路径的,资源路径可以分为相对路径和绝对路径

1. 相对路径

从当前操作 html 的文档所在目录算起的路径叫做相对路径

示例代码:

<!-- 相对路径方式1 -->
<img src="./images/logo.png">
<!-- 相对路径方式2 -->
<img src="images/logo.png">

同级关系:直接引用文件名称

Linux => ./images/

Windows => images/

上一级关系:../

下一级关系:文件夹名称/

2. 绝对路径

从根目录算起的路径叫做绝对路径,Windows 的根目录是指定的盘符,mac OS 和Linux 是/

示例代码:

<!-- 绝对路径 -->
<img src="/Users/apple/Desktop/demo/hello/images/logo.png">
<img src="C:\demo\images\001.jpg">

提示:

一般都会使用相对路径,绝对路径的操作在其它电脑上打开会有可能出现资源文件找不到的问题

3. 小结

  • 相对路径和绝对路径是 html 标签使用资源文件的两种方式,一般使用相对路径。

  • 相对路径是从当前操作的 html 文档所在目录算起的路径

  • 绝对 路径是从根目录算起的路径

列表标签

学习目标

  • 能够知道列表标签的种类


1. 列表标签的种类

  • 无序列表标签(ul标签)

  • 有序列表标签(ol标签)

2. 无序列表

<!-- ul标签定义无序列表 -->
<ul><!-- li标签定义列表项目 --><li>列表标题一</li><li>列表标题二</li><li>列表标题三</li>
</ul>

3. 有序列表

<!-- ol标签定义有序列表 -->
<ol><!-- li标签定义列表项目 --><li><a href="#">列表标题一</a></li><li><a href="#">列表标题二</a></li><li><a href="#">列表标题三</a></li>
</ol>

4. 小结

  • 列表标签有无序列表标签(ul标签)和有序列表标签(ol标签)

  • 列表项目对顺序有要求的时候使用ol标签

  • 列表项目对顺序无要求的时候使用ul标签

表格标签

学习目标

  • 能够知道表格的边线合并


1. 表格的结构

表格是由行和列组成,好比一个excel文件

2. 表格标签

  • ​标签:表示一个表格

示例代码:

<table><tr><th>姓名</th><th>年龄</th></tr><tr><td>张三</td><td>18</td> </tr>
</table>

表格边线合并:

border-collapse 设置表格的边线合并,如:border-collapse:collapse;

表单标签

学习目标

  • 能够知道表单中常用的表单元素标签


1. 表单的介绍

表单用于搜集不同类型的用户输入(用户输入的数据),然后可以把用户数据提交到web服务器 。

2. 表单相关标签的使用

  1. <form>标签 表示表单标签,定义整体的表单区域

  2. <label>标签 表示表单元素的文字标注标签,定义文字标注

  3. <input>标签 表示表单元素的用户输入标签,定义不同类型的用户输入数据方式

    • type属性

      • type="text" 定义单行文本输入框

      • type="password" 定义密码输入框

      • type="radio" 定义单选框

      • type="checkbox" 定义复选框

      • type="file" 定义上传文件

      • type="submit" 定义提交按钮

      • type="reset" 定义重置按钮

      • type="button" 定义一个普通按钮

  4. <textarea>标签 表示表单元素的多行文本输入框标签 定义多行文本输入框

  5. <select>标签 表示表单元素的下拉列表标签 定义下拉列表

    • <option>标签 与<select>标签配合,定义下拉列表中的选项

示例代码:

<form><p><label>姓名:</label><input type="text"></p><p><label>密码:</label><input type="password"></p><p><label>性别:</label><input type="radio"> 男<input type="radio"> 女</p><p><label>爱好:</label><input type="checkbox"> 唱歌<input type="checkbox"> 跑步<input type="checkbox"> 游泳</p><p><label>照片:</label><input type="file"></p><p><label>个人描述:</label><textarea></textarea></p><p><label>籍贯:</label><select><option>北京</option><option>上海</option><option>广州</option><option>深圳</option></select></p><p><input type="submit" value="提交"><input type="reset" value="重置"></p>
</form>

3. 小结

  • 表单标签是<form>标签

  • 常用的表单元素标签有: <label><input><textarea><select> 等标签

表单提交

学习目标

  • 能够知道表单的提交方式

  • 能够知道表单中action属性的作用


1. 表单属性设置

<form>标签 表示表单标签,定义整体的表单区域

  • action属性 设置表单数据提交地址

  • method属性 设置表单提交的方式,一般有“GET”方式和“POST”方式, 不区分大小写

2. 表单元素属性设置

  • name属性 设置表单元素的名称,该名称是提交数据时的参数名

  • value属性 设置表单元素的值,该值是提交数据时参数名所对应的值

3. 示例代码

<form action="https://www.baidu.com" method="GET"><p><label>姓名:</label><input type="text" name="username" value="11" /></p><p><label>密码:</label><input type="password" name="password" /></p><p><label>性别:</label><input type="radio" name="gender" value="0" /> 男<input type="radio" name="gender" value="1" /> 女</p><p><label>爱好:</label><input type="checkbox" name="like" value="sing" /> 唱歌<input type="checkbox" name="like" value="run" /> 跑步<input type="checkbox" name="like" value="swiming" /> 游泳</p><p><label>照片:</label><input type="file" name="person_pic"></p><p><label>个人描述:</label><textarea name="about"></textarea></p><p><label>籍贯:</label><select name="site"><option value="0">北京</option><option value="1">上海</option><option value="2">广州</option><option value="3">深圳</option></select></p><p><input type="submit" name="" value="提交"><input type="reset" name="" value="重置"></p>
</form>

小结

  • 表单标签的作用就是可以把用户输入数据一起提交到web服务器。

  • 表单属性设置

    • action: 是设置表单数据提交地址

    • method: 是表单提交方式,提交方式有GET和POST

  • 表单元素属性设置

    • name: 表单元素的名称,用于作为提交表单数据时的参数名

    • value: 表单元素的值,用于作为提交表单数据时参数名所对应的值

css 的介绍

学习目标

  • 能够知道css的作用


1. css 的定义

css(Cascading Style Sheet)层叠样式表,它是用来美化页面的一种语言。

没有使用css的效果图

使用css的效果图

2. css 的作用

  1. 美化界面, 比如: 设置标签文字大小、颜色、字体加粗等样式。

  2. 控制页面布局, 比如: 设置浮动、定位等样式。

3. css 的基本语法

选择器{

样式规则

}

样式规则:

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

...

选择器:是用来选择标签的,选出来以后给标签加样式。

代码示例:

div{ width:100px; height:100px; background:gold; 
}

说明

css 是由两个主要的部分构成:选择器和一条或多条样式规则,注意:样式规则需要放到大括号里面。

4. 小结

  • css 是层叠样式表,它是用来美化网页和控制页面布局的。

  • 定义 css 的语法格式是: 选择器{样式规则}

css 的引入方式

学习目标

  • 能够知道 css 的引入三种方式


css的三种引入方式

  1. 行内式

  2. 内嵌式(内部样式)

  3. 外链式

1. 行内式

直接在标签的 style 属性中添加 css 样式

示例代码:

<div style="width:100px; height:100px; background:red ">hello</div>

优点:方便、直观。 缺点:缺乏可重用性。

2. 内嵌式(内部样式)

<head>标签内加入<style>标签,在<style>标签中编写css代码。

示例代码:

<head><style type="text/css">h3{color:red;}</style>
</head>

优点:在同一个页面内部便于复用和维护。 缺点:在多个页面之间的可重用性不够高。

3. 外链式

将css代码写在一个单独的.css文件中,在<head>标签中使用<link>标签直接引入该文件到页面中。

示例代码:

<link rel="stylesheet" type="text/css" href="css/main.css">

优点:使得css样式与html页面分离,便于整个页面系统的规划和维护,可重用性高。 缺点:css代码由于分离到单独的css文件,容易出现css代码过于集中,若维护不当则极容易造成混乱。

4. css引入方式选择

  1. 行内式几乎不用

  2. 内嵌式在学习css样式的阶段使用

  3. 外链式在公司开发的阶段使用,可以对 css 样式和 html 页面分别进行开发。

5. 小结

  • css 的引入有三种方式, 分别是行内式、内嵌式、外链式。

  • 外链式是在公司开发的时候会使用,最能体现 div+css 的标签内容与显示样式分离的思想, 也最易改版维护,代码看起来也是最美观的一种。

css 选择器

学习目标

  • 能够说出 css 选择器的种类


1. css 选择器的定义

css 选择器是用来选择标签的,选出来以后给标签加样式。

2. css 选择器的种类

  1. 标签选择器

  2. 类选择器

  3. 层级选择器(后代选择器)

  4. id选择器

  5. 组选择器

  6. 伪类选择器

3. 标签选择器

根据标签来选择标签,以标签开头,此种选择器影响范围大,一般用来做一些通用设置。

示例代码

<style type="text/css">p{color: red;}
</style>
​
<div>hello</div>
<p>hello</p>

4. 类选择器

根据类名来选择标签,以 . 开头, 一个类选择器可应用于多个标签上,一个标签上也可以使用多个类选择器,多个类选择器需要使用空格分割,应用灵活,可复用,是css中应用最多的一种选择器。

示例代码

<style type="text/css">.blue{color:blue}.big{font-size:20px}.box{width:100px;height:100px;background:gold} 
</style>
​
<div class="blue">这是一个div</div>
<h3 class="blue big box">这是一个标题</h3>
<p class="blue box">这是一个段落</p>

5. 层级选择器(后代选择器)

根据层级关系选择后代标签,以选择器1 选择器2开头,主要应用在标签嵌套的结构中,减少命名。

示例代码

<style type="text/css">div p{color: red;}.con{width:300px;height:80px;background:green}.con span{color:red}.con .pink{color:pink}.con .gold{color:gold}    
</style>
​
<div><p>hello</p>
</div>
​
<div class="con"><span>哈哈</span><a href="#" class="pink">百度</a><a href="#" class="gold">谷歌</a>
</div>
<span>你好</span>
<a href="#" class="pink">新浪</a>

注意点: 这个层级关系不一定是父子关系,也有可能是祖孙关系,只要有后代关系都适用于这个层级选择器

6. id选择器

根据id选择标签,以#开头, 元素的id名称不能重复,所以id选择器只能对应于页面上一个元素,不能复用,id名一般给程序使用,所以不推荐使用id作为选择器。

示例代码

<style type="text/css">#box{color:red} 
</style>
​
<p id="box">这是一个段落标签</p>   <!-- 对应以上一条样式,其它元素不允许应用此样式 -->
<p>这是第二个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名 -->
<p>这是第三个段落标签</p> <!-- 无法应用以上样式,每个标签只能有唯一的id名  -->

注意点: 虽然给其它标签设置id=“box”也可以设置样式,但是不推荐这样做,因为id是唯一的,以后js通过id只能获取一个唯一的标签对象。

7. 组选择器

根据组合的选择器选择不同的标签,以 , 分割开, 如果有公共的样式设置,可以使用组选择器。

示例代码

<style type="text/css">.box1,.box2,.box3{width:100px;height:100px}.box1{background:red}.box2{background:pink}.box2{background:gold}
</style>
​
<div class="box1">这是第一个div</div>
<div class="box2">这是第二个div</div>
<div class="box3">这是第三个div</div>

8. 伪类选择器

用于向选择器添加特殊的效果, 以 : 分割开, 当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

<style type="text/css">.box1{width:100px;height:100px;background:gold;}.box1:hover{width:300px;}
</style>
​
<div class="box1">这是第一个div</div>

9. 小结

  • css 选择器就是用来选择标签设置样式的

  • 常用的 css 选择器有六种,分别是:

    1. 标签选择器

    2. 类选择器

    3. 层级选择器(后代选择器)

    4. id选择器

    5. 组选择器

    6. 伪类选择器

css 属性

学习目标

  • 能够知道常用的样式属性


我们知道 css 作用是美化 HTML 网页和控制页面布局的,接下来我们来学习一下经常使用一些样式属性。

1. 布局常用样式属性

  • width 设置元素(标签)的宽度,如:width:100px;

  • height 设置元素(标签)的高度,如:height:200px;

  • background 设置元素背景色或者背景图片,如:background:gold; 设置元素的背景色, background: url(images/logo.png); 设置元素的背景图片。

  • border 设置元素四周的边框,如:border:1px solid black; 设置元素四周边框是1像素宽的黑色实线

  • 以上也可以拆分成四个边的写法,分别设置四个边的:

  • border-top 设置顶边边框,如:border-top:10px solid red;

  • border-left 设置左边边框,如:border-left:10px solid blue;

  • border-right 设置右边边框,如:border-right:10px solid green;

  • border-bottom 设置底边边框,如:border-bottom:10px solid pink;

2. 文本常用样式属性

  • color 设置文字的颜色,如: color:red;

  • font-size 设置文字的大小,如:font-size:12px;

  • font-family 设置文字的字体,如:font-family:'微软雅黑';为了避免中文字不兼容,一般写成:font-family:'Microsoft Yahei';

  • font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗

  • line-height 设置文字的行高,如:line-height:24px; 表示文字高度加上文字上下的间距是24px,也就是每一行占有的高度是24px

  • text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉

  • text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中(left/center/right)

  • text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px

3. 布局常用样式属性示例代码

<style>
​.box1{width: 200px; height: 200px; background:yellow; border: 1px solid black;}
​.box2{/* 这里是注释内容 *//* 设置宽度 */width: 100px;/* 设置高度 */height: 100px;/* 设置背景色 */background: red;/* 设置四边边框 *//* border: 10px solid black; */border-top: 10px solid black;border-left: 10px solid black;border-right: 10px solid black;border-bottom: 10px solid black;/* 设置内边距, 内容到边框的距离,如果设置四边是上右下左 *//* padding: 10px;   */padding-left: 10px;padding-top: 10px;/* 设置外边距,设置元素边框到外界元素边框的距离 */margin: 10px;/* margin-top: 10px;margin-left: 10px; */float: left;}
​.box3{width: 48px; height: 48px; background:pink; border: 1px solid black;float: left;}
​
</style>
​
<div class="box1"><div class="box2">padding 设置元素包含的内容和元素边框的距离</div><div class="box3"></div>
</div>

4. 文本常用样式属性示例

<style>p{/* 设置字体大小  浏览器默认是 16px */font-size:20px;/* 设置字体 */font-family: "Microsoft YaHei"; /* 设置字体加粗 */font-weight: bold;/* 设置字体颜色 */color: red;/* 增加掉下划线 */text-decoration: underline;/* 设置行高  */line-height: 100px;/* 设置背景色 */background: green;/* 设置文字居中 *//* text-align: center; */text-indent: 40px;}
​a{/* 去掉下划线 */text-decoration: none;}
</style>
​
<a href="#">连接标签</a>
<p>你好,世界!
</p>

5. 小结

  • 设置不同的样式属性会呈现不同网页的显示效果

  • 样式属性的表现形式是: 属性名:属性值;

相关文章:

HTML+CSS基础(了解水平)

html 的介绍 学习目标 能够知道html的作用 1. html的定义 2. html的定义 HTML 的全称为&#xff1a;HyperText Mark-up Language, 指的是超文本标记语言。 标记&#xff1a;就是标签, <标签名称> </标签名称>, 比如: <html></html>、<h1><…...

提示词工程(Prompt Engineering)

https://www.bilibili.com/video/BV1PX9iYQEry 一、懂原理&#xff0c;要知道 为什么有的指令有效&#xff0c;有的指令无效为什么同样的指令有时有效&#xff0c;又是无效怎么提升指令有效的概率 大模型应用架构师想什么&#xff1f; 怎样能更准确&#xff1f;答&#xff1…...

MySQL中的B+树索引经验总结

一、什么是B树 B树是一种二叉树&#xff0c;由二叉查找树&#xff0c;平衡二叉树&#xff0c;B树演化而来。 请看上图 B树的特点&#xff1a; 1&#xff09;非叶子节点不存放数据&#xff0c;只存放键值&#xff0c;数据都存放在叶子节点中。 2&#xff09;叶子节点都在同一…...

社交网络分析实战(NetworkX分析Twitter关系图)

目录 社交网络分析实战(NetworkX分析Twitter关系图)1. 引言2. 项目背景与意义3. 数据集生成与介绍3.1 数据集构成3.2 数据生成方法3.3 数据集示例4. 社交网络分析理论4.1 节点度数与度分布4.2 网络密度4.3 中心性指标5. GPU加速在社交网络分析中的应用6. PyQt GUI与交互式可视…...

Windows功能之FTP服务器搭建

一、创作背景 之前有用linux系统搭建过ftp服务器&#xff0c;最近想着用windows系统也顺便搭建一个&#xff0c;看网上有第三方服务软件一键部署&#xff0c;记得windows可以不借助第三方软件就可以搭建&#xff0c;就想顺便操作试试&#xff0c;结果老是连接不上&#xff0c;费…...

linux系统命令——权限

一、有哪些权限 读&#xff08;r&#xff09;——对应数字4 写&#xff08;w&#xff09;——对应数字2 执行&#xff08;x&#xff09;——对应数字1 二、权限及数字的对应 4对应r-- 2对应-w- 1对应--x 5对应r-x 6对应rw- 7对应rwx 三、文件的基本属性 如图&#…...

DeepSeek本地部署 (Windows+Ollama+Docker Desktop+ RAGFlow)

适用场景&#xff1a; 1、商城的小机器人自动根据实际情况回复 2、需要7*24小时运行在线回复&#xff0c;如&#xff1a;在线购物、在线咨询、在线招生等 3、无人值守环境 2025年1月&#xff0c;DeepSeek 正式发布 DeepSeek-R1 推理大模型&#xff0c;DeepSeek-R1 成本价格低…...

H3C无线控制器二层注册典型配置举例

介绍AP与AC间通过二层网络完成注册的配置举例 组网需求 如图所示&#xff0c;集中式转发架构下&#xff0c;AC旁挂在L2 switch1上&#xff0c;L3 switch做DHCP server为AP、Client和Host分配IP地址。需要实现无线客户端Client通过AP连接到AC上&#xff0c;并能与有线客户端Hos…...

前端面试笔试

前端面试笔试 1 相对路径和绝对路径的区别 区别&#xff1a;他们描述文件或目录位置的方式不同 ‌绝对路径‌&#xff1a;绝对路径是指从系统的根目录开始的完整路径&#xff0c;无论当前工作目录在哪个位置&#xff0c;绝对路径始终指向文件或目录的确切位置。绝对路径适用…...

java的split分隔,使用regex

split(String regex) 是 Java 中 String 类的一个方法&#xff0c;用于根据正则表达式&#xff08;regex&#xff09;将字符串分割为子字符串数组。以下是一些常用的正则表达式及其用途&#xff1a; 按空格分割 正则表达式&#xff1a;“\s” 作用&#xff1a;匹配一个或多个…...

写时拷贝技术

目录 写时拷贝 核心思想 基本原理 基本过程 一个例子深入理解 补充知识--引用计数 小总结 写时拷贝实现 宏观理解&#xff08;进程、线程角度&#xff09; 资源共享 只读访问 写操作触发拷贝 独立修改 微观理解&#xff08;fork系统调用角度&#xff09; 进程创…...

HarmonyOS NEXT开发进阶(十二):build-profile.json5 文件解析

文章目录 一、前言二、Hvigor脚本文件三、任务与任务依赖图四、多模块管理4.1 静态配置模块 五、分模块编译六、配置多目标产物七、配置APP多目标构建产物八、定义 product 中包含的 target九、拓展阅读 一、前言 编译构建工具DevEco Hvigor&#xff08;以下简称Hvigor&#x…...

ubuntu系统下添加pycharm到快捷启动栏方法

一、背景 之前在ubuntu系统下使用pycharm时&#xff0c;总是要进入/home/dlut/pycharm-community-2022.1/bin文件夹下&#xff0c;然后终端执行命令下面的命令才可修改代码&#xff1a; ./pycharm.sh为了以后方便&#xff0c;这里给出添加pycharm到快捷启动栏的方法 二、添加…...

简述计算机网络中的七层模型和四层模型

在计算机网络中&#xff0c;网络协议栈的设计通常采用分层结构来处理不同的通信任务。常见的分层结构有OSI七层模型和TCP/IP四层模型。虽然它们的层次数量不同&#xff0c;但本质上都在解决如何有效地进行计算机间通信。本文将分别介绍这两种结构的功能和各层的协议。 一、OSI七…...

golang开发支持onlyoffice的token功能

一直都没去弄token这块&#xff0c;想着反正docker run的时候将jwt置为false即可。 看了好多文章&#xff0c;感觉可以试试&#xff0c;但是所有文件几乎都没说思路。 根据我的理解和成功的调试&#xff0c;思路是&#xff1a; 我们先定义2个概念&#xff0c;一个是文档下载…...

【Linux】:封装线程

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家带来封装线程相关的知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精通 数据结…...

OpenCV多分辨率模板匹配与容错优化实战指南

第一章&#xff1a;问题背景与挑战 1.1 传统模板匹配的局限性 模板匹配&#xff08;Template Matching&#xff09;是计算机视觉中基础且广泛使用的技术&#xff0c;其核心思想是通过滑动窗口在目标图像中寻找与模板最相似的位置。然而&#xff0c;传统方法&#xff08;如Ope…...

「为爱发电」的硬核打开方式,涂鸦智能用AIoT引领智慧能源变革

全球能源危机与气候变化的双重压力下&#xff0c;人类正面临着一场前所未有的考验。据国际能源署预测&#xff0c;到2050年&#xff0c;若要实现碳中和目标&#xff0c;清洁能源需贡献全球电力结构的90%以上。在这场关乎人类未来的能源革命中&#xff0c;不仅需要技术创新&…...

uniapp-x 子组件样式覆盖

不支持scoped 默认不支持scoped&#xff0c;所以写也没用 那如果我想修改子孙节点的样式是不是很方便&#xff0c;不需要v-deep了&#xff1f; 的确如此 自带页面样式隔离 在 uni-app x 中&#xff0c;不支持 css scoped&#xff0c;样式的作用范围遵循以下规则&#xff1a;…...

word处理控件Aspose.Words教程:使用 Python 删除 Word 中的空白页

Aspose.Words 是一种高级Word文档处理API&#xff0c;用于执行各种文档管理和操作任务。API支持生成&#xff0c;修改&#xff0c;转换&#xff0c;呈现和打印文档&#xff0c;而无需在跨平台应用程序中直接使用Microsoft Word。 Aspose API支持流行文件格式处理&#xff0c;并…...

MIDI,AI 3D场景生成技术

MIDI&#xff08;Multi-Instance Diffusion for Single Image to 3D Scene Generation&#xff09;是先进的3D场景生成技术&#xff0c;能在短时间内将单张图像转化为高保真度的3D场景。通过智能分割输入图像&#xff0c;识别出场景中的独立元素&#xff0c;再基于多实例扩散模…...

ICLR2025 | SLMRec: 重新思考大语言模型在推荐系统中的价值

note 问题背景&#xff1a;序列推荐&#xff08;SR&#xff09;任务旨在预测用户可能的下一个交互项目。近年来&#xff0c;大型语言模型&#xff08;LLMs&#xff09;在SR系统中表现出色&#xff0c;但它们巨大的规模使得在实际平台中应用变得低效和不切实际。 研究动机&…...

走路碎步营养补充贴士

走路碎步&#xff0c;这种步伐不稳的现象&#xff0c;在日常生活中并不罕见&#xff0c;特别是对于一些老年人或身体较为虚弱的人来说&#xff0c;更是一种常见的行走状态。然而&#xff0c;这种现象可能不仅仅是肌肉或骨骼的问题&#xff0c;它还可能是身体在向我们发出营养缺…...

【bug日记】 编译错误

在我使用vscode的时候&#xff0c;我想用一个头文件和两个cpp文件&#xff0c;头文件是用来声明一个类的&#xff0c;一个cpp是用来类的成员函数&#xff0c;一个cpp是主函数 但是我写完编译发现会弹出找不到这个类成员函数这个cpp文件&#xff0c;爆出这样的错误 提示我找不到…...

计算机视觉cv2入门之边缘检测

检测原理 边缘检测是指检测图像中的一些像素点&#xff0c;它们周围的像素点的灰度发生了急剧的变化&#xff0c;因此可以将这些像素点作为一个集合,用于标注图像中不同物体的边界。 边缘是图像上灰度级变化很快的点的集合。这些点的梯度往往很大。因此我们可以使用一阶导数和二…...

python脚本实现服务器内存和cpu使用监控,并记录日志,可以设置阈值和采样频率

Python 脚本&#xff0c;实现以下功能&#xff1a; 按日期自动生成日志文件&#xff08;例如 cpu_mem_20231001.csv&#xff09;当 CPU 或内存超过阈值时触发记录独立记录报警事件&#xff08;保存到 alert.log&#xff09;支持自定义阈值和监控间隔 脚本代码 import psutil …...

解决PC串流至IPad Pro时由于分辨率不一致导致的黑边问题和鼠标滚轮反转问题

问题背景 今天在做 电脑串流ipad pro 的时候发现了2个问题&#xff1a; 1.ipadpro 接上鼠标后&#xff0c;滚轮上下反转&#xff0c;这个是苹果自己的模拟造成的问题&#xff0c;在设置里选择“触控板与鼠标”。 关闭“自然滚动”,就可以让鼠标滚轮正向滚动。 2. ipadpro 分…...

星越L_三角指示牌及危险警示灯使用

目录 1.打开危险警告灯 2.取出反光背心穿上 3.取出指示牌 4.放置三角指示牌。 1.打开危险警示灯 2.取出反光背心穿上 3.取出指示牌...

使用WireShark解密https流量

概述 https协议是在http协议的基础上&#xff0c;使用TLS协议对http数据进行了加密&#xff0c;使得网络通信更加安全。一般情况下&#xff0c;使用WireShark抓取的https流量&#xff0c;数据都是加密的&#xff0c;无法直接查看。但是可以通过以下两种方法&#xff0c;解密抓…...

MySQL复习(检查本地MySQL是否安装、DataGrip数据库可视化工具使用、增删改查基础语法、唯一索引、SQL简单函数)

目录 一、快速检查本地MySQL是否安装。(详细教程) &#xff08;1&#xff09;MySQL本地系统环境变量配置。(简单说明) &#xff08;2&#xff09;cmd命令行——判断MySQL是否安装成功&#xff01; 二、DataGrip数据库操作可视化工具。 &#xff08;1&#xff09;基本介绍。 &am…...

数学建模 第一节

目录​​​​​​ 前言 一 优化模型的类型 二 线性规划1 线性规划2 三 0-1规划 总结 前言 数学建模主要是将问题转化为模型&#xff0c;然后再以编程的形式输出出来 算法都知道&#xff0c;数学建模也需要用到算法&#xff0c;但是不是主要以编程形式展示&#xff0c;而是…...

《Python实战进阶》No24: PyAutoGUI 实现桌面自动化

No24: PyAutoGUI 实现桌面自动化 摘要 PyAutoGUI 是一个跨平台的桌面自动化工具&#xff0c;能够模拟鼠标点击、键盘输入、屏幕截图与图像识别&#xff0c;适用于重复性桌面任务&#xff08;如表单填写、游戏操作、批量文件处理&#xff09;。本集通过代码截图输出日志的实战形…...

实验篇| CentOS 7 下 Keepalived + Nginx 实现双机高可用

为什么要做双机高可用&#xff1f;‌ 想象一下&#xff1a;你的网站突然宕机&#xff0c;用户无法访问&#xff0c;订单流失、口碑暴跌…&#x1f4b8; ‌双机热备‌就是解决这个痛点的终极方案&#xff01;两台服务器互为备份&#xff0c;724小时无缝切换&#xff0c;保障业务…...

音视频入门基础:RTP专题(19)——FFmpeg源码中,获取RTP的音频信息的实现(下)

本文接着《音视频入门基础&#xff1a;RTP专题&#xff08;18&#xff09;——FFmpeg源码中&#xff0c;获取RTP的音频信息的实现&#xff08;上&#xff09;》&#xff0c;继续讲解FFmpeg获取SDP描述的RTP流的音频信息到底是从哪个地方获取的。本文的一级标题从“四”开始。 四…...

JAVA面试_进阶部分_dubbo负载均衡策略

前言&#xff1a;zookeeper作为dubbo的注册中心&#xff0c;有一个很重要的点&#xff0c;我们的程序是分布式应用&#xff0c;服务部署在几个节点&#xff08;服务器&#xff09;上&#xff0c;当消费者调用服务时&#xff0c;zk返回给dubbo的是一个节点列表&#xff0c;但是d…...

《我的Python觉醒之路》之转型Python(十三)——控制流

#今天风景不错&#xff0c;明天继续学习 请关注我之前的笔记啊...

QT6.8.2在线安装记录

命令行带安装源启动&#xff0c;但仍不能连接到服务器&#xff0c;开着VPN才通过 .\qt-online-installer-windows-x64-4.8.1.exe --mirror https://mirrors.ustc.edu.cn/qtproject 开始安装前断开VPN&#xff0c;其实启动安装器时的镜像源修改参数是起作用的&#xff0c;因为下…...

70.HarmonyOS NEXT PicturePreview组件深度剖析:从架构设计到核心代码实现

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; HarmonyOS NEXT PicturePreview组件深度剖析&#xff1a;从架构设计到核心代码实现 文章目录 HarmonyOS NEXT PicturePreview组件深度剖析&#xf…...

如何从受 Cloudflare 保护的网站提取数据:技术与挑战

引言 Web抓取是数据科学和市场研究的重要工具&#xff0c;但当面对受Cloudflare等先进保护系统守护的网站时&#xff0c;这项任务变得异常具有挑战性。Cloudflare的机器人检测系统需要精心设计的网页抓取解决方案才能成功提取数据。本文将介绍Cloudflare的防护机制以及如何使用…...

【DeepSeek应用】DeepSeek模型本地化部署方案及Python实现

DeepSeek实在是太火了,虽然经过扩容和调整,但反应依旧不稳定,甚至小圆圈转半天最后却提示“服务器繁忙,请稍后再试。” 故此,本文通过讲解在本地部署 DeepSeek并配合python代码实现,让你零成本搭建自己的AI助理,无惧任务提交失败的压力。 一、环境准备 1. 安装依赖库 …...

WPF程序使用AutoUpdate实现自动更新

AutoUpdate.NET使用 一、AutoUpdater.NET 简介 AutoUpdater.NET 是一个开源库&#xff0c;支持从各种源&#xff08;如GitHub、FTP、HTTP服务器等&#xff09;下载并安装更新。它提供了灵活的配置选项&#xff0c;允许开发者根据需求定制更新检查逻辑和用户体验。 二、安装 …...

A SURVEY ON POST-TRAINING OF LARGE LANGUAGE MODELS——大型语言模型的训练后优化综述——第2部分

3、微调&#xff08;上一部分内容&#xff09; 4、LLMs的对齐 大型语言模型&#xff08;LLMs&#xff09;中的对齐涉及引导模型输出以符合人类预期和偏好&#xff0c;特别是在安全关键或用户面对的应用程序中。本章讨论了实现对齐的三个主要范式&#xff1a; 带有反馈的人工…...

【2025】Electron Git Desktop 实战一(上)(架构及首页设计开发)

源代码仓库&#xff1a; Github仓库【electron_git】 Commit &#xff1a; bb40040 Github Desktop 页面分析 本节目标&#xff1a; 1、实现类似Github Desktop的「空仓库」提示页 2、添加本地仓库逻辑编写从 Github Desktop 我们看到 他的 主要页面分为三个区域 Head头部区域…...

996引擎-问题处理:缺失特效分割文件 ModelAtlasSplitConfigs

通常我们买的资源都是带会 ModelAtlasSplitConfigs.txt 或 sceneAtlasSplitConfigs.txt 的 但有时确实找不到的话&#xff0c;是可以用996工具生成的&#xff1a;...

2024年12月CCF-GESP编程能力等级认证C++编程三级真题解析

三级真题的难度: ‌ CCF-GESP编程能力等级认证的C++三级真题难度通常被认为是中等水平,适合具备一定编程基础的考生。以下是关于三级真题难度的一些具体信息: 1. 考试内容 C++三级考试主要涵盖以下几个方面的知识: 基本语法:包括数据类型、变量、运算符等基础知…...

Java面试八股—Redis篇

一、Redis的使用场景 &#xff08;一&#xff09;缓存 1.Redis使用场景缓存 场景&#xff1a;缓存热点数据&#xff08;如用户信息、商品详情&#xff09;&#xff0c;减少数据库访问压力&#xff0c;提升响应速度。 2.缓存穿透 正常的访问是&#xff1a;根据ID查询文章&…...

机器人ROS学习:Ubuntu22.04安装ROS2和Moveit2实现运动规划

通过本篇文章学习&#xff0c;你可以收获以下内容&#xff1a; 学会在 Ubuntu22.04 上安装 Moveit2学会下载编译运行 Moveit2 样例程序学会使用样例程序进行运动规划等 版本平台 系统版本&#xff1a;ubuntu22.04ROS2 版本&#xff1a;humbleMoveit 版本&#xff1a;moveit2…...

树结构和数组之间的转化

1、树结构转为数组 treeToArray(treeData, returnValue []) { let newValue [...returnValue] treeData.map(item > { if (item.children) { const { children, ...treeObj } { ...item } newValue.push(treeObj) newValue this.treeToArray(children, newValue) } else…...

2024华东师范大学计算机复试上机真题

2024华东师范大学计算机复试机试真题 2023华东师范大学计算机复试机试真题 2022华东师范大学计算机复试机试真题 2024华东师范大学计算机复试上机真题 2023华东师范大学计算机复试上机真题 2022华东师范大学计算机复试上机真题 在线评测&#xff1a;传动门&#xff1a;pgcode…...

Blender-MCP服务源码3-插件开发

Blender-MCP服务源码3-插件开发 Blender-MCP服务源码解读-如何进行Blender插件开发 1-核心知识点 1&#xff09;使用Blender开发框架学习如何进行Blender调试2&#xff09;学习目标1-移除所有的Blender业务-了解如何MCP到底做了什么&#xff1f;3&#xff09;学习目标2-模拟MC…...