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

前端学习记录之HTML

news 来源：原创 2025/6/28 6:22:49

1. 网页

1.1 什么是网页

网站是指在因特网上根据一定的规则，使用HTML等制作的用于展示特定内容相关的网页集合。
网页是网站中的一“页”，通常是HTML格式的文件，它要通过浏览器来阅读

网页是构成网站的基本元素。它通常由图片，链接，文字，声音，视频等元素组成。通常我们看到的网页，常见以.htm或.html后缀结尾的文件，因此将其俗称为HTML文件

1.2 什么是HTML

HTML指的是超文本标记语言(Hyper Text Markup Language)，它是用来描述网页的一种语言。HTML不是一种编程语言，而是一种标记语言(markup language)。
标记语言是一套标记标签(markup tag)。

所谓超文本，有2层含义：

  1. 它可以加入图片，声音，动画，多媒体等内容（超越了文本限制）。
  2. 它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接（超链接文本）。

1.3 网页的形成

网页是由网页元素组成的，这些元素是利用html标签描述出来，然后通过浏览器解析来显示给用户的。

前端人员开发代码—>浏览器显示代码（解析，渲染）—>生成最后的Web页面

2. 常用浏览器

浏览器是网页显示，运行的平台。常用的浏览器有edge，Firefox，chrome，safari，opera等。

浏览器内核
浏览器内核（渲染引擎）：负责读取网页内容，整理讯息，计算网页的显示方式并显示页面。

浏览器内核备注
IETridentIE、猎豹安全、360极速浏览器、百度浏览器
FirefoxGecko火狐浏览器内核
SafariWebkit苹果浏览器内核
Chrome/OperaBlinkChrome / Opera浏览器内核。Blink 其实是 WebKit 的分支。
目前国内浏览器一般采用Webkit和Blink内核

3. Web标准

Web标准是由W3C组织和其它标准化组织制定的一系列标准的集合。W3C（万维网联盟）是国际最著名的标准化组织。

3.1 为什么需要Web标准

遵循 Web 标准除了可以让不同的开发人员写出的页面更标准、更统一外，还有以下优点：

  1. 让 Web 的发展前景更广阔。
  2. 内容能被更广泛的设备访问。
  3. 更容易被搜寻引擎搜索。
  4. 降低网站流量费用。
  5. 使网站更易于维护。
  6. 提高页面浏览速度。

3.2 Web标准的构成

主要包括结构（Structure），表现（Presentation）和行为（Behavior）三个方面。

标准说明
结构结构用于对网页元素进行整理和分类，现阶段主要学的是HTML。
表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为行为是指网页模型的定义及交互的编写，现阶段主要学的是 JavaScript。
Web标准提出的最佳体验方案：结构，样式，行为向分离。

简单理解：结构写到HTML文件中，表现写到CSS文件中，行为写到JavaScript文件中。

1. HTML语法规范

1.1 基本语法概述

  1. HTML标签是由尖括号包围的关键词，例如<html>
  2. HTML标签通常是成对出现的，例如<html>和</html> ,我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。
  3. 有些特殊的标签必须是单个标签（极少情况），例如<br /> ，我们称之为单标签

1.2 标签关系

双标签关系可以分为两类：包含关系和并列关系。
包含关系

<head>妈妈<title> </title>女儿
</head>

并列关系

<head> </head>
<body> </body>类似姐妹

2. HTML基本结构标签

2.1 第一个HTML网页

每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为HTMl文档。

标签名定义说明
<html></html>HTML标签页面中最大的标签，我们称为根标签。
<head></head>文档的头部注意在head标签中我们必须设置的标签是title。
<title></title>文档的标题让页面拥有一个属于自己的网页标题。
<body></body>文档的主体元素包含文档的所有内容，页面内容基本都是放到body里面的。

HTML文档的后缀名必须是.html或.htm，浏览器的作用是读取HTML文档，并以网页的形式显示出它们。

win + 左右箭头快速调整

3. 网页开发工具

3.1 文档类型声明标签

<!DOCTYPE>  文档类型声明，作用就是告诉浏览器使用哪种HTML版本来显示网页

<!DOCYTPE html>
当前页面采取的是HTML5版本来显示网页

注意：

  1. 声明位于文档中的最前面的位置，处于``标签之前
  2. 不是一个HTML标签，它就是文档类型声明标签

3.2 lang语言种类

用来定义当前文档显示的语言

  1. en为英语
  2. zh-CN为中文

3.3 字符集

字符集（Character set）是多个字符的集合。以便计算机能够识别和存储各种文字。
在head 标签内，可以通过 meta标签的 charset属性来规定HTML文档应该使用哪种字符编码。

<meta charset="UTF-8">

charset常用的值有：GB2312，BIG5，GBK和UTF-8，其中UTF-8也被称为万国码，基本包含了全世界所有国家需要用到的字符。

4. HTML 常用标签

4.1 标签语义

学习标签有技巧，重点记忆每个标签的语义。即标签的含义，该标签用来干啥？
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。

4.2 标题标签<h1>-<h6>

为了使网页更具有语义化，会在页面中用到标题标签。HTML提供了6个等级的标签，即<h1>-<h6>
单词head的缩写，意为头部，标题
标签语义：作为标题使用，并且依据重要性递减。
特点

  1. 加了标签的文字会变得加粗，字号也会依次变大。
  2. 一个标题独占一行。

