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

3 前端： Web开发相关概念、HTML语法、CSS语法

news 文章来源：https://blog.csdn.net/smalltorch/article/details/144897431 2025/5/26 11:36:11

文章目录

前言：导学
- 1 Web开发相关概念
- 2 Web标准（网页标准）
- 3 软件架构（CS/BS）
- - （1）C/S: Client/Server 客户端 / 服务器端
  - （2）B/S: Browser/Server 浏览器 / 服务器端
VSCode配置前段开发环境
一、HTML概念
- 1 概念
- 2 HTML快速入门
- - （1）语法快速入门
  - （2）VSCode一个！（快捷键）快速生成html框架和对html框架做一个简单的解释
  - （3）敲html技巧：只需要输入标签名 + 回车就能自动不全，不需要手动输入尖括号哪些
二、HTML标签
- 1 文件标签：构成html最基本的标签
- - （1）< html >< /html >:根标签，定义 HTML 文档的根（表示是最顶层的标签，其他标签都是其儿子）。
  - （2）< head >< /head >:头标签，定义关于文档的信息，用于指定html文档的一些属性。引入外部的资源
  - （3）< title >< /title >：标题标签，用来定义浏览器最顶端的那个标题（注意不是具体的展示文本的那个标题）
  - （4）< body >< /body >：定义文档的主体（就是具体的网页具体要展示的那部分的主题）。
- 2 文本标签：和文字有关的标签
- - （1）< h1 >< /h1>: (h1-h6) 文本里面一级到六级标题
  - （2）< p >< /p >：段落标签，段落标签就是让段落间间距变大仅此而已
  - （3）< br > 或者 < br/ > ：换行
  - （4）< hr > 或者 < hr/ > ：水平线标签，产生一条水平线
  - （5）< b > < /b > ：字体加粗
  - （6）< i >< /i > ：斜体
  - （7）< font >< /font > ：对字体进行一些样式设置
  - （8）< center>< /center>：文本居中标签，可以前提font使用
  - （9）补充：属性定义
  - - color：颜色属性
    - - < font color = "red">举头望明月，低头思故乡。< /font>
      - < font color = "rgb(34,56,10)">举头望明月，低头思故乡。< /font>
      - < font color = "#2D1475">举头望明月，低头思故乡。< /font>
    - width：宽度属性（单位是像素点）
    - - < hr color = "red", width="300">
      - < hr color = "red", width="50%"> 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口
    - size: 大小属性、高度（如果是字体就是字体大小）
    - - < font size = "5">举头望明月，低头思故乡。< /font>
  - （10）html中常见特殊字符的占位符
  - 文本标签小案例练习
- 3 图片标签 < img src="1.png" alt="加载失败">
- 4 列表标签
- - （1）有序列表 < ol >< li > < /li >...< /ol >
  - （2）无序列表： < ul >< li > < /li >...< /ul >
- 5 超链接标签：< a href="目标URL">链接文本< /a>
- 6 表格标签
- - （1）基本语法
  - （2）综合案例：使用表格来完成界面布局（后面有时间会将这部分补上，待定。。。）
- 7 表单标签：（控件）用于采集用户输入信息
- - （1）< form >< /form > ：表单容器（所有的搜集信息的控件都必须被其包裹，不然控件就是一个空架子）
  - （2）标签控件：< label >< /label >
  - （3）输入控件
  - （4）下拉菜单控件
  - （5）多行文本输入控件
  - （6）按钮控件
  - （7）分组和标题
  - （8）结合CSS的一个完整演示
  - （9）练习：使用表格和表单布局一个注册界面（待定。。。。）
- 8 特殊标签
- - （1）< div >< /div > ：块标签（块级元素）
  - （2）< span >< /span >：行内标签（行级元素）
  - （3）语义化标签（html5新特性）
  - - ---- < header >< /header >：定义页面的头部区域，通常包含网站标题、导航栏等
    - ---- < nav >< /nav >：定义导航栏，通常包含链接到其他页面或部分的菜单
    - ---- < footer >< /footer >：定义页面的底部区域，通常包含版权信息、联系方式等
