【前端】HTML常用标签

因为想当个全栈,所以巩固了一下HTML与CSS和JS基础,这一篇博客是HTML部分

文章目录

  • HTML 基础标签 1
    • HTML 基础框架
    • HTML 基础标签
        • 语义标签
        • 文本格式化标签
        • `div` 与 `span` 标签
        • 图像标签
        • 超链接
        • 特殊字符
  • 基础标签 2 | 表格
    • 表格的使用
        • 表格标签
        • 表格属性
        • 表格的头部与身体
    • 合并单元格
  • 基础标签3 | 列表
    • 1. 无序列表
    • 2. 有序列表
    • 3. 自定义列表
  • 基础标签4 | 表单
    • 1. 表单域
    • 2. 表单中常用标签
        • 1. `input` 标签
        • 2. `<label>` 标签
        • 3. `<select>` | 选择标签
        • 4. `textarea` | 文本域
  • HTML5新特性1 | 新增基础标签
    • 1. 新增的布局标签
  • H5新增标签2 | 视频标签
      • 视频标签的使用
      • 解决浏览器不支持视频类型
      • 视频封面演示
  • H5新增标签3 | 音频标签
      • 使用方式
      • 兼容低版本浏览器
  • H5新增标签4 | 输入框新属性

HTML 基础标签 1

查资料去 [W3C]

HTML 基础框架

<!-- 以下代码声明文档类型,这里表名该文档采用的是HTML5,这个标签不属于HTML标签的一部分,但是不建议省略-->
<!DOCTYPE html>
<!-- 以下代码表名当前网页的语言类型,即使设置为其它语言,也可以显示中文,但是可能会触发一些比如翻译之类的插件-->
<html lang="zh-CN"><!-- 以下标签是头部标签, 是HTML必须要有的标签,有且只有一个 --><head><!-- 万国码:包含非常非常多语言--><meta charset="UTF-8"><!-- 以下代码是文档名称,会显示在浏览器的标签栏内 --><title>Hello world</title></head><body></body>
</html>

HTML 基础标签

语义标签
  1. 标题标签
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
  1. 段落标签
  1. 段落和段落之间会有一个较大的空隙
  2. 段落的宽度会根据浏览器的宽度而变化,越窄段落的上下长度越长,左右宽度越窄
<p>这是一个自然段。</p><p>这又是一个自然段。</p>
<p>换行还是一个自然段。</p>
  1. 换行标签
  1. 换行没有大空隙,但是会另起一行来写

> `br` 是一个单标签123<br/>456
文本格式化标签
  1. 加粗
<strong>我加粗啦</strong>
<b>我加粗啦</b>
  1. 下划线
<ins>我也有下划线啦~</ins>
<u>我有下划线</u>
  1. 斜体
<rm>我也倾斜啦</rm> 
<i>我是斜体</i>
  1. 删除线
<del>我身上也是</del>
<s>我身上有一条删除线</s>
divspan 标签
  1. divspan 都是一个盒子
  2. 一行只能放一个div
<div>我是一个div标签,我一个人占一行</div>
<span>我是一个span,我一行可以显示多个</span>
图像标签

img是一个单标签

  1. src:是图像标签的必须属性,指向一张图片的地址或者URL
  2. alt:当找不到src中指向的图像时,就会显示这段文字
  3. title:当鼠标经过图像时候,就会显示这个标题
  4. width:图像的宽度(写入一个数字,单位是像素)
  5. height:图像的高度(写入一个数字,单位是像素)
  6. border:外边框大小,推荐在style或者class中设置
<!-- 下面是显示一张图片的基础操作 -->
<img src="img/img1.png" width="200"/><!-- 如果显示的图片有问题,我们可以采用img的alt属性来替换图像,如下所示 -->
<img src="img/imgxxx.png" alt="我显示不出来啦~" width="200"/><!-- 当鼠标经过图像时候,就会显示图片的标题 -->
<img src="img/img1.png" width="200" title="我是标题"/><!-- 下面图片有一个很大的黑色外框 -->
<img src="img/img1.png" width="200" border="15"/>

