【海贼王航海日志：前端技术探索】HTML你学会了吗？(一)

目录

1 -> HTML概念

2 -> HTML结构

2.1 -> 认识HTML标签

2.2 -> HTML文件基本结构 

2.3 -> 标签层次结构

3 -> 快速生成代码框架

4 -> HTML常见标签

4.1 -> 注释标签

4.2 -> 标题标签

4.3 -> 段落标签

4.4 -> 换行标签

4.5 -> 格式化标签

4.6 -> 图片标签 

4.7 -> 超链接标签

5 -> 关于目录结构

1 -> HTML概念

HTML，全称为HyperText Markup Language，即超文本标记语言，是一种用于创建网页的标准标记语言。HTML允许用户在网页中加入各种元素，如文本、图像、链接、表格、列表、视频等，从而构建出结构化的文档。

2 -> HTML结构

2.1 -> 认识HTML标签

HTML代码是由“标签”构成的。

形如：

<body>hello</body>
  • 标签名(body)放到<>中。
  • 大部分标签成对出现。<body>为开始标签，</body>为结束标签。
  • 少数标签只有开始标签，称为“单标签”。
  • 开始标签和结束标签之间，写的是标签的内容。
  • 开始标签中可能会带有“属性”。id属性相当于给这个标签设置了一个唯一的标识符(身份证号码)。 
<body id="myId">hello</body>

2.2 -> HTML文件基本结构 

<html><head><title>我的第一个页面</title></head><body>One Piece</body>
</html>
  • <html>标签是整个HTML文件的根标签(最顶层标签)。
  • <head>标签中写页面的属性。
  • <body>标签中写的是页面上显示的内容。
  • <title>标签中写的是页面的标题。

2.3 -> 标签层次结构

  • 父子关系
  • 兄弟关系
<html><head><title>我的第一个页面</title></head><body>One Piece</body>
</html>

其中：

  • <head>和<body>是<html>的子标签(<html>就是<head>和<body>的父标签)。
  • <title>是<head>的子标签。<head>是<title>的父标签。
  • <head>和<body>之间是兄弟关系。

可以使用F12或者右键审查元素，开启开发者工具，切换到元素标签，就可以看到页面结构的细节了。

标签之间的结构关系，构成了一个DOM树。

DOM是Document Object Mode(文档对象模型)的缩写。

3 -> 快速生成代码框架

在Visual Studio Code中创建文件xxx.html，直接输入！，并且按tab键，此时就可以自动生成代码的主体框架。

<!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></body>
</html>

细节解释：

  • <!DOCTYPE html>：称为DTD(文档类型定义)，描述当前的文件是一个HTML5的文件。

  • <html lang="en">：lang属性表示当前页面是一个“英语页面”。(有些浏览器会根据此处的声明提示是否进行自动翻译)

  • <meta charset="UTF-8">：描述页面的字符编码方式。没有这一行可能会导致中文乱码。

  • <meta name="viewport" content="width=device-width, initial-scale=1.0">：name="viewport"其中viewport指的是设备的屏幕上能用来显示网页的哪一块区域；content="width=device-width, initial-scale=1.0"在设置可视区和设备宽度等宽，并设置初始缩放为不缩放。(这个属性对于移动端开发更重要一些)。

4 -> HTML常见标签

4.1 -> 注释标签

注释不会显示在界面上。目的是提高代码的可读性。

<!-- 我是注释 -->

ctrl + / 快捷键可以快速进行注释/取消注释。

注释的原则

  • 要和代码逻辑一致。
  • 尽量使用中文。
  • 不要传递负能量。 

4.2 -> 标题标签

标题标签有六个，从h1到h6。数字越大，则字体越小。

<!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><h1>One Piece</h1><h2>One Piece</h2><h3>One Piece</h3><h4>One Piece</h4><h5>One Piece</h5><h6>One Piece</h6>
</body></html>

展示结果： 

4.3 -> 段落标签