三、CSS：页面美化和布局
- 1 CSS与HTML结合快速入门（三种结合调用方式）
- - （1）内联样式（当前标签中生效）
  - （2）内部样式（当前html中生效）
  - （3）外部样式（所有引入了css的样式表的html中生效）
- 2 CSS基本语法
- - （1）基本选择器
  - - ---- id选择器
    - ---- 元素选择器（标签名称选择器）：根据标签名称来控制对应的CSS
    - ---- 类选择器：选择具有相同class属性值的元素
  - （2）扩展选择器（选择器的高级使用）
  - - ---- 选择所有元素
    - ---- 并集选择器
    - ---- 子选择器
    - ---- 后代选择器
    - ---- 属性选择器
    - ---- 伪类选择器：选择具有某些状态的元素
- 3 CSS属性
- - （1）字体、文本
  - （2）背景
  - （3）边框轮廓
  - （4）尺寸
- 4 盒子模型（传统的div进行页面布局）

前言：导学

1 Web开发相关概念

Web: 全球广域网，也称为万维网(www World Wide Web)，能够通过浏览器访问的网站。
前后端分离开发模式（Web网站工作流程）：
混合开发模式（不建议）：前后端不分离

2 Web标准（网页标准）

Web标准也称为网页标准，由一系列的标准组成，大部分由W3C(WorldWide Web Consortium，万维网联盟)负责制定。
三个组成部分:
- HTML: 负责网页的结构(页面元素和内容)。
- CSS: 负责网页的表现(页面元素的外观、位置等页面样式，如:颜色、大小等)，布局等。
- JavaScript: 负责网页的行为(交互效果)。

3 软件架构（CS/BS）

（1）C/S: Client/Server 客户端 / 服务器端

在用户本地有一个客户端程序，在远程有一个服务器端程序
如:QQ，迅雷…

优点:
用户体验好
缺点:
开发、安装，部署，维护麻烦

（2）B/S: Browser/Server 浏览器 / 服务器端

只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序

优点:
开发、安装，部署，维护简单
缺点:
如果应用过大，用户的体验可能会受到影响
对硬件要求过高
资源分类:
- 1 静态资源: 使用静态网页开发技术发布的资源。
  - 所有用户访问，得到的结果是一样的。
  - 如:文本，图片，音频、视频，HTML,CSS,JavaScript
  - 如果用户请求的是静态资源，那么服务器会直接将静态资源发送给浏览器。浏览器中内置了静态资源的解析引擎，可以展示静态资源
- 2 动态资源 : 使用动态网页及时发布的资源。
  - 所有用户访问，得到的结果可能不一样。
  - 如: jsp / servlet, php, asp…技术都是处理动态资源的
    如果用户请求的是动态资源，那么服务器会先将动态资源转换成静态资源，再将转换成的静态资源发送给浏览器展示
  - 举个例子说明，对于CSDN的个人主页，每个人的个人信息都不一样，要展示的当然都不一样。这些信息都是从数据库中根据每个用户不同而获取展示的。动态资源就是用来描述这种情形，说人话就是业务层根据用户不同发送的数据不同，和静态资源没区别。

VSCode配置前段开发环境

VSCode在前端开发中使用最多，用这个来编辑html和css等前端的技术比较好用，还有很多前段技术都使用vscode快速可以配置很方便。

安装VSCode：这个直接装就行，基本没有什么注意事项
安装插件：
- Chinese (Simplified) Language Pack：适用于 VS Code 的中文（简体）语言包
- HTML CSS Support：在编写样式表的时候，自动补全功能大大缩减了编写时间
- JavaScript (ES6) code snippets：支持ES6语法提示
- Mithril Emmet：一个能大幅度提高前端开发效率的一个工具，用于补全代码
- Path Intellisense：路径提示插件
- Vue 3 Snippets：在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。
- VueHelper：vscode最好的vue代码提示插件，不仅包括了vue2所有api，还含有vue-router2和vuex2的代码
- Auto Close Tag：自动闭合HTML/XML标签
- Auto Rename Tag：自动完成另一侧标签的同步修改
- Beautify：格式化 html ,js,css
- Bracket Pair Colorizer：给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
- open in browser：vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari
- Vetur：Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。
- File Utils：File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录
- IntelliJ IDEA Keybindings：安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。
- Code Spell Checker
  拼写检查器。比如 banana 单词写错成 banane ，会提示你是否修改成 banana ，也可以将 banane 添加至检查器的字典中

