前端基础技术全解析：从HTML前端基础标签语言开始，逐步深入CSS样式修饰、JavaScript脚本控制、Ajax异步通信以及WebSocket持久通信

目录

前言：

1.前端技术html简单了解：

1.1HTML代码是由标签构成的。

1.2.HTML 文件基本结构

1.3.HTML 常见标签

标题标签:

段落标签: p

文本格式化标签

图片标签：

超链接标签: a

测试代码：

展示效果：

表单标签（可以将前端数据传送到后端）

将前端数据传送到后端的测试代码：

效果：

2.css扫盲

2.1.基本语法规范：

2.2.测试代码：

2.3.效果展示

3.js扫盲

3.1.使用js给按钮添加点击事件

测试代码：

效果展示

3.2、使用js获取以及设置一个页面控件（普通的控件以及输入框）的内容

测试代码：

效果展示：

4.前端技术ajax简单了解

五子棋注册页面测试代码：

运行效果：

5.websocket

测试代码：

展示效果：

6.Ajax和websocket的关系：

6.1、定义与原理

6.2、通信方式与实时性

6.3、数据传输效率

6.4、应用场景

6.5.兼容性与关系

前言：

本文主要讲解了关于一些前端的基础知识，用来前端的扫盲，能够对于前端有一个大致的认识，不至于对前端如何运行，代码都一窍不通。下面是本文的主要讲解方向：

  • HTML:标签语言，渲染前端网页的语言
  • CSS:层看样式表，对html标签进行样式修饰，让页面控件更加好看
  • JS:脚本语言，在前端web这里控制页面的渲染
  • AJAX:异步的http客户端，向服务器发送http请求的
  • WebSocket:创建一个websocket请求，请求服务器建立websocket长连接，进行持久通信。

这里我们从0开始，一步一步了解前端的基础知识。

1.前端技术html简单了解：

1.1HTML代码是由标签构成的。

形如：

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

1.2.HTML 文件基本结构

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

1.3.HTML 常见标签

标题标签:

h1-h6 有六个, 从 h1 - h6. 数字越大, 则字体越小.

<h1>代表的是标题标签，后面数字越大，最后在界面上显示的字体大小就越小，呈反比。

<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>

段落标签: p

把一段比较长的文本粘贴到 html 中, 会发现并没有分成段落. 在html中使用标签括起一个段落进行换行。当然也 可以在段落内使用<br/>标签进行换行操作。

例如以下文本:

<p>段落，
在html中一般的回车并不起作用，会被解释成为一个空格<br/>但是br不一样，br标签的作用就是换行。
</p>

效果如下：

文本格式化标签

  • 加粗: strong 标签 和 b 标签
  • 倾斜: em 标签 和 i 标签
  • 删除线: del 标签 和 s 标签 下
  • 划线: ins 标签 和 u 标签
<p><b>比如b标签就是加粗</b></p>
<p><i>比如i标签就是斜体</i></p>
<p><s>比如s标签就是删除线</s></p>
<p><u>比如u就是下划线</u></p>

效果如下： 

图片标签：

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

  • alt: 替换文本. 当文本不能正确显示的时候, 会显示一个替换的文字.
  • title: 提示文本. 鼠标放到图片上, 就会有提示.
  • width/height: 控制宽度高度. 高度和宽度一般改一个就行, 另外一个会等比例缩放. 否则就会图片失衡.
  • border: 边框, 参数是宽度的像素. 但是一般使用 CSS 来设定.

因为当前页面是在我的桌面文件里面的，而我采用的图片也是桌面上的，因此在同一路径下，直接./加图片名就可以加载了。

超链接标签: a

  • href: 必须具备, 表示点击后会跳转到哪个页面.
  • target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开.

这里我们根据自己学到的知识，自己简单编写一个前端界面：

测试代码：
 

<html><head><meta charset="utf-8"><title>学习页面</title></head><body><h1>Hello World</h1><h2>Hello World</h2><img src='./1.jpg' width="300px"><a href="https://www.baidu.com">这是一个链接，可以跳转到百度</a></body>    
</html>

展示效果：

点开链接之后，就直接从当前页面跳转到百度，因为没有设置target打开方式，默认就是从当前页面打开！