把一段比较长的文本粘贴到HTML中，会发现并没有分成段落。

例如以下文本：

css中的1px并不等于设备的1px
  在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，
苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。
  还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。
  在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /
  独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该 设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。 
<!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><p>css中的1px并不等于设备的1px在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西。</p>
</body></html>

展示结果：

  • p标签表示一个段落。
<p>这是一个段落</p>

通过p标签改进上述代码，每个段落放到p标签中。

<!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><p>css中的1px并不等于设备的1px</p><p>在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。</p><p>还有一个因素也会引起css中px的变化，那就是用户缩放。例如，当用户把页面放大一倍，那么css中1px所代表的物理像素也会增加一倍；反之把页面缩小一倍，css中1px所代表的物理像素也会减少一倍。关于这点，在文章后面的部分还会讲到。</p><p>在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 /独立像素。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。但是要注意的是，devicePixelRatio在不同的浏览器中还存在些许的兼容性问题，所以我们现在还并不能完全信赖这个东西，具体的情况可以看下这篇文章。</p>
</body></html>

展示结果：

注意：

  • p标签之间存在一个空隙。
  • 当前的p标签描述的段落，前面还没有缩进(可以使用CSS)。
  • 自动根据浏览器宽度来决定排版。
  • html内容首尾处的换行、空格均无效。
  • 在html中文字之间输入的多个空格只相当于一个空格。
  • html中直接输入换行不会真的换行，而是相当于一个空格。 

4.4 -> 换行标签

<br>是break的缩写。表示换行。

  • <br>是一个单标签(不需要结束标签)。
  • <br>标签不像<p>标签那样带有一个很大的空隙。
  • <br/>是规范写法。不建议写成<br>。
<!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><p>在css中我们一般使用px作为单位，<br/>在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。其他品牌的移动设备也是这个道理。例如安卓设备根据屏幕像素密度可分为ldpi、mdpi、hdpi、xhdpi等不同的等级，分辨率也是五花八门，安卓设备上的一个css像素相当于多少个屏幕物理像素，也因设备的不同而不同，没有一个定论。</p>
</body></html>

展示结果：

4.5 -> 格式化标签

  • 加粗：<strong>标签和<b>标签。
  • 倾斜：<em>标签和<i>标签。
  • 删除线：<del>标签和<s>标签。
  • 下划线：<ins>标签和<u>标签。
<!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><strong>strong 加粗</strong><b>b 加粗</b><em>倾斜</em><i>倾斜</i><del>删除线</del><s>删除线</s><ins>下划线</ins><u>下划线</u>
</body></html>

展示结果：

使用CSS也可以实现类似的效果。实际的开发中以CSS方式为主。

4.6 -> 图片标签 

<img>标签必须带有src属性。表示图片的路径。 

<img src="MyImg.jpg">

此时要把MyImg.jpg这个图片文件放到和html中的同级目录中。

<img>标签的其他属性：

  • alt：替换文本。当文本不能正确显示的时候，会显示一个替换的文字。
  • title：提示文本。鼠标放到图片上，就会有显示。
  • width/height：控制宽度高度。宽度和高度一般改一个就行，另外一个会等比例缩放。否则就会图片失衡。
  • border：边框，参数是宽度的像素。但是一般使用CSS来设定。
<img src="MyImg.jpg" alt="路飞" title="这是五档路飞" width="500px" height="800px"
border="5px">

注意：

  1. 属性可以有多个，不能写到标签之前。
  2. 属性之间用空格分割，可以是多个空格，也可以是换行。
  3. 属性之间不分先后顺序。
  4. 属性使用“键值对”的格式来表示。

4.7 -> 超链接标签

  • href：必须具备，表示点击后会跳转到哪个页面。
  • target：打开方式。默认是_self。如果是_blank则用新的标签页打开。
<a href="http://www.baidu.com">百度</a>

链接的几种形式：

  • 外部链接：href引用其他网站的地址