4.3 段落和换行标签

在网页中，要把文字有条理的显示出来，就需要将文字分段显示。在HTML标签中，p标签用于定义段落，它可以将整个网页分为若干区域。
标签语义：可以把HTML文档分割为若干段落。
特点：

  1. 文本在一个段落中会根据浏览器窗口的大小自动换行。
  2. 段落和段落之间保有空隙。

在HTML中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望某段文本强制换行显示，就需要使用换行标签<br />
单词break的缩写，意为打断，换行。
标签语义：强制换行。
特点：

  1. 是个单标签
  2. 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。

4.4 文本格式化标签

在网页中，有时需要为文字设置粗体，斜体或下划线等效果，这时就需要用到HTML中的文本格式化标签，使文字以特殊的方式显示。
标签语义：突出重要性，比普通文字重要。

语义标签说明
加粗<strong></strong> 或 <b></b>更推荐使用 <strong> 标签加粗，语义更强烈。
倾斜<em></em> 或 <i></i>更推荐使用 <em> 标签倾斜，语义更强烈。
删除线<del></del> 或 <s></s>更推荐使用 <del> 标签删除线，语义更强烈。
下划线<ins></ins> 或 <u></u>更推荐使用 <ins> 标签下划线，语义更强烈。

4.5 <div>和<span标签

<div>和<span>是没有语义的，它们就是一个盒子，用来装内容的。
div是division的缩写，表示分割，分区，span意为跨度，跨距。
特点：

  1. div标签用来布局，但是现在一行只能放一个<div>。大盒子
  2. <span>标签用来布局，一行上可以多个span，小盒子

4.6 图像标签和路径（重点）

1.图像标签

在HTML标签中，<img> 标签用于定义HTML页面中的图像。

<img src = "图像URL" />

src是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：就是属于这个图像标签的特性。
图像标签的其它属性：

属性属性值说明
src图片路径必须属性
alt文本替换文本。图像不能显示的文字
title文本提示文本。鼠标放到图像上，显示的文字
width像素设置图像的宽度
height像素设置图像的高度
border像素设置图像的边框粗细
图像标签属性注意点：
① 图像可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性，属性与属性之间均以空格分开
③ 属性采取键值对的格式，即key=“value”的格式，属性=“属性值”。

2. 路径

页面中的图片会非常多，通常我们会新建一个文件夹来存放这些图像文件（例如 images），这时再查找图像，就需要采用“路径”的方式来指定图像文件的位置。路径可以分为：

  1. 相对路径
  2. 绝对路径

2.1 路径之相对路径

相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。简单来说，图片相对于HTML页面的位置。

相对路径分类符号说明
同一级路径图像文件位于HTML文件同一级 如 <img src="bing.gif" />
下一级路径/图像文件位于HTML文件下一级 如 <img src="images/google.gif" />
上一级路径../图像文件位于HTML文件上一级 如 <img src="../bing.gif" />

相对路径是从代码所在的文件出发，去寻找目标文件的。我们所说的上一级、下一级和同一级就是图片相对于HTML页面的位置。

2.2 路径之绝对路径

绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。

例如：

  • "F:\html\emoij.png"
  • 完整的网络地址 "https://www.bilibili.com/?page=Home"

3. 目录文件夹和根目录📁

实际工作中，我们的文件不能随便乱放，否则用起来很难快速找到它们。因此，我们需要一个文件夹来管理它们。

  • 目录文件夹：就是普通文件夹，里面存放了我们做页面所需要的相关素材，比如HTML文件、图片等。
  • 根目录：打开目录文件夹的第一层就是根目录。

4. VSCode 打开目录文件夹

在 VSCode 中，可以通过以下步骤打开目录文件夹：

  1. 点击 文件 菜单。
  2. 选择 打开文件夹。
  3. 选择您的目录文件夹。

这种方式在后期非常方便管理文件。

4.7 超链接标签

在HTML标签中，<a>标签用于定义超链接，作用是从一个页面链接到另一个页面。

链接的语法格式

<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a>

单词anchor的缩写，意为：锚。

属性作用
href用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能。
target用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。

链接的分类

  1. 外部链接：例如b站.
<a href="http://www.bing.com" target="_self">必应 </a> <!> --默认在当前页面打开 <--!>
<a href="htttp://www.bing.com" target="_blank"> 必应 </a># 在新标签页打开
  1. 内部链接：网站内部页面之间的相互链接。直接链接内部页面名称即可
<a href=""> xxx </a>
  1. 空链接：如果暂时没有确定链接目标时
<a href="#">xxx</a>
  1. 下载链接：如果href里面地址是一个文件或者压缩包，会下载这个文件。
<a href="img.zip">下载文件</a>
  1. 网页元素链接：在网页中的各种网页元素，如文本，图像，表格，音频，视频等都可以添加超链接
<a href="http://www.bing.com"><img src="emoij.png" /></a>
  1. 锚点链接：当点击链接，可以快速定位到页面中的某个位置。
    • 在链接文本的href属性中，设置属性值为==#名字==的形式，如
      <a href="#two">第二集</a>
    • 找到目标位置标签，里面添加一个id属性 = 刚才的名字，如：
      h3 id="two">第二集介绍</h3>
<a href="#two">第二集</a>
<h3 id="two">第二集介绍</h3>

4.8 表格标签

表格是实际开发中非常常用的标签：

  1. 表格的主要作用
  2. 表格的基本语法