一、HTML概念

html官方手册：还是要学会查询官方手册
现在HTML已经发展到HTML5了，所以我们直接就按照HTML5来学习了

1 概念

概念: 是最基础的网页开发语言
- Hyper Text Markup Language 超文本标记语言
- 超文本: 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本
  人话就是：超级文本语言，能够放文字、图片、音频等各种数据的一种语言（理解成一种文本表示的形式即可）
- 标记语言:
  - 由标签构成的语言。<标签名称> 如 html，xml等
  - 标记语言不是编程语言

2 HTML快速入门

（1）语法快速入门

语法:
- （1）html文档后缀名 .html 或者 .htm
- （2）标签分为
  - 围堵标签: 有开始标签和结束标签。如<html></html>
  - 自闭和标签: 开始标签和结束标签在一起。
    如**<br/> 换行符标签**和 <img src=“1.png”/> 图片标签
    另外，这种自闭和标签，最后面/可以省略 <br> 、 <img src=“1.png”> 就可以了
- （3）标签可以嵌套
  需要正确嵌套，不能你中有我，我中有你
  错误: <a><b></a></b>
  正确: <a><b></b></a>
- （4）在开始标签中可以定义属性，属性是由键值对构成
  <font color = ‘red’>Hello World</font> 这个里面的color = 'red’就是属性
  值需要用引号(单双都可)引起来
- （5）html的标签不区分大小写，但是建议使用小写。

在这里插入图片描述

<html>          <!-- 声明文档类型 --><head>      <!-- 头部标签，用于存放元数据 --><title>HTML快速入门</title>      <!-- 设置网页标题 --></head><body>                     <!-- 主体标签，用于存放网页内容 --><h1>Hello World</h1>         <!-- h1标题标签 --><font color = 'red'>Hello World</font><br/>      <!-- 字体标签，设置字体颜色 -->  <!-- <br>标签用于换行 --><font color = 'green'>Hello World</font><br/><img src="1.png"/>         <!-- 图片标签，用于插入图片 --></body>
</html>

在这里插入图片描述

（2）VSCode一个！（快捷键）快速生成html框架和对html框架做一个简单的解释

<!DOCTYPE html>      <!-- 声明文档类型 -->
<html lang="en">     <!-- 这个里面lang属性声明这个html是那个国家的，这里en表示英国，其实随便写，不写也行 -->
<head><meta charset="UTF-8">    <!-- 设置字符编码 --><meta name="viewport" content="width=device-width, initial-scale=1.0">    <!-- 设置视口,设置浏览器的兼容性 --><title>HTML快速入门</title>
</head>
<body><h1>Hello World</h1>      <font color = 'red'>Hello World</font><br/><font color = 'green'>Hello World</font><br/><img src="1.png"/></body>
</html>

（3）敲html技巧：只需要输入标签名 + 回车就能自动不全，不需要手动输入尖括号哪些

二、HTML标签

官方文档：快速查询标签

1 文件标签：构成html最基本的标签

（1）< html >< /html >:根标签，定义 HTML 文档的根（表示是最顶层的标签，其他标签都是其儿子）。

（2）< head >< /head >:头标签，定义关于文档的信息，用于指定html文档的一些属性。引入外部的资源

比如这样在这里指定html的编码，后面学了CSS还可以再这里引入一些其他外部资源，类似python中的导包操作。

（3）< title >< /title >：标题标签，用来定义浏览器最顶端的那个标题（注意不是具体的展示文本的那个标题）

在这里插入图片描述

（4）< body >< /body >：定义文档的主体（就是具体的网页具体要展示的那部分的主题）。

2 文本标签：和文字有关的标签

（1）< h1 >< /h1>: (h1-h6) 文本里面一级到六级标题

<!-- 标题标签 h1~h6演示 -->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

演示：
在这里插入图片描述

（2）< p >< /p >：段落标签，段落标签就是让段落间间距变大仅此而已