<a href="http://www.baidu.com">百度</a>
  • 内部链接：网站内部页面之间的链接。写相对路径即可。

在一个目录中，先创建一个1.html，再创建一个2.html。

<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>
  • 空链接：使用#在href中占位。
<a href="#">空链接</a>
  • 下载链接：href对应的路径是一个文件。(可以使用zip文件)
<a href="test.zip">下载文件</a>
  • 网页元素链接：可以给图片等任何元素添加链接(把元素放到<a>标签中)。
<a href="http://www.baidu.com"><img src="MyImg.jpg" alt="">
</a>
  • 锚点链接：可以快速定位到页面中的某个位置。
<a href="#one">第一集</a>
<a href="#two">第二集</a>
<a href="#three">第三集</a><p id="one">第一集剧情 <br>第一集剧情 <br>...
</p><p id="two">第二集剧情 <br>第二集剧情 <br>...
</p><p id="three">第三集剧情 <br>第三集剧情 <br>...
</p>

禁止<a>标签跳转：

<a href="javascript:void(0);"> 
或者
<a href="javascript:;">

5 -> 关于目录结构

对于一个复杂的网站，页面资源很多，这种情况可以使用目录把这些文件整理好。

1. 相对路径：以html所在的位置为基准，找到图片位置。

  • 同级路径：直接写文件名即可(或者./)。
  • 下一级路径：image/1.jpg。
  • 上一级路径：../image/1.jpg。

2. 相对路径：一个完整的磁盘路径，或者网络路径。例如：

  • 磁盘路径："D:\oneDrive\桌面\前端技术.png"。
  • 网络路径：https://images0.cnblogs.com/blog/130623/201407/300958470402077.png。

代码示例

1. 使用相对路径：创建一个image目录和html同级，并放入一个MyImg2.jpg。

<img src="image/MyImg2.jpg" alt="">

2. 使用相对路径：在image目录中创建一个html，并访问上级目录的MyImg.jpg。 

<img src="../MyImg.jpg" alt="">

3. 使用绝对路径：最好使用/，不要使用\。 

<img src="D:/MyImg.jpg" alt="">

4. 使用绝对路径：使用网络路径。 

<img src="https://images0.cnblogs.com/blog/130623/201407/300958475557219.png"
alt="">


 

感谢各位大佬支持！！！

互三啦！！！

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

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

相关文章

ES(ElasticSearch)倒排索引

ES(ElasticSearch)倒排索引

目录 正排与倒排索引 1.正排索引 作用&#xff1a; 优点&#xff1a; 缺点&#xff1a; 2.倒排索引 原理&#xff1a; 倒排索引的构建流程&#xff1a; 倒排索引的搜索流程&#xff1a; 优点&#xff1a; 缺点&#xff1a; 3. 应用场景 倒排索引中有几个非常重要的概念…
阅读更多...
【二叉树的锯齿形层序遍历】python刷题记录

【二叉树的锯齿形层序遍历】python刷题记录

R2-树与二叉树篇 层序遍历双端队列deque # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.right right class Solution:def zigzagLevelOr…
阅读更多...
【读代码】高斯掩模

【读代码】高斯掩模

目录 问题&#xff1a; 主要功能&#xff1a; 问题&#xff1a; 看不懂实现的功能 主要功能&#xff1a; 从输出张量中提取与边界框对应的区域&#xff0c;并计算该区域与高斯核之间的均方误差&#xff08;MSE&#xff09;损失 例子 假设我们有以下输入&#xff1a; boxe…
阅读更多...
我的创作纪念日（一）——Giser？Noder？不如“Computer”

我的创作纪念日（一）——Giser？Noder？不如“Computer”

目录 Giser&#xff1f;Noder&#xff1f;不如“Computer” 一、根源&#xff1a;保持学习习惯的刚需 二、机缘&#xff1a;processOn的另类替代 三、日常&#xff1a;对技术栈丰富的思考 四、成就&#xff1a;保持心态健康的活着 五、憧憬&#xff1a;能一直心态健康的活…
阅读更多...
前端实现【 批量任务调度管理器 】demo优化