1.1 表格的主要作用

表格主要用于显示，展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格就能把繁杂的数据表现得很有条理。

1.2 表格的基本语法

<table><tr><td>单元格内的文字</td>...</tr>...</table>
  1. <table> </table>是用于定义表格的标签；
  2. <tr> </tr>标签用于定义表格中的行，必须嵌套在①的标签中；
  3. <td> </td>用于定义表格中的单元格，必须嵌套在②的标签中；
  4. 字母td指表格数据（table data），即数据单元格的内容。
    表格无列概念

1.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示。
<th>标签表示HTML表格的表头部分（table head的缩写）
<table>
<tr>
<th> 姓名 </th>
...
</tr>
...
</table>

1.4 表格属性

表格标签这部分属性实际开发不常用，后面通过CSS来设置

属性名属性值描述
alignleft, center, right规定表格相对周围元素的对齐方式
border1 或 “”规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding像素值规定单元格边沿与其内容之间的空白，默认1像素
cellspacing像素值规定单元格之间的空白，默认2像素
width像素值或百分比规定表格的宽度

1.5 表格结构标签

使用场景：因为表格可能很长，为了更好的表示表格的语义，可以将表格分割成表格头部和表格主体两大部分。
在表格标签中，分别哟看那个：<thead>标签 表格的头部区域，<tbody>标签 表格的主体区域。这样可以更好的分清表结构。

  1. <thead></thead>:用于定义表格的头部。<thead>内部必须拥有<tr>标签。一般是位于第一行
  2. <tbody></tbody>:用于定义表格的主体，主要用于放数据本体。
  3. 以上标签都是放在<table></table>中

1.6 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

  1. 合并单元格格式
  2. 目标单元格
  3. 合并单元格的步骤
合并单元格格式
  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”
目标单元格：（写合并代码）
  • 跨行：最上侧单元格为目标单元格，写合并代码
  • 跨列：最左侧单元格为目标单元格，写合并代码
合并单元格三步曲：😎
  1. 先确定跨行还是跨列
  2. 找到目标单元格，写上合并方式=合并的单元格数量
<td colspan="2"> </td>
  1. 删除多余单元格

1.7 表格总结

  1. 表格的相关标签
  2. 表格的相关属性
  3. 合并单元格

4.9 列表标签

表格是用来显示数据的，那么列表就是用来布局的。
列表的最大特点就是整齐，整洁，有序，它作为布局会更加自由和方便。
根据使用情景不同，列表可以分为三大类：无序列表，有序列表和自定义列表。

1.1 无序列表（重点）

<ul>（unordered list）标签表示HTML页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用<li>标签定义。

<ul><li> 列表项1</li><li> 列表项2</li>...
</ul>
  1. 无序列表的各个列表之间没有顺序级别之分，是并列的。
  2. <ul> </ul> 中只能嵌套<li> </li>，直接在<ul> /<ul> 标签中输入其它标签或者文字的做法是不被允许的。
  3. <li>与</li>之间相当于一个容器，可以容纳所有元素。
  4. 无序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

1.2 有序列表（理解）

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。
在HTML标签中，<ol>（ordered list）标签用于定义有序列表，列表排序以数字来显示，并且使用<li>标签来定义列表项。

<ol><li> 列表项1</li><li> 列表项2</li>...
</ol>
  1. <ol> </ol> 中只能嵌套<li> </li>，直接在<ol> /<ol> 标签中输入其它标签或者文字的做法是不被允许的。
  2. <li>与</li>之间相当于一个容器，可以容纳所有元素。
  3. 有序列表会带有自己的样式属性，但在实际使用时，我们会使用CSS来设置。

1.3 自定义列表（重点）

自定义列表的使用场景
自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。
在HTML标签中，<dl>标签用于定义描述列表/定义列表（definition list），该标签会与<dt>定义项目/名字（definition title）和<dd>描述每一个项目/名字一起使用（definition description）
其基本语法如下：

<dl><dt>名词1</dt><dd>名词1解释1</dd><dd>名词1解释2</dd>
</dl>
  1. <dl> </dl>里面只能包含<dt>和<dd>。
  2. <dt>和<dd>个数没有限制，经常是一个<dt>对应多个<dd>。姐妹关系

1.4 列表总结

标签名定义说明
<ul></ul>无序标签里面只能包含li 没有顺序，使用较多。li里面可以包含任何标签
<ol></ol>有序标签里面只能包含li 有顺序，使用相对较少，li里面可以包含任何标签
<dl></dl>自定义列表里面只能包含dt和dd，dt和dd里面可以放任何标签

4.10 表单标签

现实中的表单，去办银行卡填写的单子。

1.1 为什么需要表单

使用表单目的是为了收集用户信息
在网页中，需要更用户进行交互，收集用户资料，此时就需要表单。

1.2 表单的组成

在HTML中，一个完整的表单通常由表单域，表单控件（也称为表单元素）和提示信息3个部分构成。

1.3 表单域

表单域是一个包含表单元素的区域。
在HTML标签中，<form>标签用于定义表单域，以实现用户信息的收集和传递。

<form>会把它范围内的表单元素信息提交给服务器

<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>

常用属性

属性属性值作用
actionurl地址用于指定接收并处理表单数据的服务器程序的url地址
methodget/post用于设置表单数据的提交方式，其取值为get或post
name名称用于指定表单的名称，以区分同一个页面中的多个表单域