由于我并不存在一张名叫imgxxx.png的图片,所以以上代码在浏览器中的效果如下图所示:

在这里插入图片描述

为了方便演示,我给图片加了宽度,并且图与图之间加了换行。

超链接

a标签内部不仅可以嵌入文字,还可以嵌入图片等
若是指向的地址是个内部或外部地址,则会跳转到该地址
若是指向地址是一个资源,则会下载该资源(图片的话一般是打开一个新的标签页显示,可以右键保存,这是现在浏览器的特点)

  1. 外部链接

href:必要属性,指向一个地址,必须以http://开头
target:打开标签的方式,默认是_self,也就是本页打开,可以改成_blank,新页面内打开

<!-- 以下代码会在当前页面打开百度 -->
<a href="http://www.baidu.com">点我打开百度</a>
<!-- 以下代码会在新的页面打开百度 -->
<a href="http://www.baidu.com" target="_blank">点我在新的页面打开百度</a>
  1. 内部链接

内部标签的href指向一个文件即可
target标签同样生效

<a href="_HTML_01.1-语义标签.html">点我进入语义语法介绍页面</a>
  1. 空链接

若是还没有决定跳转到哪里,可以先在href中写一个#,表示不跳转。

<a href="#">点我没啥效果,我哪里都不去</a>
  1. 指向一个资源
  <!-- 点我下载资源 --><a href="img/a.zip">点我下载资源</a>
  1. 指向页面内的一个锚点

我们可以在页面的某一个资源商写上id='xxx',然后再a标签的href中指向这个元素,那么当我们点击这个a标签的时候,我们的页面会直接跳转到这个元素所在的位置。

注意:不能是class或者其他

<a href="#jump">点我跳转到锚点</a>
<h2 id="jump">我是一个锚点</h2>
特殊字符

空格 &nbsp;
小于号<&lt;
大于号>&gt;

基础标签 2 | 表格

表格的使用

表格标签
  1. table:一个表格
  2. tr:一行
  3. td:一个单元格
  4. th:表头单元格(与td同级),里面的文字会居中加粗显示
<!-- 以下代码表示一个表格 -->
<table><tr><th>我是标题1</th><th>我是标题2</th><th>我是标题3</th></tr><!-- 以下代码表示一行--><tr><td>我是一个单元格1.1</td><td>我是一个单元格1.2</td><td>我是一个单元格1.3</td></tr><tr><td>我是一个单元格2.1</td><td>我是一个单元格2.2</td><td>我是一个单元格2.3</td></tr>
</table>

以上代码在浏览器中的表现如下:

在这里插入图片描述

表格的具体属性如下:

在这里插入图片描述

  1. 黄色部分是table标签
  2. 三个蓝色部分(代码中只有两个)是tr标签
  3. 第一行的白色部分对应着th标签
  4. 其余白色部分对应着td标签
表格属性
属性属性值说明
alignleft、center、right文字对齐方式,左中右
border1""规定表格单元是否拥有边框,默认是"",表示没有边框
cellpadding像素值规定单元边沿与其内容之间的空白,默认1像素
cellspacing像素值规定单元格之间的空白,默认2像素
width像素值或百分比规定表格的宽度(百分比的话是相对父元素)

表格还是上面的表格,我对table标签做出如下修改后,表现如下图:

<table border="1" cellpadding="5" cellspacing="0" width="100%"><!-- 表格内容省略,与上面代码一致 -->
</table>

在这里插入图片描述

可以看到,宽度是100%,单元格和单元格之间的空隙是0,单元格与文字之间间距也很大,有边框,且文字居中显示。

我没有验证align属性,因为align属性已经过时了,在HTML5中不生效,事实上,以上的5个属性均已失效,只不过除了align以外剩下的4个还可以生效。

表格的头部与身体
标签说明
thead头部
tbody身体