<!-- <p></p> 段落标签演示：段落标签就是让段落间间距变大仅此而已 -->
那年冬天，祖母死了，父亲的差使⑴也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧⑵回家。到徐州见着父亲，看见满院狼藉⑶的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”<br>
回家变卖典质⑷，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨澹⑸，一半为了丧事，一半为了父亲赋闲⑹。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。<br><br><br><p>那年冬天，祖母死了，父亲的差使⑴也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧⑵回家。到徐州见着父亲，看见满院狼藉⑶的东西，又想起祖母，不禁簌簌地流下眼泪。父亲说：“事已如此，不必难过，好在天无绝人之路！”</p>
<p>回家变卖典质⑷，父亲还了亏空；又借钱办了丧事。这些日子，家中光景很是惨澹⑸，一半为了丧事，一半为了父亲赋闲⑹。丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。</p>

演示：
在这里插入图片描述

（3）< br > 或者 < br/ > ：换行

< br > 或者 < br/ >: html语法并没有那么严格，所以这种自闭和标签，最后面/可以省略 <br>

（4）< hr > 或者 < hr/ > ：水平线标签，产生一条水平线

【注】：< hr > 还存在一些属性可以控制样式，例如color等。这里我们了解一下，学习了CSS后这些样式都是要用CSS控制的
因为html5中已经废弃了这些属性，后面大家都统一使用CSS来控制即可。

属性:
- color: 颜色
- width: 宽度
- size: 高度，大小（如果是字体就是字体大小）
- align: 对其方式（html5已经废弃，所以有点浏览器不能出现效果，还是默认居中）
  - center: 居中
  - left: 左对齐
  - right: 右对齐
    对齐方式默认是居中对齐的

<!-- hr 水平线标签演示 -->
<hr>
<hr color="red">    <!-- 设置水平线颜色 --><!-- width : 宽度属性演示 -->
<hr color = "green", width="300">    <!-- 设置水平线宽度为300像素点 -->
<hr color = "green", width="50%">    <!-- 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口% -->

演示：
在这里插入图片描述

（5）< b > < /b > ：字体加粗

<!-- <b></b> 加粗标签演示 -->
床前明月光，疑是地上霜。<br>
<b>床前明月光，疑是地上霜。</b>

演示：
在这里插入图片描述

（6）< i >< /i > ：斜体

<!-- <i></i> 斜体标签演示 -->
举头望明月，低头思故乡。<br>
<i>举头望明月，低头思故乡。</i>

演示：
在这里插入图片描述

（7）< font >< /font > ：对字体进行一些样式设置

属性:
- color: 字体颜色
- size: 字体大小
- face: 字体（“楷体”，“宋体”等等）

 <!-- font演示 -->
<font color = "red">举头望明月，低头思故乡。</font><br>
<font color = "rgb(34,56,10)">举头望明月，低头思故乡。</font><br>     
<font color = "#2D1475">举头望明月，低头思故乡。</font><br><br><!-- size : 字体大小属性演示 -->
<font size = "5">举头望明月，低头思故乡。</font><br>
<font size = "10">举头望明月，低头思故乡。</font><br>
<font size = "15">举头望明月，低头思故乡。</font><br>

演示：
在这里插入图片描述

（8）< center>< /center>：文本居中标签，可以前提font使用

<!-- 文本居中标签 -->
<center>举头望明月，低头思故乡。</center>
<center><font color = "red">举头望明月，低头思故乡。</font>
</center>

演示：
在这里插入图片描述

（9）补充：属性定义

属性的值我们都习惯" "引号包裹成字符串

color：颜色属性

< font color = “red”>举头望明月，低头思故乡。< /font>

< font color = “rgb(34,56,10)”>举头望明月，低头思故乡。< /font>

< font color = “#2D1475”>举头望明月，低头思故乡。< /font>

主要有三种写法：
- 英文单词: red, green, blue
  < font color = “red”>举头望明月，低头思故乡。< /font>
- rgb(值1，值2，值3): 值的范围:0~255 ,另外部分浏览器不支持这种
  < font color = “rgb(34,56,10)”>举头望明月，低头思故乡。< /font>
- #值1值2值3: 值的范围:00~FF之间。
  < font color = “#2D1475”>举头望明月，低头思故乡。< /font>

【注】：rgb或者16进制的颜色不知道是什么：直接在线取色器就可以了