表单标签（可以将前端数据传送到后端）

表单是让用户输入信息的重要途径. 分成两个部分:

  1. 表单域: 包含表单元素的区域. 重点是 form 标签.
  2. 表单控件: 输入框 , 提交按钮等. 重点是 input 标签.
<input type="text" placeholder="input标签默认是文本框"> <br/> 
<input type="password" placeholder="type属性为password是密码框"> <br/> 
<input type="radio" name="sex">type属性为radio是单选框,name属性相同则默认为同一组-男 <br/> 
<input type="radio" name="sex" checked="checked">type属性为radio是单选框-女<br/> 
<input type="checkbox"> checkbox是复选框-吃饭 <br/> 
<input type="checkbox"> checkbox是复选框-睡觉 <br/> 
<input type="checkbox"> checkbox是复选框-打游戏<br/> 
<input type="checkbox" id="testid"> 
<label for="testid">label标签for属性与对应的输入框id对应起来，这时候点击文字也能选中</label><br/> 
<input type="button" value="button是普通按钮" onclick="alert('alert是提示框调用函数')"><br/> 
<input type="submit" value="submit是提交按钮">点击这里就会向服务器提交表单域中的表单数据<br/> 
<input type="file" value="file是文件选择按钮框"><br/> 
<input type="reset" value="reset是清空按钮，会清空表单域的所有数据"><br>

将前端数据传送到后端的测试代码：

<html><head><meta charset="utf-8"><title>学习页面</title></head><body><h1>Hello World</h1><h2>Hello World</h2><img src='./1.jpg' width="300px"><a href="https://www.baidu.com">这是一个链接，可以跳转到百度</a><form action="http://123.249.125.60:8085/login"method="post"><input type="text" name="uesrname"><input type="password" name="password"><input type="submit" name="submit" value="提交"></form></body>    
</html>

效果：

我们通过这个模块，就可以将前端输入的数据传送到指定的服务器上了！ 

这样body就可以提取我们在前端界面输入的信息了！

2.css扫盲

CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离。

CSS 就是 "东方四大邪术" 之化妆术.

2.1.基本语法规范：

选 择 器 + { 一 条 / N 条 声 明 }

  • 选 择 器 决 定 针 对 谁 修 改 ( 找 谁 )
  • 声 明 决 定 修 改 啥. ( 干 啥 )
  • 声 明 的 属 性 是 键 值 对. 使 用 ; 区 分 键 值 对 , 使 用 : 区 分 键 和 值.

2.2.测试代码：

<html><head><meta charset="utf-8"><title>学习页面</title><style>h1 {color: red;font-size: 20px;}</style></head><body><h1>Hello World</h1><h2>Hello World</h2><img src='./1.jpg' width="300px"><a href="https://www.baidu.com">这是一个链接，可以跳转到百度</a><form action="http://123.249.125.60:8085/login"method="post"><input type="text" name="uesrname"><input type="password" name="password"><input type="submit" name="submit" value="提交"></form></body>    
</html>

2.3.效果展示

3.js扫盲

3.1.使用js给按钮添加点击事件

测试代码：
 