合并单元格

  1. rowspan="合并单元格的个数":跨行合并
  2. colspan="合并单元格的个数":跨列合并
<table border="1 gray"><thead><tr><th>我是标题1</th><th colspan="2">我是标题2,我合并了单元格</th></tr></thead><tbody><!-- 以下代码表示一行--><tr><td rowspan="2">我是一个单元格1.1</td><td>我是一个单元格1.2</td><td>我是一个单元格1.3</td></tr><tr><td>我是一个单元格2.2</td><td>我是一个单元格2.3</td></tr></tbody>
</table>

以上代码在浏览器中的效果如下图所示:

在这里插入图片描述

文章目录

  • HTML 基础标签 1
    • HTML 基础框架
    • HTML 基础标签
        • 语义标签
        • 文本格式化标签
        • `div` 与 `span` 标签
        • 图像标签
        • 超链接
        • 特殊字符
  • 基础标签 2 | 表格
    • 表格的使用
        • 表格标签
        • 表格属性
        • 表格的头部与身体
    • 合并单元格
  • 基础标签3 | 列表
    • 1. 无序列表
    • 2. 有序列表
    • 3. 自定义列表
  • 基础标签4 | 表单
    • 1. 表单域
    • 2. 表单中常用标签
        • 1. `input` 标签
        • 2. `<label>` 标签
        • 3. `<select>` | 选择标签
        • 4. `textarea` | 文本域
  • HTML5新特性1 | 新增基础标签
    • 1. 新增的布局标签
  • H5新增标签2 | 视频标签
      • 视频标签的使用
      • 解决浏览器不支持视频类型
      • 视频封面演示
  • H5新增标签3 | 音频标签
      • 使用方式
      • 兼容低版本浏览器
  • H5新增标签4 | 输入框新属性

基础标签3 | 列表

列表可以分为三大类:

  1. 无序列表
  2. 有序列表
  3. 自定义列表

1. 无序列表

  1. 无序列表的哥哥列表项之间没有顺序级别之分,是并列的
  2. <ul>标签中只能放<li>,不能单独书写文字或者其他标签
  3. <li>标签内可以放任何元素
  4. 无序列表会带有自己的样式属性,比如前面的小黑点(如下图)
<ul><li>列表项1</li><li>列表项2</li><li>列表项3</li><!-- 省略... -->
</ul>

以上代码在浏览器中的表现如下:

在这里插入图片描述

2. 有序列表

  1. <ol>标签中只能放<li>,不能单独书写文字或者其他标签
  2. <li>标签内可以放任何元素
  3. 有序列表会带有自己的样式属性,但是在实际开发中我们会使用css来进行设置
<!-- 明星排行榜 -->
<ol><li>刘德华</li><li>谢霆锋</li><!-- 省略更多... -->
</ol>

以上代码在浏览器中的表现如下:

在这里插入图片描述

3. 自定义列表

自定义列表常用于对属于或名词进行解释和描述,定义列表的列表项前没有任何项目符号。
<dl>:自定义列表最外层标签
<dt>:一个小标题
<dd>:列表项

注意事项:

  1. dl白起爱你中只能包含<dt><dl>
  2. <dt><dl>标签是兄弟关系
  3. <dt><dl>的个数没有限制
<dl><dt>我是小标题1</dt><dd>我是列表项1</dd><dd>我是列表项1</dd>
</dl>

以上代码在浏览器中的表现如下:

在这里插入图片描述

文章目录

  • HTML 基础标签 1
    • HTML 基础框架
    • HTML 基础标签
        • 语义标签
        • 文本格式化标签
        • `div` 与 `span` 标签
        • 图像标签
        • 超链接
        • 特殊字符
  • 基础标签 2 | 表格
    • 表格的使用
        • 表格标签
        • 表格属性
        • 表格的头部与身体
    • 合并单元格
  • 基础标签3 | 列表
    • 1. 无序列表
    • 2. 有序列表
    • 3. 自定义列表
  • 基础标签4 | 表单
    • 1. 表单域
    • 2. 表单中常用标签
        • 1. `input` 标签
        • 2. `<label>` 标签
        • 3. `<select>` | 选择标签
        • 4. `textarea` | 文本域
  • HTML5新特性1 | 新增基础标签
    • 1. 新增的布局标签
  • H5新增标签2 | 视频标签
      • 视频标签的使用
      • 解决浏览器不支持视频类型
      • 视频封面演示
  • H5新增标签3 | 音频标签
      • 使用方式
      • 兼容低版本浏览器
  • H5新增标签4 | 输入框新属性