前端实现【 批量任务调度管理器 】demo优化

一、前提介绍 我在前文实现过一个【批量任务调度管理器】的 demo&#xff0c;能实现简单的任务批量并发分组&#xff0c;过滤等操作。但是还有很多优化空间&#xff0c;所以查找一些优化的库&#xff0c; 主要想优化两个方面&#xff0c; 上篇提到的&#xff1a; 针对 3&…
阅读更多...
CSS技巧专栏：一日一例 14-纯CSS实现模拟水波波动填充按钮特效

CSS技巧专栏：一日一例 14-纯CSS实现模拟水波波动填充按钮特效

CSS技巧专栏：一日一例 14-纯CSS实现模拟水波波动填充按钮特效 大家好，今天介绍一个在网上很常见的模拟水波波动要灌满按钮的动画效果，效果下面图所示。 本例图片 案例分析 我们沿着Z轴从上到下数一下一共有几个层： 文字层：白色文字阴影的黑色文字，当鼠标移动上来时候…
阅读更多...
黑马点评--给店铺类型查询添加缓存

黑马点评--给店铺类型查询添加缓存

controller/ShopTypeController.java /*** 店铺分类查询&#xff0c;用于展示首页头部店铺分类* return*/GetMapping("list")public Result queryTypeList() {return typeService.queryList();} service/IShopTypeService.java Result queryList(); service/impl/S…
阅读更多...
fatal: Could not read from remote repository. 解决方法

fatal: Could not read from remote repository. 解决方法

问题描述&#xff1a; Git : fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists。 解决方法&#xff1a; 当在网上尝试大量方法仍然失败的时候&#xff0c;不妨试试这个方法。 在 github 上&…
阅读更多...
探索 Redis 不同集群架构的性能与应用

探索 Redis 不同集群架构的性能与应用

1. 引言 Redis的集群配置成为了提高数据可靠性和服务可用性的关键。本文将带领大家了解Redis的四种主要集群架构&#xff0c;并重点分析哨兵模式和Redis Cluster架构和优势。 2. Redis的四种集群架构 2.1 单实例Redis 使用单个 Redis 实例提供服务。适用于小规模应用&#…
阅读更多...
论文阅读：Deformable DETR: Deformable Transformers for End-to-End Object Detection

论文阅读：Deformable DETR: Deformable Transformers for End-to-End Object Detection

论文阅读&#xff1a;Deformable DETR: Deformable Transformers for End-to-End Object Detection Deformable DETR: 基于稀疏空间采样的注意力机制&#xff0c;让DCN与Transformer一起玩&#xff01; - 知乎 (zhihu.com) 【Deformable DETR 论文源码解读】Deformable Trans…
阅读更多...
The Llama 3 Herd of Models.Llama 3 模型第1,2,3部分全文

The Llama 3 Herd of Models.Llama 3 模型第1,2,3部分全文

现代人工智能(AI)系统是由基础模型驱动的。本文提出了一套新的基础模型，称为Llama 3。它是一组语言模型，支持多语言、编码、推理和工具使用。我们最大的模型是一个密集的Transformer，具有405B个参数和多达128K个tokens的上下文窗口。本文对Llama 3进行了广泛的实证评价。我们…
阅读更多...
【error】AttributeError: module ‘cv2.dnn‘ has no attribute ‘DictValue‘（库冲突）

【error】AttributeError: module ‘cv2.dnn‘ has no attribute ‘DictValue‘（库冲突）

conda list conda remove opencv pip uninstall opencv-python conda list pip 同时卸载两个库 pip uninstall opencv-contrib-python opencv-python 没有and 直接写库名 module ‘cv2.dnn‘ has no attribute ‘DictValue‘解决办法_module cv2.dnn has no attribute d…
阅读更多...
Linux - 环境变量、程序地址空间、进程地址空间及Linux2.6内核进程调度队列