width：宽度属性（单位是像素点）

< hr color = “red”, width=“300”>

< hr color = “red”, width=“50%”> 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口

数值: width=‘20’, 数值的单位，默认是 px(像素)
< hr color = “red”, width=“300”>
数值%:占比相对于父元素的比例
< hr color = “red”, width="50%"> 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口

演示：
在这里插入图片描述

size: 大小属性、高度（如果是字体就是字体大小）

< font size = “5”>举头望明月，低头思故乡。< /font>

<!-- size : 字体大小属性演示 -->
<font size = "5">举头望明月，低头思故乡。</font><br>
<font size = "10">举头望明月，低头思故乡。</font><br>
<font size = "15">举头望明月，低头思故乡。</font><br>

演示：
在这里插入图片描述

（10）html中常见特殊字符的占位符

有很多特殊字符都可以上官网去查看，这里只介绍几个比较常见的：

显示结果	描述	实体名称
	空格
<	小于号	<
>	大于号	>
≤	小于等号	≤
≥	大于等号	≥
×	乘号	×
÷	除号	÷

【注】：一般情况下如果不会发生与语法冲突的情况，不必一定要实体名称也可以（空格就必须要使用实体名称，键盘回车是不行的）

文本标签小案例练习

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

3 前端： Web开发相关概念、HTML语法、CSS语法

文章目录前言：导学1 Web开发相关概念2 Web标准（网页标准）3 软件架构（CS/BS）（1）C/S: Client/Server 客户端 / 服务器端（2）B/S: Browser/Server 浏览器 / 服务器端VSCode配置前段开发环境一、HTML概念1 概念2 HTML快速入门（1）语法快速入门（2）VSCode一个！（快捷键…...

编程日记 2025/1/16 13:25:49

SpringBoot工程快速启动

1.问题导入以后我们和前端开发人员协同开发，而前端开发人员需要测试前端程序就需要后端开启服务器，这就受制于后端开发人员。为了摆脱这个受制，前端开发人员尝试着在自己电脑上安装 Tomcat 和 Idea ，在自己电脑上启动后端程序&a…...

编程日记 2025/1/16 13:23:46

Unity WebGL：本机部署，运行到手机

Unity WebGL 简单介绍一下Unity WebGL的技术方案，在WebGL平台出包后，Unity的运行时C/C代码是通过Emscripten编译成了WebAssembly/Wasm；游戏逻辑部分的C#代码是先通过il2cpp转成C再编译转成的Wasm，Unity程序就就可以在支持WebAsse…...

编程日记 2025/1/16 13:21:44

d e t ( A ) ∑ i 1 , i 2 , ⋯ , i n ( − 1 ) σ ( i 1 , ⋯ , i n ) a 1 , i 1 a 2 , i 2 , ⋯ , a n , i n det(A) \sum_{i_1,i_2,\cdots,i_n } (-1)^{\sigma(i_1,\cdots,i_n)} a_{1,i_1}a_{2,i_2},\cdots, a_{n,i_n} det(A)i1,i2,⋯,in∑(−1)σ(i1,⋯,in)a1…...

编程日记 2025/1/16 13:20:40

Android SystemUI——StatusBar视图创建（六）

上一篇文章我们介绍了 StatusBar 的构建过程，在 makeStatusBarView() 中获得 FragmentHostManager，用来管理 StatusBar 的窗口。一、状态栏视图在得到 FragmentHostManager 实例对象之后，还会继续调用 addTagListener() 方法设置监听对象，然后获取 FragmentManager 并开…...

编程日记 2025/1/16 13:11:31

Picocli 命令行框架

官方文档 https://picocli.info/ 官方提供的快速入门教程 https://picocli.info/quick-guide.html 使用 Picocli 创建命令行应用程序 Picocli 是一个用于构建 Java 命令行应用的强大框架，它简化了参数解析和帮助消息生成的过程。下面是如何使用 Picocli 构建简单命…...

编程日记 2025/1/16 13:08:23

spring-cloud-starter-gateway 使用中 KafkaAppender的问题

公司需要将应用日志上报到kafka，以供分析与查看。结合logback可以完成此功能，大致配置如下： <appender name"KafkaAppender" class"com.github.danielwegener.logback.kafka.KafkaAppender"><encoder class&…...