<html><head><meta charset="utf-8"><title>学习页面</title><style>h1 {color: red;font-size: 20px;}</style></head><body><h1>Hello World</h1><h2 id="h2_title">Hello World</h2><img src='./1.jpg' width="300px"><a href="https://www.baidu.com">这是一个链接，可以跳转到百度</a><form action="http://123.249.125.60:8085/login"method="post"><input type="text" name="uesrname"><input type="password" name="password"><input type="submit" name="submit" value="提交"></form><button onclick="test()"> 普通的button </button></body>    <script>function test(){//alert("你好！！！");var h2 = document.getElementById("h2_title");alert(h2.innerHTML);h2.innerHTML = "Hello Kehan!"}</script>
</html>

效果展示

点击确定按钮之后，就会更改我们所设定的内容。

3.2、使用js获取以及设置一个页面控件（普通的控件以及输入框）的内容

我们通过输入输入框的数据，并点击确认按钮，来获取输入框里面的内容。

测试代码：

<html><head><meta charset="utf-8"><title>学习页面</title><style>h1 {color: red;font-size: 20px;}</style></head><body><h1>Hello World</h1><h2 id="h2_title">Hello World</h2><img src='./1.jpg' width="300px"><a href="https://www.baidu.com">这是一个链接，可以跳转到百度</a><form action="http://123.249.125.60:8085/login"method="post"><input type="text" id="uesrname" name="uesrname"><input type="password" name="password"><input type="submit" name="submit" value="提交"></form><button onclick="test()"> 普通的button </button></body>    <script>function test(){//alert("你好！！！");//var h2 = document.getElementById("h2_title");//alert(h2.innerHTML);//h2.innerHTML = "Hello Kehan!"var input = document.getElementById("uesrname");alert(input.value);input.value = "";}</script>
</html>

效果展示：

4.前端技术ajax简单了解

注意我们这里的Ajax的使用使用的是jequery的Ajax，这一版本的Ajax更方便使用。

这里我们使用五子棋注册页面为例。

  1. 通过ajax向后台发送用户注册请求
  2. 如果请求失败，则清空两个输入框内容，并提示错误原因；
  3. 如果请求成功，则跳转到登录页面

五子棋注册页面测试代码：
 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册</title><link rel="stylesheet" href="./css/common.css"><link rel="stylesheet" href="./css/login.css">
</head>
<body><div class="nav">网络五子棋对战游戏</div><div class="login-container"><!-- 登录界面的对话框 --><div class="login-dialog"><!-- 提示信息 --><h3>注册</h3><!-- 这个表示一行 --><div class="row"><span>用户名</span><input type="text" id="user_name" name="username"></div><!-- 这是另一行 --><div class="row"><span>密码</span><input type="password" id="password" name="password"></div><!-- 提交按钮 --><div class="row"><!-- 1. 给按钮添加点击事件，调用注册函数 --><button id="submit" onclick="reg()">提交</button></div></div></div> <script src="js/jquery.min.js"></script><script>//1. 给按钮添加点击事件，调用注册函数//2. 封装实现注册函数function reg() {//  1. 获取两个输入框空间中的数据，组织成为一个json串var reg_info = {username: document.getElementById("user_name").value,password: document.getElementById("password").value};console.log(JSON.stringify(reg_info));//  2. 通过ajax向后台发送用户注册请求$.ajax({url : "/reg",type : "post",data : JSON.stringify(reg_info),success : function(res) {if (res.result == false) {//  4. 如果请求失败，则清空两个输入框内容，并提示错误原因document.getElementById("user_name").value = "";document.getElementById("password").value = "";alert(res.reason);}else {//  3. 如果请求成功，则跳转到登录页面alert(res.reason);window.location.assign("/login.html");}},error : function(xhr) {document.getElementById("user_name").value = "";document.getElementById("password").value = "";alert(JSON.stringify(xhr));}})}</script>
</body>
</html>

运行效果：

注册用户成功，并成功跳转到登录界面。

5.websocket

简单使用用例：

在index.html中创建一个websocket通信，从输入框中获取数据发送给服务器，得到响应后，展示在页面中

测试代码：
 

<html><head><meta charset="utf-8"><title>学习页面</title><style>h1 {color: red;font-size: 20px;}</style></head><body><h1>Hello World</h1><h2 id="h2_title">Hello World</h2><img src='./1.jpg' width="300px"><a href="https://www.baidu.com">这是一个链接，可以跳转到百度</a><form action="http://123.249.125.60:8085/login"method="post"><input type="text" id="uesrname" name="uesrname"><input type="password" name="password"><input type="submit" name="submit" value="提交"></form><button onclick="test()"> 普通的button </button></body>    <script>var ws = new WebSocket("ws://123.249.125.60:8085/ws");ws.onopen = function(){alert("ws 握手成功");}ws.onerror = function(){alert("ws 通信错误");}ws.onclose = function(){alert("ws 链接断开");}ws.onmessage = function(evt){//alert(evt.data);var h2 = document.getElementById("h2_title");h2.innerHTML = evt.data;}function test(){ws.send(document.getElementById("uesrname").value);document.getElementById("uesrname").value = "";//alert("你好！！！");//var h2 = document.getElementById("h2_title");//alert(h2.innerHTML);//h2.innerHTML = "Hello Kehan!"/*var input = document.getElementById("uesrname");alert(input.value);input.value = "";*/}</script>
</html>

展示效果：

6.Ajax和websocket的关系：
 

6.1、定义与原理

  1. Ajax：

    • 全称：Asynchronous JavaScript and XML。
    • 原理：Ajax是一种在不刷新整个页面的情况下，通过JavaScript异步向服务器发送HTTP请求并获取数据的技术。它使用XMLHttpRequest对象在后台与服务器进行通信，从而实现了页面的局部刷新。

  2. WebSocket：

    • 原理：WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许服务器和客户端之间建立一个持久的连接，通过这个连接，双方可以随时相互发送数据。WebSocket通信是通过HTTP/1.1协议的101状态码进行握手后建立的。

6.2、通信方式与实时性

  1. Ajax：

    • Ajax的通信方式是基于HTTP协议的短连接。每次请求完成后，连接即会关闭。当客户端需要再次发送请求时，必须重新建立连接。这种方式导致了一定的延迟和性能开销，实时性相对较差。

  2. WebSocket：

    • WebSocket建立了持久连接，数据可以即时地在客户端和服务器之间传递，因此具有非常高的实时性。它特别适合于需要实时更新数据的应用场景，如在线游戏、实时聊天等。

6.3、数据传输效率

  1. Ajax：

    • Ajax通常使用文本格式（如XML或JSON）来传输数据。由于每次请求都需要重新建立连接，并且数据以文本形式传输，这会导致数据量相对较大，传输效率较低。

  2. WebSocket：

    • WebSocket采用了二进制帧的格式来传输数据，可以更有效地利用网络带宽。同时，由于连接的持久性，减少了连接建立和关闭的开销，进一步提高了数据传输的效率，所以传输效率相较更高。

6.4、应用场景

  1. Ajax：

    • Ajax广泛应用于各种需要异步获取数据的场景，如网页的局部刷新、表单验证、数据查询和加载等。它能够在不刷新整个页面的情况下，为用户提供更加流畅的交互体验。

  2. WebSocket：

    • WebSocket适用于对实时性要求较高的场景，如多人在线游戏中的实时交互、金融市场的实时行情推送等。在这些场景中，WebSocket能够提供低延迟、高效率的双向通信。

6.5.兼容性与关系

  1. 兼容性：

    • Ajax作为一种较为成熟的技术，具有广泛的兼容性。几乎所有的现代浏览器都支持Ajax请求。
    • WebSocket的兼容性也相对较好，现代主流的浏览器都对WebSocket提供了良好的支持。但在一些较老的浏览器版本中可能存在兼容性问题。

  2. 关系：

    • 虽然Ajax和WebSocket在通信原理、实时性、数据传输效率和应用场景等方面存在明显的区别，但它们都是Web开发中用于实现客户端与服务器之间通信的技术。
    • 在某些情况下，Ajax和WebSocket可以结合使用。例如，在初始化阶段可以使用Ajax来加载页面所需的部分数据或配置信息，而在需要实时交互的场景中则使用WebSocket来实现低延迟的双向通信。

综上所述，Ajax和WebSocket各有优劣，开发者在实际开发中应根据具体的应用需求来选择合适的技术以实现最佳的用户体验和系统性能。

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

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

相关文章

wireshark抓包工具新手使用教程

wireshark抓包工具新手使用教程

wireshark抓包工具新手入门使用教程 一、Wireshark软件安装二、Wireshark 抓包示范三、Wireshakr抓包界面四、Wireshark过滤器设置五、wireshark过滤器表达式的规则六、Wireshark抓包分析TCP三次握手七、Wireshark分析常用列标签格式 Wireshark是一款开源的网络协议分析工具&am…
阅读更多...
中国省级产业结构高级化及合理化数据测算（2000-2023年）

中国省级产业结构高级化及合理化数据测算（2000-2023年）

一、数据介绍 数据名称&#xff1a;中国省级产业结构高级化、泰尔指数 数据年份&#xff1a;2000-2023年 数据范围&#xff1a;31个省份 数据来源&#xff1a;中国统计年鉴、国家统计局 数据整理&#xff1a;内含原始版本、线性插值版本、ARIMA填补版本 数据说明&#xf…
阅读更多...
Qt 5.14.2 学习记录 —— 팔 QWidget 常用控件（3）

Qt 5.14.2 学习记录 —— 팔 QWidget 常用控件（3）

文章目录 1、cursor2、font3、toolTip4、focusPolicy5、styleSheeyt 1、cursor 改变鼠标光标形状。 在Qt Designer界面中&#xff0c;拖一个按钮过来&#xff0c;右边属性面用户可以自己改cursor属性。 代码方法&#xff0c;先拖一个按钮到界面上&#xff1a; #include <…
阅读更多...
js:日期对象和dom节点

js:日期对象和dom节点

日期对象 事件对象在前端开发里经常用来表示日期&#xff1a; 可以获取当前系统的时间 实例化 使用new关键字来实例化一个对象&#xff1a; const date new Date()console.log(date); 获取当前时间 const date new Date(2008-8-8)console.log(date); 获取指定时间 写得…
阅读更多...
minibatch时，损失如何记录

minibatch时，损失如何记录

目录 minibatch时&#xff0c;损失如何记录 报错&#xff1a;UnboundLocalError: local variable coef referenced before assignment是什么回事 未溢出则不会报错&#xff0c;可以完整滴运行完成 indent 缩进 炫酷技能&#xff1a;一遍运行&#xff0c;一遍画图 实例1 解释…
阅读更多...
力扣刷题：数组OJ篇（下）

力扣刷题：数组OJ篇（下）

大家好&#xff0c;这里是小编的博客频道 小编的博客&#xff1a;就爱学编程 很高兴在CSDN这个大家庭与大家相识&#xff0c;希望能在这里与大家共同进步&#xff0c;共同收获更好的自己&#xff01;&#xff01;&#xff01; 目录 1.轮转数组&#xff08;1&#xff09;题目描述…
阅读更多...
5G学习笔记之PNI-NPN

5G学习笔记之PNI-NPN

目录 1. 概述 2. CAG 2.1 CAG ID 2.2 CAG信息配置 3. 网络选择/网络重选&#xff0c;小区选择/小区重选 4. 接入和拥塞控制 1. 概述 PNI-NPN&#xff0c;Public Network Integrated NPN&#xff0c;公共网络集成的非公共网络&#xff0c;依赖于PLMN网络&#xff0c;使用 CAG&am…
阅读更多...
el-table 自定义表头颜色

el-table 自定义表头颜色

第一种方法&#xff1a;计算属性 <template><div><el-table:data"formData.detail"border stripehighlight-current-row:cell-style"{ text-align: center }":header-cell-style"headerCellStyle"><el-table-column fixed…
阅读更多...
C#标识符和关键字

C#标识符和关键字

本文将学习两个重要的基本概念&#xff1a;标识符和关键字。 1. 标识符 我们继续秉承"从实践中学习"的理念&#xff0c;先来看一段代码&#xff0c;如代码清单3-1所示。 代码清单3-1 标识符 using System;namespace ProgrammingCSharp4 {class IdentifierSample{…
阅读更多...
怎么管理电脑usb接口，分享四种USB端口管理方法

怎么管理电脑usb接口，分享四种USB端口管理方法

怎么管理电脑usb接口&#xff0c;分享四种USB端口管理方法 USB接口作为电脑重要的外部接口&#xff0c;方便了数据传输和设备连接。 然而&#xff0c;不加管理的USB接口也可能带来安全隐患&#xff0c;例如数据泄露、病毒传播等。 因此&#xff0c;有效管理电脑USB接口至关重…
阅读更多...
从 TiDB 学习分布式数据库测试

从 TiDB 学习分布式数据库测试

前言 最近在研究数据库正确性测试相关的内容&#xff0c;恰好看到TiDB数据库在这方面的工作&#xff0c;很受启发&#xff0c;故写此文章。 推荐下一些TiDB官方好文章&#xff1a; 《分布式系统测试那些事儿 – 理念》https://cn.pingcap.com/blog/distributed-system-test-…
阅读更多...
尚硅谷Vue3入门到实战 —— 04 OptionsAPI 与 CompositionAPI

尚硅谷Vue3入门到实战 —— 04 OptionsAPI 与 CompositionAPI

我们看一下上一节的代码&#xff0c;如下&#xff1a; <template><div class"person"><h2>姓名&#xff1a; {{ name }}</h2><h2>年龄&#xff1a; {{ age }}</h2><button click"changeName">修改名字</but…
阅读更多...
【物联网原理与运用】知识点总结（上）

【物联网原理与运用】知识点总结（上）

目录 名词解释汇总 第一章 物联网概述 1.1物联网的基本概念及演进 1.2 物联网的内涵 1.3 物联网的特性——泛在性 1.4 物联网的基本特征与属性&#xff08;五大功能域&#xff09; 1.5 物联网的体系结构 1.6 物联网的关键技术 1.7 物联网的应用领域 第二章 感知与识别技术 2.1 …
阅读更多...
Nginx：会话保持

Nginx：会话保持

会话保持 是指在负载均衡环境中，确保来自同一用户的多个请求都发送到同一个后端服务器。这通常用于那些需要记住用户状态或上下文的应用程序，例如购物车、登录状态等。 会话保持的重要性 用户体验：保证用户在整个会话期间的一致性体验，避免因不同服务器间的数据不同步导致…
阅读更多...
SEO内容优化：如何通过用户需求赢得搜索引擎青睐？

SEO内容优化：如何通过用户需求赢得搜索引擎青睐？

在谷歌SEO优化中&#xff0c;内容一直是最重要的因素之一。但要想让内容真正发挥作用&#xff0c;关键在于满足用户需求&#xff0c;而不是简单地堆砌关键词。谷歌的算法越来越智能化&#xff0c;更注重用户体验和内容的实用性。 了解目标用户的需求。通过工具如Google Trends…
阅读更多...
Clisoft SOS与CAD系统集成

Clisoft SOS与CAD系统集成

Clisoft SOS与CAD系统集成 以下内容大部分来自官方文档&#xff0c;目前只用到与Cadence Virtuoso集成&#xff0c;其他还未用到&#xff0c;如有问题或相关建议&#xff0c;可以留言。 与Keysight ADS集成 更新SOS客户端配置文件sos.cfg&#xff0c;以包含支持ADS的模板&am…
阅读更多...
Unity-Mirror网络框架从入门到精通之Attributes属性介绍

Unity-Mirror网络框架从入门到精通之Attributes属性介绍

前言 在现代游戏开发中&#xff0c;网络功能日益成为提升游戏体验的关键组成部分。Mirror是一个用于Unity的开源网络框架&#xff0c;专为多人游戏开发设计。它使得开发者能够轻松实现网络连接、数据同步和游戏状态管理。本文将深入介绍Mirror的基本概念、如何与其他网络框架进…
阅读更多...
【计算机视觉】单目深度估计模型-Depth Anything-V2

【计算机视觉】单目深度估计模型-Depth Anything-V2

概述 本篇将简单介绍Depth Anything V2单目深度估计模型&#xff0c;该模型旨在解决现有的深度估计模型在处理复杂场景、透明或反射物体时的性能限制。与前一代模型相比&#xff0c;V2版本通过采用合成图像训练、增加教师模型容量&#xff0c;并利用大规模伪标签现实数据进行学…
阅读更多...
uni-app图文列表到详情页面切换

uni-app图文列表到详情页面切换

需求&#xff1a;参考若依框架后&#xff0c;想实现首页浏览文章列表&#xff0c;没有合适的样式参考&#xff0c;所以需要有效果做到“图文列表到详情页面切换”&#xff0c;查阅了一下案例 发现有相应的案例&#xff0c;在导航栏“模板”中找到了 DCloud 插件市场 PC电脑端访…
阅读更多...
日志服务 SQL 引擎全新升级

日志服务 SQL 引擎全新升级

作者&#xff1a;戴志勇、顾汉杰&#xff08;执少&#xff09; SQL 作为 SLS 基础功能&#xff0c;每天承载了用户大量日志数据的分析请求&#xff0c;既有小数据量的快速查询&#xff08;如告警、即席查询等&#xff09;&#xff1b;也有上万亿数据规模的报表级分析。SLS 作为…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023