Linux - 环境变量、程序地址空间、进程地址空间及Linux2.6内核进程调度队列

目录 环境变量 基本概念 常见环境变量 查看环境变量的方法 测试PATH 测试HOME 测试SHELL 和环境变量相关的命令 环境变量的组织方式 通过代码获取环境变量 通过系统调用获取环境变量 程序地址空间 进程地址空间 Linux2.6内核进程调度队列 一个CPU拥有一个runqueue 优先级 活…
阅读更多...
谈一谈爬虫开发工程师

谈一谈爬虫开发工程师

爬虫就只是抓数据的吗&#xff1f;并不是&#xff0c;爬虫工程师的工作不再仅仅是抓取数据&#xff0c;还需要处理其他各种复杂问题&#xff0c;今天我们就来聊聊爬虫开发工程师。 一、 爬虫开发工程师工作内容 爬虫开发工程师是负责编写和维护网络爬虫程序的专业人员。他们的…
阅读更多...
【多模态大模型】 ALBEF in NeurIPS 2021

【多模态大模型】 ALBEF in NeurIPS 2021

一、引言 论文&#xff1a; Align before Fuse: Vision and Language Representation Learning with Momentum Distillation 作者&#xff1a; Salesforce Research 代码&#xff1a; ALBEF 特点&#xff1a; 该方法使用ViT进行图像特征提取&#xff0c;提出将BERT分两部分&am…
阅读更多...
Cocos Creator2D游戏开发(3)-飞机大战(1)-背景动起来

Cocos Creator2D游戏开发(3)-飞机大战(1)-背景动起来

资源见: https://pan.baidu.com/s/1cryYNdBOry5A4YEEcLwhDQ?pwdzual 步骤 1, 让背景动起来 2, 玩家飞机显现,能操控,能发射子弹 3.敌机出现 4. 碰撞效果(子弹和敌机,敌机和玩家) 5. 积分和游戏结束 6. 游戏存档,对接微信小游戏,保存历史最高分 7. cocos发布到微信小游戏 资源…
阅读更多...
探索Python的进度条神器：tqdm

探索Python的进度条神器：tqdm

文章目录 探索Python的进度条神器&#xff1a;tqdm一、背二、tqdm简介三、安装tqdm四、tqdm的五个简单使用示例五、tqdm在不同场景下的应用六、常见问题及解决方案七、总结 探索Python的进度条神器&#xff1a;tqdm 一、背 景&#xff1a;为什么选择tqdm&#xff1f; 在Python…
阅读更多...
苦学Opencv的第十四天：人脸检测和人脸识别

苦学Opencv的第十四天：人脸检测和人脸识别

Python OpenCV入门到精通学习日记&#xff1a;人脸检测和人脸识别 前言 经过了十三天的不懈努力&#xff0c;我们终于也是来到了人脸检测和人脸识别啦&#xff01;相信大家也很激动吧。接下来我们开始吧&#xff01; 人脸识别是基于人的脸部特征信息进行身份识别的一种生物识…
阅读更多...
Spring 常用的三种拦截器详解

Spring 常用的三种拦截器详解

前言 在开发过程中&#xff0c;我们常常使用到拦截器来处理一些逻辑。最常用的三种拦截器分别是 AOP、 Interceptor 、 Filter&#xff0c;但其实很多人并不知道什么时候用AOP&#xff0c;什么时候用Interceptor&#xff0c;什么时候用Filter&#xff0c;也不知道其拦截顺序&am…
阅读更多...
spring —— 事务管理器

spring —— 事务管理器

事务管理主要针对数据源进行操作&#xff1a;在数据库方面&#xff0c;通过 TransactionManager 事务管理器进行管理&#xff0c;表明一旦出现错误&#xff0c;该数据源的所有数据全部复原。那么数据库如何判断是否发生了错误呢&#xff1f;这就需要在代码方面&#xff0c;通过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023