基础标签4 | 表单

表单是用于收集用户信息

表单通常由以下三部分组成:

  1. 表单域(整个表单)
  2. 表单控件(也称为表单元素,就是输入框、选择框、按钮之类的)
  3. 提示信息(label信息等)

1. 表单域

表单域就是form标签

<form>会把它范围内的白哦氮元素信息提交给浏览器

表单域含有以下属性:

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

我们在使用VUE时候会用到一些第三方UI空间,比如Element-UI,其中的<el-form>也是一个表单域。

<!-- 下面是一个空的表单域 -->
<form action="demo.php" method="post" name="name1"></form>

2. 表单中常用标签

1. input 标签

input标签具有以下几个属性

  1. type:定义输入框的类型
  2. name:可以理解成是给不同输入框取个名字以方便取值,也可以理解成是对单选框或者复选框进行分组(多个选择框使用相同的名字可以形成互斥)
  3. value:有一些表格,比如复选框选择爱好,那么他们框框本身应该有一个值(比如:足球、篮球、羽毛球),就是用value来进行定义
  1. type | 输入框的类型(必须有的属性)
属性值说明
button定义可点击按钮
checkbox定义复选框
file定义输入字段和"浏览"按钮,供文件上传
hidden定义隐藏的输入字段
image定义图像形式的提交按钮
password定义密码字段。该字段中的字符将会被隐藏
radio定义单选按钮
reset定义重置按钮。重置按钮会清除表单中的所有数据
submit定义提交按钮
text定一单行的输入字段,用户可在其中输入文本。默认宽度为20个字符
<form method="post" name="name2"><input type="button"/><br><input type="checkbox"/><br><input type="file"/> <br><input type="hidden"/><br><input type="image"/><br><input type="password"/><br><input type="radio"/><br><input type="reset"/><br><input type="submit" value="注册"/><br><input type="text" placeholder="请输入内容"/><br>
</form>

以上代码在浏览器中的表现如下:

在这里插入图片描述

以上代码中的单选框、复选框都不会生效,我们可以通过为他们添加name的方式区分它们,同时若是多个单选框使用同一个name,那么他们之间可以形成互斥。

  1. name | 输入框的名称或者分组
<form method="post" name="name2"><input type="radio" name="radio1"/><input type="radio" name="radio1"/><input type="radio" name="radio1"/>
</form>

这么写就可以实现单选,它们在浏览器中的表现如下:

在这里插入图片描述

  1. value | 输入框的值

以上代码即使我们选择了第二个复选框,他也是没有意义的,那么我们应该考虑如何让选择框本身有值,给它定义value即可,看以下代码:

同时比如文本输入框我们也可以在JS中通过这个元素获取它的值

一些按钮的value值用于设置其中显示的文字能容

<h2>我的爱好是</h2>
<form method="post" name="name2">足球<input type="radio" name="radio1" value="足球"/>篮球<input type="radio" name="radio1" value="篮球"/>羽毛球<input type="radio" name="radio1" value="羽毛球"/>
</form>

以上代码中我们选择第一个单选框,则是选择了篮球,选择第二个单选框,则是选择了足球(具体是使用单选框还是复选框根据情景进行判断)

在这里插入图片描述

  1. checked | 针对单选框或者复选框的默认选中事件

若是想单选框或者复选框在一开始就被选中,那么可以使用这个属性(比如用户注册的时候我默认是男性)