编程日记 2025/1/16 13:06:19

【全套】基于分类算法的学业警示预测信息管理系统

【全套】基于分类算法的学业警示预测信息管理系统【摘要】随着网络技术的发展基于分类算法的学业警示预测信息管理系统是一种新的管理方式，同时也是现代学业预测信息管理的基础，利用互联网的时代与实际情况相结合来改变过去传统的学业预测信息管理中…...

编程日记 2025/1/16 13:03:17

Elasticsearch Python 客户端是否与自由线程 Python 兼容？

作者：来自 Elastic Quentin_Pradet 在这篇文章中，我们将进行一些实验，看看 Python Elasticsearch 客户端是否与新的 Python 3.13 自由线程（free-threading）版本兼容，其中 GIL 已被删除。介绍但首先&…...

编程日记 2025/1/16 13:02:14

基于大语言模型的组合优化

摘要：组合优化（Combinatorial Optimization, CO）对于提高工程应用的效率和性能至关重要。随着问题规模的增大和依赖关系的复杂化，找到最优解变得极具挑战性。在处理现实世界的工程问题时，基于纯数学推理的算法存在局限…...

编程日记 2025/1/16 13:01:08

#CSS混合模式：解决渐变背景下的文字可见性问题

在现代网页设计中，渐变背景的使用越来越普遍。然而，当我们在渐变背景上放置文字时，常常会遇到一个问题：文字在某些背景颜色下可能变得难以阅读。今天，我们将探讨一个优雅的解决方案：使用CSS混合模式。问题…...

编程日记 2025/1/16 13:00:03

Vue2+OpenLayers给标点Feature添加信息窗体（提供Gitee源码）

目录一、案例截图二、安装OpenLayers库三、代码实现 3.1、信息窗体DOM元素 3.2、创建Overlay 3.3、创建一个点 3.4、给点初始化点击事件 3.5、完整代码四、Gitee源码一、案例截图二、安装OpenLayers库 npm install ol 三、代码实现初始化变量： d…...

编程日记 2025/1/16 12:58:01

实战threeJS数字孪生开源数字工厂

threeJS数字孪生数字工厂设备定位基于three.js的数字工厂开源项目介绍一、项目概述本项目是一款基于three.js的数字工厂项目，旨在通过3D可视化技术，为工业制造领域提供一个直观、高效、智能的生产监控与管理平台。该项目结合了现代前端技术栈&…...

编程日记 2025/1/16 12:53:57

【Python基础篇】——第3篇：从入门到精通：掌握Python数据类型与数据结构

第3篇：数据类型与数据结构目录 Python中的数据类型概述列表（List） 创建列表列表的基本操作列表方法列表推导式元组（Tuple） 创建元组元组的基本操作元组的不可变性字典（Dictionary） 创建字典…...

编程日记 2025/1/16 12:46:50

算法3（力扣83）-删除链表中的重复元素

1、题目：给定一个已排序的链表的头 head ， 删除所有重复的元素，使每个元素只出现一次。返回已排序的链表。 2、实现（ 因为已排序，所以元素若重复，必然在其下一位）（这里为在vscod…...

编程日记 2025/1/16 12:45:49

HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载，Scroll滚动到顶部

HarmonyOS 鸿蒙 ArkTs(5.0.1 13)实现Scroll下拉到顶刷新/上拉触底加载效果展示使用方法 import LoadingText from "../components/LoadingText" import PageToRefresh from "../components/PageToRefresh" import FooterBar from "../components/…...

编程日记 2025/1/16 12:43:47

.NET8.0多线程编码结合异步编码示例

1、创建一个.NET8.0控制台项目来演示多线程的应用 2、快速创建一个线程 3、多次运行程序，可以得到输出结果这就是多线程的特点 - 当多个线程并行执行时，它们的具体执行顺序是不确定的，除非我们使用同步机制（如 lock、信号量等&am…...

编程日记 2025/1/16 12:42:46

SpringBoot项目中解决CORS跨域资源共享问题