要点：

  1. 写表单元素之前，应该有个表单域把它们进行包含
  2. 表单域是form标签

1.4 表单控件（表单元素）

在表单域中可以定义各种表单元素，这些表单元素就行允许用户在表单中输入或者选择的内容控件。

1.4.1 <input>表单元素

在英文单词中，input是输入的意思，而在表单元素中<input>标签用于收集用户信息。
在<input>标签中，包含一个type属性，根据不同的type属性值，输入字段拥有很多种形式（可以是文本字段，复选框，掩码后的文本控件，单选按钮，按钮等）。
<input type="属性值" />

  • <input />标签为单标签
  • type属性设置不同的属性值用来指定不同的控件类型

除type属性外，<input>标签还要其它很多属性，其常用属性如下：

属性属性值描述
name由用户自定义定义input元素的名称
value由用户自定义规定input元素的值
checkedchecked规定此input元素首次加载时应当被选中
maxlength正整数规定输入字段中的字符的最大长度
  1. name和value是每个表单元素都有的属性值，主要给后台人员使用
  2. name表单元素的名字，要求单选按钮和复选框要有相同的name值
  3. checked属性主要针对于单选按钮和复选框，主要作用——打开页面，就要可以默认选中某个表单元素。
  4. maxlength是用户可以在表单元素输入的最大字符数，一般较少使用
属性值描述
button定义可点击按钮（多数情况下，用于通过JavaScript启动脚本
checkbox定义复选框
file定义输入字段和“浏览”按钮，供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段，该字段中的字符被掩码
radio定义单选按钮
reset定义重置按钮。重置按钮会清除表单中的所有数据
submit定义提交按钮，提交按钮会把表单数据发送到服务器
text定义单行的输入字段，用户可以在其中输入文本。默认宽度为20个字符
1.4.2 <label>标签

<label>标签为input元素定义标签（标签）
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。

<label for = "sex"> female </label>
<input type = "radio" name = "sex" id = "sex" />
1.4.3 内容控件

在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单中输入或者选择的内容控件。

<select>表单元素

使用场景：在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，可以使用<select>标签控件定义下拉列表。
语法：

<select><option>选项1</option><option>....</option>...
</select>
  1. <select>中至少包含一对<option>
  2. 在<option>中定义selected = " selected"时，当前项即为默认选中项
<textarea>表单元素

使用场景：当用户输入内容较多的情况下，不能使用文本框表单了，此时可以使用<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
语法：

<textarea rows="3" cols="20">文本内容
</textarea>
  1. 通过<textarea>标签可以轻松地创建多行文本输入框
  2. cols=“每行中的字符数”，rows=“显示的行数”，在实际开发中不会使用，都是使用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>
</head><body><h4>人生得意需尽欢，莫使金樽空对月</h4><table width="600"><!-- 第一行 --><tr><td>性别：</td><td><input type="radio" name="women" id="nv"> <label for="nv"><img src="images/"></label> girl<input type="radio" name="women" id="cs"><label for="cs"><img src="images/"></label>woman</td></tr><!-- 第二行 --><tr><td>生日：</td><td><select><option>--请选择年份--</option><option>2025</option><option>2024</option><option>2023</option><option>2022</option></select><select><option>--请选择月份--</option><option>1</option><option>2</option><option>3</option><option>4</option></select><select><option>--请选择日--</option><option>5</option><option>6</option><option>7</option><option>8</option></select></td></tr><!-- 第三行 --><tr><td>所在地区</td><td><input type="text" value="Iceland"></td></tr><!-- 第四行 --><tr><td>婚姻状况：</td><td><input type="radio" name="emotion">inlove <input type="radio" name="emotion" checked="checked">nope<input type="radio" name="emotion">broken</td></tr><!-- 第五行 --><tr><td>学历：</td><td><input type="text" value="博士"></td></tr><!-- 第六行 --><tr><td>喜欢的类型：</td><td><input type="checkbox" name="love"> cute<input type="checkbox" name="love"> charm<input type="checkbox" name="love"> childsh<input type="checkbox" name="love" checked="checked"> all</td></tr><!-- 第七行 --><tr><td>自我介绍：</td><td><textarea>个人简介</textarea></td></tr><!-- 第八行 --><tr><td></td><td><input type="submit" value="免费注册"></td></tr><!-- 第九行 --><tr><td></td><td><input type="checkbox" checked="checked">我同意社区注册条款和会员加入标准</td></tr><tr><td></td><td><a href="#">我是会员，立即登录</a></td></tr><tr><td></td><td><h5>我承诺</h5><ul><li>I'm18</li><li>I'm serious</li><li>I'm sincerely</li></ul></td></tr></table>

相关文章：

前端学习记录之HTML

1. 网页 1.1 什么是网页 网站是指在因特网上根据一定的规则&#xff0c;使用HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页”&#xff0c;通常是HTML格式的文件&#xff0c;它要通过浏览器来阅读 网页是构成网站的基本元素。它通常由图片&#xff0c;…...

编程日记 2025/6/28 6:22:49

程序化广告行业（39/89）：广告投放的数据分析与优化秘籍

程序化广告行业&#xff08;39/89&#xff09;&#xff1a;广告投放的数据分析与优化秘籍 在程序化广告的领域中&#xff0c;数据分析与优化调整是实现精准投放、提升广告效果的核心环节。作为一名热衷于探索程序化广告的学习者&#xff0c;我希望通过这篇博客&#xff0c;和大…...