<h2>请选择你的性别</h2>
<form method="post" name="name2"><input type="radio" name="radio1" value="" checked/><input type="radio" name="radio1" value=""/>
</form>

以上代码在浏览器中的表现如下(为了方便区分我将第三部分的代码的初始状态也截图进去了。

在这里插入图片描述

  1. maxlength | 针对文本输入框的最大输入长度

比如我设置是20,那么用户最大输入20个字符,将不能继续输入了

2. <label> 标签

label标签为input元素定义注解(标签)

与vue中的方式不同,这里是通过label的for属性和input的id属性绑定

<form><label for="sex"></label><input type="checkbox" id="sex">
</form>
3. <select> | 选择标签
  1. select中至少包含两个option
  2. option中可以加一个selected属性,那么该值默认处于选定状态
籍贯
<select><option>山东</option><option>北京</option><option>江苏</option><option>上海</option>
</select>

在这里插入图片描述

4. textarea | 文本域

它可以写很多行字,但是文本框可以写很多行。

相关属性或方法:

  1. cols="每行的字符数"
  2. rows="显示的行数"
    实际开发中多用css来控制
  <textarea rows="20" cols="50">预显示文字</textarea>

以上代码在浏览器中的表现如下:

在这里插入图片描述

HTML5新特性1 | 新增基础标签

以下内容会有一些兼容性问题,基本都需要IE9以上版本。

因为DIV是没有特殊语义的,所以HTML5新增了一些带语义的标签

1. 新增的布局标签

标签说明
header头部标签
nav导航标签
article内容标签
section定义文档某个区域
aside侧边栏标签
footer尾部标签
  • 这种语义化标准主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中,需要把这些元素转换为块级元素
  • 移动端更喜欢用这些标签

H5新增标签2 | 视频标签

视频:video

video是一个行内块元素,可以设置宽高,如果不能使用margin: 0 auto来居中

浏览器支持说明

浏览器MP4WebMOgg
IE××
Chrome
Firefox√ (从Firefox21版本开始,Linux从30版本开始)
Safari××
Opera√(从Opera25版本开始)

相关属性

属性说明是否可简写备注
controls显示进度条、播放暂停按钮等空间(不点开始播放不会自动播放)
autoplay自动播放,进入页面后开始播放
muted静音播放(有controls的话可以解除静音)
loop循环播放
preload规定是否预加载视频(如果有autoplay,就忽略该属性)auto(预加载视频)none(不应加载视频)
src视频链接×
poster视频封面图×

视频标签的使用

<video src="" controls></video>

在这里插入图片描述

不加controls="controls"则没有进度条、暂停之类的按钮,可能造成无法播放。

解决浏览器不支持视频类型

<video controls><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg">您的浏览器不支持播放此视频。
</video>

视频封面演示

<video src="video/video.mp4" controls poster="img/img3.png"></video>

以上代码在我没播放的时候就会显示poster中指定的图片,如下所示(随便找了张图):

在这里插入图片描述

H5新增标签3 | 音频标签

浏览器支持说明

浏览器MP4WebMOgg
IE××
Chrome
Firefox
Safari×
Opera

相关属性

属性说明是否可简写备注
controls显示进度条、播放暂停按钮等空间(不点开始播放不会自动播放)
autoplay自动播放,进入页面后开始播放谷歌浏览器不支持
loop循环播放
src音频链接×
muted静音播放(有controls的话可以解除静音)
preload规定是否预加载视频(如果有autoplay,就忽略该属性)auto(预加载视频)none(不应加载视频)

使用方式

<audio src="video/maobuyi.mp3" controls></audio>

兼容低版本浏览器

<audio controls><source src="music.ogg" type="audio/ogg"><source src="music.mp3" type="audio/mpeg">您的浏览器不支持播放此视频。
</audio>

H5新增标签4 | 输入框新属性

<input type="email">

H5新增输入框属性说名

属性值说明
email用户输入必须为Email类型
url用户输入必须为URL类型
date用户输入必须为日期类型
time用户输入必须为时间类型
month用户输入必须为月类型
week用户输入必须为周类型
number用户输入必须为数字类型
tel手机号码
search搜索框
color生成一个颜色选择表单
属性值说明
required必须填写,不能为空
placeholder提示文本
autofocus自动聚焦属性,页面加载完成后自动聚焦在这里
autocomplete(off/on)当用户在字段开始键入时,浏览器就之前键入过的值,应该显示出在字段中填写的选项。(默认是开启状态,可以设置为off关闭)需要放在表单内,同时加上name属性。
multiple可以多选文本提交

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/275232.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用tree命令自动保存文件层级结构

tree命令的使用 为了将上图左侧的文件目录&#xff0c;生成上图右侧中的文件夹结构列表&#xff0c;保存在txt中&#xff0c;使用了如下cmd命令&#xff1a; C:\armadillo-12.8.0>tree .>list.txt以上tree命令分为3部分&#xff1a; tree 命令. 在当前目录>list.tx…

JavaEE:网络编程

网络编程&#xff1a;通过代码完成基于网络的跨主机通信 跨主机通信方式&#xff1a; 1.TCP/IP网络 2.蓝牙通信 3.近场通信NFC 4.毫米波通信&#xff1a;功率高&#xff0c;带宽高&#xff0c;抗干扰能力差 其中TCP/IP网络是日常编程中最常涉及到的&#xff0c;最通用的跨主机通…

docker私有仓库-harbor的搭建

docker 官方提供的私有仓库 registry&#xff0c;用起来虽然简单 &#xff0c;但在管理的功能上存在不足。 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器&#xff0c;harbor使用的是官方的docker registry(v2命名是distribution)服务去完成。harbor在docker di…

Java项目:基于springboot实现的OA协同办公系统(源码+数据库+毕业论文)

一、项目简介 本项目是一套基于Springbootvue实现的付费自习室系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、…

Processing基本形状内容和实例

一、Processing的基本形状内容和实例 1.Processing有一组专门绘制基本图形得图案。像线条这样的基本图形可以被连接起来创建更为复杂得形状&#xff0c;例如一片叶子或者一张脸。 2.为了绘制一条直线&#xff0c;我们需要四个参数&#xff0c;两个用于确定初始位置&#xff0c;…

Xterminal:未来的终端体验

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; 开发环境篇 ✨特色专栏&#xff1a; M…

【vue.js】文档解读【day 4】 | 事件处理

如果阅读有疑问的话&#xff0c;欢迎评论或私信&#xff01;&#xff01; 文章目录 事件处理前言监听事件内联事件处理器方法事件处理器方法与内联事件判断在内联处理器中调用方法在内联事件处理器中访问事件参数修饰符事件修饰符按键修饰符常规按键别名系统按键别名组合按键ex…

(C语言)strcpy与strcpy详解,与模拟实现

目录 1. strcpy strcpy模拟实现&#xff1a; 实现方法1&#xff1a; 实现方法2&#xff1a; 2. strcat strcat模拟实现&#xff1a; 1. strcpy 作用&#xff1a;完成字符串的复制。 头文件&#xff1a;<string.h> destination是字符串要复制到的地点&#xff0c;s…

【轮式平衡机器人】——TMS320F28069片内外设之eCAP

引入 TMS320F28069的eCAP&#xff08;增强型捕获模块&#xff09;是一个强大的外设&#xff0c;用于精确测量和捕获输入信号的事件和时间戳。 在电机控制、传感器数据采集和信号处理等应用中&#xff0c;eCAP模块可以用于测量霍尔传感器、编码器或其他数字输入信号的周期、频…

开源爬虫技术在金融行业市场分析中的应用与实战解析

一、项目介绍 在当今信息技术飞速发展的时代&#xff0c;数据已成为企业最宝贵的资产之一。特别是在${industry}领域&#xff0c;海量数据的获取和分析对于企业洞察市场趋势、优化产品和服务至关重要。在这样的背景下&#xff0c;爬虫技术应运而生&#xff0c;它能够高效地从互…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的农作物害虫检测系统(深度学习模型+UI界面+训练数据集)

摘要&#xff1a;开发农作物害虫检测系统对于提高农业生产效率和作物产量具有关键作用。本篇博客详细介绍了如何运用深度学习构建一个农作物害虫检测系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5&#xff0…

docker容器镜像管理+compose容器编排(持续更新中)

目录 一、 Docker的基本组成 二、 容器和镜像的关系 2.1 面向对象角度 2.2 从镜像容器角度 三、 容器命令 3.1 使用Ubuntu 3.1.1 下载镜像 3.1.2 新建和启动容器 run 3.1.3交互式 compose编排与部署 1. docker-compose部署 2. docker-compose.yml模板 …

Git版本工具学习

目录 版本控制git配置工作区域文件状态git对象模型基础命令.gitignore忽略文件IDEA集成Git 版本控制 本地版本控制&#xff1a;在本地记录每一次版本更新。 集中版本控制&#xff1a;版本数据都保存在单一服务器&#xff0c;不联网就看不到版本信息。SVN 分布式版本控制&…

《详解:鸿蒙NEXT开发核心技术》

我们现在都知道鸿蒙作为一个国产的全栈自研系统&#xff0c;经过国家主推后。已经引起人们很大的关注&#xff0c;其中作为开发者来说&#xff1b;许多一线大厂已经与其华为鸿蒙展开原生应用的合作了&#xff0c;目前了解到已经有200家。而之后出现了很多的高薪鸿蒙开发岗位&am…

[密码学]OpenSSL实践篇

背景 最近在写Android abl阶段fastboot工具&#xff0c;需要我在Android代码中实现一些鉴权加解密相关的fastboot命令&#xff0c;里面用到了OpenSSL。我们先来实践一下OpenSSL在Linux系统中的指令。 OpenSSL官方网站&#xff1a;OpenSSL 中文手册 | OpenSSL 中文网 1. 查看…

mybatis-plus整合spring boot极速入门

使用mybatis-plus整合spring boot&#xff0c;接下来我来操作一番。 一&#xff0c;创建spring boot工程 勾选下面的选项 紧接着&#xff0c;还有springboot和依赖我们需要选。 这样我们就创建好了我们的spring boot&#xff0c;项目。 简化目录结构&#xff1a; 我们发现&a…

C语言:内存函数

目录 1.memcpy2.memmove3.memset4.memcmp5.atoi 1.memcpy void * memcpy ( void * destination, const void * source, size_t num ); 函数memcpy从source的位置开始向后复制num个字节的数据到destination指向的内存位置这个函数再遇到\0时不会停下来如果source和destination有…

哪个骨传导蓝牙耳机的好?独家揭秘六大选购技巧

在科技飞速前进的今天&#xff0c;骨传导蓝牙耳机以独特的听觉技术逐渐进入大众视野&#xff0c;赢得了众多消费者的青睐。作为一名资深的数码爱好者&#xff0c;我最近频繁地收到朋友们的咨询&#xff0c;他们希望了解哪个骨传导蓝牙耳机的好&#xff1f;对于初入数码圈的朋友…

zabbix 7.0编译部署教程

zabbix 7.0编译部署教程 2024-03-08 16:50乐维社区 zabbix7.0 alpha版本、beta版本已经陆续发布&#xff0c;Zabbix7.0 LTS版本发布时间也越来越近。据了解&#xff0c;新的版本在性能提升、架构优化等新功能方面有非常亮眼的表现&#xff0c;不少小伙伴对此也已经跃跃欲试。心…

ThreeJs 射线拾取不准确设置

欢迎关注进来点个关注; 关注获取更多咨询!关注获取答案! 1、效果图如下: 2、问题描述:点击一开始无法获取当前的位置,官方推荐直接使用 mouseClick.x = (event.offsetX / window.innderWidth) * 2 - 1; mouseClick.y = -(event.offsetY / window.innderHeight) * 2 + 1;…