在Spring Boot项目中解决CORS（跨域资源共享）问题，可以通过以下几种方法： 1. 使用CrossOrigin注解这是最简单的方法，适用于单个控制器或控制器方法级别的跨域配置。你可以在控制器类或具体的方法上使用CrossOrigin注…...

编程日记 2025/1/16 12:40:44

Android string.xml中特殊字符转义

项目中要在string.xml 中显示特殊符号空格： （普通的英文半角空格但不换行） 窄空格： （中文全角空格 （一个中文宽度）） （半个中文宽度，但两个空格比一个中文…...

编程日记 2025/1/16 12:39:32

解析传统Workflow、AI Workflow与AI Agent概念，并通过Coze案例探讨利用AI工作流构建应用的实践流程

传统工作流工作流入门这篇就够了 BPMN.JS中文教程 BPMN 工作流引擎解析定义：工作流是在计算机支持下业务流程的自动或半自动化，其通过对流程进行描述以及按一定规则执行以完成相应工作。应用：随着计算机技术的发展以及工业生产、办公自动…...

编程日记 2025/1/16 12:37:26

光谱相机的光谱分辨率可以达到多少？

多光谱相机多光谱相机的光谱分辨率相对较低，波段数一般在 10 到 20 个左右，光谱分辨率通常在几十纳米到几百纳米之间，如常见的多光谱相机光谱分辨率为 100nm 左右。高光谱相机一般的高光谱相机光谱分辨率可达 2.5nm 到 10nm 左右&#x…...

编程日记 2025/1/16 12:33:21

android Recyclerview viewholder统一封装

Recyclerview holder 统一封装 ViewHolder类 import android.annotation.SuppressLint import android.content.Context import android.graphics.Color import android.graphics.drawable.GradientDrawable import android.os.Build import android.os.CountDownTimer import…...

编程日记 2025/1/16 12:32:21

文章目录

前言：导学

1 Web开发相关概念

2 Web标准（网页标准）

3 软件架构（CS/BS）

（1）C/S: Client/Server 客户端 / 服务器端

（2）B/S: Browser/Server 浏览器 / 服务器端

VSCode配置前段开发环境

一、HTML概念

1 概念

2 HTML快速入门

（1）语法快速入门

（2）VSCode一个 ！（快捷键）快速生成html框架和对html框架做一个简单的解释

（3）敲html技巧：只需要输入标签名 + 回车就能自动不全，不需要手动输入尖括号哪些

二、HTML标签

1 文件标签：构成html最基本的标签

（1）< html >< /html >:根标签，定义 HTML 文档的根（表示是最顶层的标签，其他标签都是其儿子）。

（2）< head >< /head >:头标签，定义关于文档的信息，用于指定html文档的一些属性。引入外部的资源

（3）< title >< /title >：标题标签，用来定义浏览器最顶端的那个标题（注意不是具体的展示文本的那个标题）

（4）< body >< /body >：定义文档的主体（就是具体的网页具体要展示的那部分的主题）。

2 文本标签：和文字有关的标签

（1）< h1 >< /h1>: (h1-h6) 文本里面一级到六级标题

（2）< p >< /p >：段落标签，段落标签就是让段落间间距变大仅此而已

（3）< br > 或者 < br/ > ：换行

（4）< hr > 或者 < hr/ > ：水平线标签，产生一条水平线

（5）< b > < /b > ：字体加粗

（6）< i >< /i > ：斜体

（7）< font >< /font > ：对字体进行一些样式设置

（8）< center>< /center>：文本居中标签，可以前提font使用

（9）补充：属性定义

color：颜色属性

< font color = “red”>举头望明月，低头思故乡。< /font>

< font color = “rgb(34,56,10)”>举头望明月，低头思故乡。< /font>

< font color = “#2D1475”>举头望明月，低头思故乡。< /font>

width：宽度属性（单位是像素点）

< hr color = “red”, width=“300”>

< hr color = “red”, width=“50%”> 设置水平线宽度为50%,这个50相对是是父级串口，一般就是你打开的那个窗口

size: 大小属性、高度（如果是字体就是字体大小）

< font size = “5”>举头望明月，低头思故乡。< /font>

（10）html中常见特殊字符的占位符

文本标签小案例练习

相关文章：

（2）VSCode一个！（快捷键）快速生成html框架和对html框架做一个简单的解释