编程日记 2025/6/28 2:59:08

蓝桥杯 01游戏

问题描述 小蓝最近玩上了 01 游戏&#xff0c;这是一款带有二进制思想的棋子游戏。 游戏在一个大小为 N N 的棋盘上进行。棋盘上的每个位置都需要放置一个数字 0 或 1。初始情况下&#xff0c;棋盘上有一部分位置已经放置了固定的数字&#xff0c;玩家不可以更改这些位置。其…...

编程日记 2025/6/28 6:45:36

NoSQL 数据库的适用场景与局限性分析

NoSQL（Not Only SQL）数据库是一类非关系型数据库，通过灵活的数据模型和分布式架构解决传统关系型数据库在扩展性、性能和数据多样性上的瓶颈。以下从技术特性、适用场景、不适用场景及行业实践展开分析： 一、NoSQL数据库的核心技术特性 四大数据模型 文档型：以JSON/BSON格…...

编程日记 2025/6/28 1:19:22

个人网站：基于html、css、js网页开发界面

1、注册 <!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>注册页面</title><link rel&qu…...

编程日记 2025/6/28 7:17:07

嵌入式图像采集与显示系统实战详解：基于V4L2与Framebuffer的实现

在嵌入式Linux开发中&#xff0c;图像采集与显示是非常典型的一类应用场景。本文将基于 ARM9&#xff08;S3C2410&#xff09; 平台&#xff0c;深入讲解如何使用 V4L2 框架从 USB 摄像头采集图像数据&#xff0c;并通过 Framebuffer 接口实时显示到 LCD 屏幕。内容涵盖驱动架构…...

编程日记 2025/6/28 5:20:33

庙算兵棋推演AI开发初探（6-神经网络开发）

碎碎念&#xff1a; 老师让我和同学组队参加10月底截止报名的庙算比赛&#xff0c;我俩走运进了64强&#xff0c;打的过程中发现了一个重要问题——为什么别人总能打我&#xff0c;但是我都看不见&#xff01;就像玩dota被对面英雄莫名其妙单杀了但是他就一直隐身我都不知道怎…...

编程日记 2025/6/28 5:59:06

嵌入式硬件篇---嘉立创PCB绘制

文章目录 前言一、PCB绘制简介1.1绘制步骤1.1.1前期准备1.1.2原理图设计1.1.3原理图转PCB1.1.4PCB布局1.1.5布线1.1.6布线优化和丝印1.1.7制版 1.2原理1.2.1电气连接原理1.2.2信号传输原理1.2.3电源和接地原理 1.3注意事项1.3.1元件封装1.3.2布局规则1.3.3过孔设计1.3.4DRC检查…...

编程日记 2025/6/28 3:12:32

AI与.NET技术实操系列（四）：使用 Semantic Kernel 和 DeepSeek 构建AI应用

1. 引言 在人工智能技术飞速发展的今天&#xff0c;大型语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为智能应用开发的核心驱动力。从智能客服到自动化内容生成&#xff0c;LLMs的应用正在深刻改变我们的工作和生活方式。 对于.NET开发者而言&#xff0c;…...

编程日记 2025/6/27 21:44:49

Vue 组件 - Slot 内容分发

Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue组件 - Slot 内容分发 目录 Slot内容分发 旧版slot 单插槽 使用插槽 具名插槽 插槽实现导航 使用插槽优点 新版slot Or 插槽版抽屉 总结 Slot内容分发 混合父组件的内容和子组件自己模板 -- 内容分发 父组件模…...

编程日记 2025/6/28 1:19:18

Mysql之事务（下）

&#x1f3dd;️专栏&#xff1a;Mysql_猫咪-9527的博客-CSDN博客 &#x1f305;主页&#xff1a;猫咪-9527-CSDN博客 “欲穷千里目&#xff0c;更上一层楼。会当凌绝顶&#xff0c;一览众山小。” 目录 5. 事务的隔离级别与并发控制 5.1事务的隔离级别 5.2查看与设置事务的…...

编程日记 2025/6/28 7:15:47

LabVIEW液压控制系统开发要点

液压控制系统开发需兼顾高实时性、强抗干扰性和安全性&#xff0c;尤其在重工业场景中&#xff0c;毫秒级响应延迟或数据异常都可能导致设备损坏。本文以某钢厂液压升降平台项目为例&#xff0c;从硬件选型、控制算法、安全机制三方面&#xff0c;详解LabVIEW开发中的关键问题与…...

编程日记 2025/6/28 7:03:07

mybatis-genertor(代码生成)源码及扩展笔记

文章目录 生成过程MyBatisGenerator.generate()代码入口 pid0,id0context.generateFiles()代码 pid0,id1introspectedTable.getGeneratedJavaFiles() java部分生成 pid1,id11introspectedTable.getGeneratedXmlFiles() xml部分生成 pid1,id12这里是一波三连调用XMLMapperGenera…...

编程日记 2025/6/28 4:43:53

Mysql-数据库、安装、登录

一. 数据库 1. 数据库&#xff1a;DataBase&#xff08;DB&#xff09;&#xff0c;是存储和管理数据的仓库。 2. 数据库管理系统&#xff1a;DataBase Management System&#xff08;DBMS&#xff09;,操纵管理数据库的大型软件 3. SQL&#xff1a;Structured Query Language&…...

编程日记 2025/6/28 3:41:51

HTTP 请求方法

HTTP 请求方法 引言 HTTP（超文本传输协议）是互联网上应用最为广泛的网络协议之一。它定义了客户端与服务器之间通信的规则。HTTP请求方法，也称为HTTP动词，是客户端向服务器发送请求时使用的操作类型。本文将详细介绍HTTP请求方法的概念、分类、常用方法及其在实际应用中的…...

编程日记 2025/6/28 5:58:38

群体智能优化算法-算术优化算法（Arithmetic Optimization Algorithm, AOA，含Matlab源代码）

摘要 算术优化算法&#xff08;Arithmetic Optimization Algorithm, AOA&#xff09;是一种新颖的群体智能优化算法&#xff0c;灵感来源于加、减、乘、除四种基本算术运算。在优化过程中&#xff0c;AOA 通过乘除操作实现全局探索&#xff0c;通过加减操作强化局部开发&#…...

编程日记 2025/6/28 1:19:38

4.1-python操作wrod/pdf 文件

1.读取word文件 首先安装软件包 pip3 install python-docx from docx import Documentimport os path os.path.join(os.getcwd(),你的文档名字.docx)# 加载文档 doc Document(path)# 遍历数据 for p in doc.paragraphs:print(p.text)# 遍历文档中所有表格 for t in doc.t…...

编程日记 2025/6/28 6:01:51

C# 窗体应用(.FET Framework) 线程操作方法

一、Thread线程使用方法 初始化方法 Thread th1; th1 new Thread(方法名); th1.IsBackground true; th1.Start();传参 ///定义一个object接受参数的方法 private void Test(object n){string str1 n as string; MessageBox.Show(str1); }// 调用方法 Thread th2 string s…...

编程日记 2025/6/28 4:14:34

vscode/cursor编辑器中vue3文件里面的css不能注释解决办法

升级了cursor后发现css或者html里面的代码不能单行注释了&#xff0c;真的很烦人&#xff0c;找了很多解决办法&#xff0c;还是定位到插件上&#xff0c;有一个vue的插件&#xff0c;把它禁用掉就可以注释了&#xff0c;然后再把这个插件启用&#xff0c;就可以使用了&#xf…...

编程日记 2025/6/28 3:48:38

Jenkins详细安装配置部署

Jenkins是一款流行的开源持续集成/持续交付(CI/CD)工具&#xff0c;可以实现自动化构建、测试和部署软件。下面是Jenkins的详细安装、配置和部署过程。 安装Jenkins 1. 安装Java Jenkins运行需要Java环境&#xff0c;因此需要先安装Java。具体安装方式根据不同的操作系统有所…...

编程日记 2025/6/28 5:23:15

《Linux运维总结：基于银河麒麟V10+ARM64架构CPU源码编译部署单实例redis7.2.6》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、环境信息 环境信息如下&#xff1a; 主机IP 操作系统 Redis版本 CPU架构 192.168.1.111 K…...

编程日记 2025/6/28 3:34:35

音视频开发---常用工具

一、VLC播放器 1. 简介 VLC多媒体播放器（最初命名为VideoLAN客户端）是VideoLAN计划的多媒体播放器。它支持众多音频与视频解码器及文件格式，并支持DVD影音光盘、VCD影音光盘和各类流式协议。它也能作为unicast或multicast的流式服务器在IPv4或IPv6的高速连接下使用。 它融…...

编程日记 2025/6/28 4:08:58

Java 大视界 -- 基于 Java 的大数据分布式计算在基因测序数据分析中的性能优化（161）

&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎来到 青云交的博客&#xff01;能与诸位在此相逢&#xff0c;我倍感荣幸。在这飞速更迭的时代&#xff0c;我们都渴望一方心灵净土&#xff0c;而 我的博客 正是这样温暖的所在。这里为你呈上趣味与实用兼具的知识&#xff0c;也…...

编程日记 2025/6/28 5:39:14

关于跨域与.NET的处理方案

在 Web 开发里&#xff0c;浏览器的同源策略是一项关键的安全机制。同源指的是两个 URL 的协议、域名和端口都相同。当浏览器从一个源&#xff08;域名、协议、端口&#xff09;的网页去请求另一个源的资源时&#xff0c;就会产生跨域问题。例如&#xff0c;从 http://www.exam…...

编程日记 2025/6/28 6:54:05

中级：Maven面试题精讲

一、引言 在Java开发中&#xff0c;Maven作为一款强大的项目管理和构建工具&#xff0c;被广泛应用于项目构建、依赖管理和插件机制等方面。面试官通过相关问题考察候选人对Maven核心功能的理解和实际应用能力&#xff0c;以及在复杂项目场景下合理配置和优化Maven的能力。本文…...

编程日记 2025/6/28 2:21:04

MySQL与Redis数据一致性保障方案详解

前言 在现代分布式系统中&#xff0c;MySQL和Redis的结合使用非常普遍。MySQL作为关系型数据库负责持久化存储&#xff0c;而Redis则作为高性能缓存层提升系统的响应速度。然而&#xff0c;在这种架构下&#xff0c;如何保证MySQL与Redis之间的数据一致性是一个重要的挑战。本…...

编程日记 2025/6/27 2:17:14

外观模式详解

以下是一个结合外观模式解决实际开发问题的Java实现案例&#xff0c;涵盖复杂系统整合、接口简化、版本兼容等场景需求&#xff0c;附带逐行中文注释&#xff1a; 场景描述 开发一个智能家居控制系统&#xff0c;需整合多个子系统&#xff1a; 灯光系统&#xff1a;多房间灯光…...

编程日记 2025/6/28 4:23:31

JavaScript单例模式

单例模式保证一个类仅有一个实例&#xff0c;并提供一个访问它的全局访问点。 用一个变量来标志是否创建过对象&#xff0c;如果是&#xff0c;则在下次直接返回这个已经创建好的对象&#xff0c;示例代码如下&#xff1a; 单例模式的核心思想是让指定的类只存在唯一一个实例&…...

编程日记 2025/6/28 5:57:47

Kong网关研究

目录 概述 部署kong docker服务 kong初始化与启动 验证 部署konga 网关功能 JWT认证 若依的鉴权认证 kong的JWT支持 限流 黑名单 概述 Kong网关基于OpenResty&#xff0c;而OpenResty基于Nginx&#xff0c;Nginx本身是性能强大的方向代理与web容器&#xff0c;Ope…...

编程日记 2025/6/28 4:36:11

LangChain 结构化输出：用 Pydantic + PydanticOutputParser 驯服 LLM 的“自由发挥”

目录 一、Pydantic 二、PydanticOutputParser 1、为什么需要 PydanticOutputParser&#xff1f; 2、Pydantic和PydanticOutputParser核心区别 3、Pydantic的不足 &#xff08;1&#xff09;无法直接解析非结构化文本 &#xff08;2&#xff09;缺乏对 LLM 输出的适配性 …...

编程日记 2025/6/28 5:51:56

source（WEB）

##解题思路 首先打开kali&#xff0c;使用dirsearch扫描下网站目录&#xff0c;发现网站有.git源码泄露 dirsearch -u URL 接着使用wget将源码下载到本地&#xff08;尝试过使用githack&#xff0c;但是得到的信息是flag不在这&#xff09; wget -r URL/.git/ 接着cd到wget的…...

编程日记 2025/6/28 3:36:07

【蓝桥杯】单片机设计与开发，温度传感器DS18B20

一、温度传感器概述 结构图 二、通信过程 三、onewire单总线协议概述 四、单总线的工作原理 黑粗线是单片机发送的&#xff0c;浅的是s18b20回应的 五、温度传感器的应用 六、onewire 七、课后习题...

编程日记 2025/6/28 5:36:22

trae.ai 编辑器：前端开发者的智能效率革命

一、为什么我们需要更智能的编辑器&#xff1f; 作为从业5年的前端开发者&#xff0c;我使用过从Sublime到VSCode的各种编辑器。但随着现代前端技术的复杂度爆炸式增长&#xff08;想想一个React组件可能涉及JSX、CSS-in-JS、TypeScript和GraphQL&#xff09;&#xff0c;传统…...

编程日记 2025/6/28 5:48:45

【FPGA实战】基于DE2-115实现数字秒表

【FPGA实战】基于DE2-115实现数字秒表 一、项目概述二、层次化设计架构三、核心模块实现原理1. 时钟分频模块(clock_divider.v)2. 按键处理模块2.1 消抖(debounce .v)2.2 边沿检测(edge_detector .v) 3. 时间计数模块(time_counter .v)4. 显示驱动模块(seven_seg_display.v)5.顶…...

编程日记 2025/6/28 5:59:29

动态规划入门：从记忆化搜索到递推

本篇笔记基于b站灵茶山艾府。 198. 打家劫舍 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋。每间房内都藏有一定的现金&#xff0c;影响你偷窃的唯一制约因素就是相邻的房屋装有相互连通的防盗系统&#xff0c;如果两间相邻的房屋在同一晚上被小偷闯入&#xff0c;系统…...

编程日记 2025/6/28 3:09:41

Linux 入门：基础开发工具（上）vim,gcc/g++,make/makefile

目录 一.软件包管理器 一&#xff09;.软件包 二&#xff09;.安装软件 三&#xff09;.删除软件 二.编辑器vim 一&#xff09;.vim的基本介绍 1.正常/普通/命令模式(Normal mode) 2.插入模式(Insert mode) 3.底行模式(last line mode) 二&#xff09;.vim的基本操作 …...

编程日记 2025/6/28 6:19:28

golang 的channel

理解 Go 语言的 Channel Channel 是 Go 语言中用于 goroutine 之间通信和同步的重要机制。通过 channel&#xff0c;goroutine 可以安全地交换数据&#xff0c;避免了共享内存带来的竞态条件和内存一致性问题。 1. Channel 的基本概念 Channel 是一个先进先出&#xff08;FI…...

编程日记 2025/6/27 17:50:25

HarmonyOS Next～鸿蒙元服务开发指南：核心功能与实践

HarmonyOS Next&#xff5e;鸿蒙元服务开发指南&#xff1a;核心功能与实践 一、元服务核心概念 原子化服务定义 元服务&#xff08;原子服务&#xff09;是鸿蒙系统的核心架构单元&#xff0c;具备独立业务能力的轻量化服务模块&#xff0c;支持免安装、跨设备调用和智能分发…...

编程日记 2025/6/28 4:10:36

stm32面试

数据结构相关问题 stm32面试 数据结构相关问题 目录基础数据结构树与图排序与查找算法 Linux相关问题Linux系统基础Linux命令与脚本Linux网络与服务 操作系统相关问题操作系统基础概念操作系统调度算法操作系统同步与通信 STM32相关问题STM32硬件基础STM32编程与开发STM32应用与…...

编程日记 2025/6/28 2:27:31

构建大语言模型应用：句子转换器（Sentence Transformers）（第三部分）

本系列文章目录 简介数据准备句子转换器&#xff08;本文&#xff09;向量数据库搜索与检索大语言模型开源检索增强生成评估大语言模型服务高级检索增强生成 RAG 在之前的博客中&#xff0c;我们学习了为RAG&#xff08;检索增强生成&#xff0c;Retrieval Augmented Generati…...

编程日记 2025/6/27 19:41:30

新能源汽车空调系统（R134A）性能评估（一）

国内外主流空调系统厂家&#xff1a;贝尔、德尔福、空调国际、法雷奥、电装、松芝、杰信、新电、豫新等 泛亚汽车的空调电子部是比较优秀的整车空调研发团队。 空调系统综合试验台架是一套由试验室、风量测定装置、空气调和器、空气温度测定装置、湿度测定装置、加热器试验辅助…...

编程日记 2025/6/28 6:39:21

STRUCTBERT：将语言结构融入预训练以提升深度语言理解

【摘要】最近&#xff0c;预训练语言模型BERT&#xff08;及其经过稳健优化的版本RoBERTa&#xff09;在自然语言理解&#xff08;NLU&#xff09;领域引起了广泛关注&#xff0c;并在情感分类、自然语言推理、语义文本相似度和问答等各种NLU任务中达到了最先进的准确率。受到E…...

编程日记 2025/6/27 17:50:47

MCP协议的Streamable HTTP：革新数据传输的未来

引言 在数字化时代&#xff0c;数据传输的效率和稳定性是推动技术进步的关键。MCP&#xff08;Model Context Protocol&#xff09;作为AI生态系统中的重要一环&#xff0c;通过引入Streamable HTTP传输机制&#xff0c;为数据交互带来了革命性的变化。本文将深入解读MCP协议的…...

编程日记 2025/6/28 2:00:44

基于 RK3588 的 YOLO 多线程推理多级硬件加速引擎框架设计（代码框架和实现细节）

一、前言 接续上一篇文章&#xff0c;这个部分主要分析代码框架的实现细节和设计理念。 基于RK3588的YOLO多线程推理多级硬件加速引擎框架设计&#xff08;项目总览和加速效果&#xff09;-CSDN博客https://blog.csdn.net/plmm__/article/details/146542002?spm1001.2014.300…...

编程日记 2025/6/28 5:43:16

stm32 can 遥控帧的问题

STM32单片机使用CAN协议进行通信 引用这个博客的一段话 CAN的遥控帧&#xff08;Remote Frame&#xff09;的主要作用是请求其他节点发送具 有特定ID的数据帧。具体来说&#xff0c;当一个节点需要从另一个节点获取数 据时&#xff0c;它可以发送一个遥控帧&#xff0c;而不是…...

编程日记 2025/6/28 1:19:30

机器人基础知识-1

1.六轴机器人中的六轴是什么&#xff1f; 第一轴&#xff08;J1&#xff09;&#xff1a;底座旋转 控制机器人整体绕垂直轴旋转&#xff08;左右摆动&#xff09;&#xff0c;决定工作范围的水平方向。 第二轴&#xff08;J2&#xff09;&#xff1a;下臂前后摆动 驱动机器人的…...

编程日记 2025/6/28 4:01:40

JAVA- 锁机制介绍 进程锁

进程锁 基于文件的锁基于Socket的锁数据库锁分布式锁基于Redis的分布式锁基于ZooKeeper的分布式锁 实际工作中都是集群部署&#xff0c;通过负载均衡多台服务器工作&#xff0c;所以存在多个进程并发执行情况&#xff0c;而在每台服务器中又存在多个线程并发的情况&#xff0c;…...

编程日记 2025/6/28 4:53:25

如何在WordPress中强制用户使用强密码？

在如今网络安全备受关注的环境下&#xff0c;弱密码问题不容忽视。很多用户习惯在多个网站使用相同且简单的密码&#xff0c;这样一来&#xff0c;若不强制他们在 WordPress 网站上使用强密码&#xff0c;网站的安全性就会受到威胁。尤其对于在线商店、会员网站、多作者博客等站…...

编程日记 2025/6/28 2:56:34

鸿蒙NEXT开发Base64工具类（ArkTs）

import util from ohos.util;/*** Base64 工具类* author: 鸿蒙布道师* since: 2025/03/31*/ export class Base64Util {/*** 创建 Base64Helper 实例* returns Base64Helper 实例*/private static createBase64Helper(): util.Base64Helper {return new util.Base64Helper();}…...

编程日记 2025/6/28 5:04:28

基于HUTOOL实现RSA工具类

一、前言&#xff1a;用 Hutool 简化 RSA 加密开发&#xff0c;提升代码安全与效率 在当今数据安全至关重要的时代&#xff0c;RSA 非对称加密作为保护敏感信息的核心技术&#xff0c;广泛应用于通信加密、数字签名、密钥交换等场景。然而&#xff0c;手动实现 RSA 算法涉及复…...

编程日记 2025/6/28 2:02:04