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

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

news 2025/6/19 2:39:50

前言：

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打开方式，默认就是从当前页面打开！

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

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

表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框 , 提交按钮等. 重点是 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更方便使用。

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

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

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

<!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、定义与原理

Ajax：
- 全称：Asynchronous JavaScript and XML。
- 原理：Ajax是一种在不刷新整个页面的情况下，通过JavaScript异步向服务器发送HTTP请求并获取数据的技术。它使用XMLHttpRequest对象在后台与服务器进行通信，从而实现了页面的局部刷新。
WebSocket：
- 原理：WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许服务器和客户端之间建立一个持久的连接，通过这个连接，双方可以随时相互发送数据。WebSocket通信是通过HTTP/1.1协议的101状态码进行握手后建立的。

6.2、通信方式与实时性

Ajax：
- Ajax的通信方式是基于HTTP协议的短连接。每次请求完成后，连接即会关闭。当客户端需要再次发送请求时，必须重新建立连接。这种方式导致了一定的延迟和性能开销，实时性相对较差。
WebSocket：
- WebSocket建立了持久连接，数据可以即时地在客户端和服务器之间传递，因此具有非常高的实时性。它特别适合于需要实时更新数据的应用场景，如在线游戏、实时聊天等。

6.3、数据传输效率

Ajax：
- Ajax通常使用文本格式（如XML或JSON）来传输数据。由于每次请求都需要重新建立连接，并且数据以文本形式传输，这会导致数据量相对较大，传输效率较低。
WebSocket：
- WebSocket采用了二进制帧的格式来传输数据，可以更有效地利用网络带宽。同时，由于连接的持久性，减少了连接建立和关闭的开销，进一步提高了数据传输的效率，所以传输效率相较更高。

6.4、应用场景

Ajax：
- Ajax广泛应用于各种需要异步获取数据的场景，如网页的局部刷新、表单验证、数据查询和加载等。它能够在不刷新整个页面的情况下，为用户提供更加流畅的交互体验。
WebSocket：
- WebSocket适用于对实时性要求较高的场景，如多人在线游戏中的实时交互、金融市场的实时行情推送等。在这些场景中，WebSocket能够提供低延迟、高效率的双向通信。

6.5.兼容性与关系

兼容性：
- Ajax作为一种较为成熟的技术，具有广泛的兼容性。几乎所有的现代浏览器都支持Ajax请求。
- WebSocket的兼容性也相对较好，现代主流的浏览器都对WebSocket提供了良好的支持。但在一些较老的浏览器版本中可能存在兼容性问题。
关系：
- 虽然Ajax和WebSocket在通信原理、实时性、数据传输效率和应用场景等方面存在明显的区别，但它们都是Web开发中用于实现客户端与服务器之间通信的技术。
- 在某些情况下，Ajax和WebSocket可以结合使用。例如，在初始化阶段可以使用Ajax来加载页面所需的部分数据或配置信息，而在需要实时交互的场景中则使用WebSocket来实现低延迟的双向通信。

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

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

目录前言： 1.前端技术html简单了解： 1.1HTML代码是由标签构成的。 1.2.HTML 文件基本结构 1.3.HTML 常见标签标题标签: 段落标签: p 文本格式化标签图片标签： 超链接标签: a 测试代码： 展示效果： 表单…...

编程日记 2025/1/9 8:54:30

Linux存储管理之核心秘密(The Core Secret of Linux Storage Management)

Linux存储管理之核心秘密如果你来自Windows环境，那么Linux处理和管理存储设备的方式对你而言可能显得格外不同。我们知道，Linux的文件系统并不采用Windows那样的物理驱动器表示方式（如C:、D:或E:），而是构建了一个以&…...

编程日记 2025/1/9 8:53:29

excel精简使用工具

1.获取sheet1的行填充到sheet2的列希望在 Excel 中使用 INDEX 函数从不同的列中提取数据，并且每一行都引用不同的列。为了实现这个目标，你可以使用 COLUMN 函数来动态获取列的偏移量。为了避免手动输入每个单元格的公式，你可以使用以下公…...

编程日记 2025/1/9 8:45:19

Flutter鸿蒙化在鸿蒙应用中添加Flutter页面

前言今天这节课我们讲一下在鸿蒙应用中添加Flutter页面。作用：之前有很多朋友和网友问我鸿蒙能不能使用Flutter开发，他们的项目已经用Flutter开发成熟了有什么好的方案呢，今天讲到这个就可以很好的解决他们的问题，例如我们正式项目中可能是一部分native 开发一部分…...

编程日记 2025/1/9 8:43:13

为什么页面无法正确显示？都有哪些HTML和CSS相关问题？

页面无法正确显示可能由多种原因导致，通常与HTML和CSS的结构、语法错误、浏览器兼容性、资源加载等问题有关。以下是一些常见的原因及其解决方法，结合实际项目代码示例进行讲解： 1. HTML 结构错误 HTML 标签的缺失或错误可能导致页面无法正…...

编程日记 2025/1/9 8:39:06

如何制作一份出色的公司介绍PPT？

制作一份公司介绍的PPT需要精心设计，以确保内容既专业又吸引人。以下是一个基本的框架和一些建议，帮助您创建一份有效的公司介绍PPT： PPT标题页标题：公司全称（可使用公司Logo作为背景或嵌入标题中）副标题…...

编程日记 2025/1/9 8:38:05

Selenium 进行网页自动化操作的一个示例，绕过一些网站的自动化检测。python编程

这段代码是使用 Selenium 进行网页自动化操作的一个示例，主要目的是在加载网页时执行一些自定义的 JavaScript 代码，并等待页面上某个元素的出现。以下是代码的详细解释： ### 代码解释 #### 导入必要的模块 python from selenium.webdriver…...

编程日记 2025/1/9 8:36:03

HashMap和HashTable的区别

1、HashMap是线程不安全的，HashTable是线程安全的 HashMap：Fail-fast 机制。表示快速失败，在集合遍历过程中，一旦发现容器中的数据被修改了，会立刻抛出ConcurrentModificationException异常，从而导致遍历失…...

编程日记 2025/1/9 8:34:02

使用redis来进行调优有哪些方案？

Redis的调优方案可以从多个方面进行，以下是一些常见的优化方法及代码示例： 1.使用管道（Pipelining） 管道技术可以减少客户端与Redis之间的交互次数，从而提高性能。在批量操作时，通过管道可以一次性发送多个…...

编程日记 2025/1/9 8:30:58

macOS 中，默认的 Clang 编译器和 Homebrew 安装的 GCC 都不包含 bits/stdc++.h 文件

在 macOS 中，默认的 Clang 编译器和 Homebrew 安装的 GCC 都不包含 bits/stdc.h 文件，因为它是一个非标准的头文件，主要由 MinGW 和某些 Linux 平台的 GCC 提供。解决方案 : 手动创建 bits/stdc.h 1. 创建文件夹和文件在你的 GCC 标准…...

编程日记 2025/1/9 8:28:56

2012mfc,自绘列表控件

原文使用常用控件版本4.70中的自定义绘画功能自定义列表控件的外观. 介绍常见控件的4.70版引入了一项叫自定义绘画的功能. 可按轻量易用的自画版本对待自定义绘画.易用性来自,即只需处理一条消息(NM_CUSTOMDRAW),且你可让窗口为你干活,因此你不必完成物主绘画中的所有粗活…...

编程日记 2025/1/9 8:26:54

vue3运行时执行过程步骤

在 Vue 3 中，运行时的执行过程是一个复杂但高效的机制，主要包括初始化应用、渲染、响应式更新和销毁等阶段。以下是 Vue 3 运行时的执行过程的核心步骤和流程： 1. 应用初始化 1.1 创建 Vue 应用调用 createApp 方法，创建一个 V…...

编程日记 2025/1/9 8:25:53

常用的AT命令，用于查看不同类型的网络信息

文章目录 1. ATCSQ‌：2. ATCREG‌：‌3. ATCOPS‌：4. ATCGATT‌：5. ATCGPADDR‌： 在AT命令集中，用于查看网络信息的命令有多种，具体取决于所使用的设备和模块。以下是一些常用的AT命令&#xff0…...

编程日记 2025/1/9 8:23:52

Vue3组件通讯——自定义事件（子-＞父）

需求如下： 1.在子组件中，当用户点击提交按钮后，更新数据库 2.数据更新成功后，子组件通知父组件getUserInfo函数，重新获取数据，同步更新 3.子组件等待getUserInfo函数执行完毕后，调用init函数…...

编程日记 2025/1/9 8:20:49

GLSL 着色器语言

GLSL 着色器语言 1. 着色器语言基础1.1 数据类型1.2 数据类型的基本使用1.3 运算符1.4 各个数据类型的构造函数1.5 类型转换1.6 存储限定符1.7 插值限定符1.8 一致块1.9 layout 限定符1.10 流程控制1.11 函数的声明和使用1.12 片元着色器中浮点及整型变量精度的指定1.13 程序的…...

编程日记 2025/1/9 8:13:43

如何创建一个 Vue.js 工程

创建一个 Vue.js 工程可以分为以下几个步骤： 安装 Node.js 和 npm：Vue.js 依赖于 Node.js 和 npm，因此首先需要在计算机上安装 Node.js 和 npm。可以从 Node.js 的官方网站（https://nodejs.org/）下载并安装。安装 V…...

编程日记 2025/1/9 8:10:40

Mysql 性能优化：覆盖索引

概述覆盖索引（Covering Index）是一个 MySQL 查询优化技术，它指的是一个索引包含了查询所需的所有字段的数据，因此不需要回表（访问数据表的行）就可以完成查询。使用覆盖索引可以显著提高查询性能&#xff…...

编程日记 2025/1/9 8:06:37

vulnhub靶场【DC系列】之7

前言靶机：DC-7，IP地址为192.168.10.13 攻击：kali，IP地址为192.168.10.2 都采用VMWare，网卡为桥接模式对于文章中涉及到的靶场以及工具，我放置在网盘中，链接：https://pan.quark…...

编程日记 2025/1/9 8:05:35

1. 基本数据结构 // 方法结构 struct method_t {SEL name; // 方法名const char *types; // 类型编码IMP imp; // 方法实现 };// 类结构 struct objc_class {Class isa;Class superclass;cache_t cache; // 方法缓存class_data_bits_t bits; // 类的方法…...

编程日记 2025/1/9 8:04:33

Wireshark 学习笔记1

1.wireshark是什么 wireshark是一个可以进行数据包的捕获和分析的软件 2.基本使用过程 （1）选择合适的网卡 （2）开始捕获数据包 （3）过滤掉无用的数据包 （4）将捕获到的数据包保存为文件…...

编程日记 2025/1/9 8:02:32

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展：显示创建时间8. 功能扩展：记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/6/15 12:05:47

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园二、准备工作 1. 编译环境宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链在交叉编译之前&#x…...

编程新知 2025/6/17 7:22:49

ES6从入门到精通：前言

ES6简介 ES6（ECMAScript 2015）是JavaScript语言的重大更新，引入了许多新特性，包括语法糖、新数据类型、模块化支持等，显著提升了开发效率和代码可维护性。核心知识点概览变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/6/15 16:19:15

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲： 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效近几年，数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段，基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

工业自动化时代的精准装配革新：迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者迁移科技成立于2017年，作为行业领先的3D工业相机及视觉系统供应商，累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成，通过稳定、易用、高回报的AI3D视觉系统，为汽车、新能源、金属制造等行…...

编程新知 2025/6/15 12:49:02

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

骨骼动画基础骨骼动画是 3D 计算机图形中常用的技术，它通过以下两个主要组件实现角色动画。骨骼系统 (Skeleton)：由层级结构的骨头组成，类似于人体骨骼蒙皮 (Mesh Skinning)：将模型网格顶点绑定到骨骼上，使骨骼移动…...

编程新知 2025/6/18 7:42:42

c#开发AI模型对话

AI模型前面已经介绍了一般AI模型本地部署，直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。微软提供了ML.NET来开发和使用AI模型，但是目前国内可能使用不多，至少实践例子很少看见。开发训练模型就不介绍了&am…...

编程新知 2025/6/17 16:02:39

莫兰迪高级灰总结计划简约商务通用PPT模版

莫兰迪高级灰总结计划简约商务通用PPT模版，莫兰迪调色板清新简约工作汇报PPT模版，莫兰迪时尚风极简设计PPT模版，大学生毕业论文答辩PPT模版，莫兰迪配色总结计划简约商务通用PPT模版，莫兰迪商务汇报PPT模版，…...

编程新知 2025/6/16 11:10:34

Ubuntu Cursor升级成v1.0

0. 当前版本低使用当前 Cursor v0.50时 GitHub Copilot Chat 打不开，快捷键也不好用，当看到 Cursor 升级后，还是蛮高兴的 1. 下载 Cursor 下载地址：https://www.cursor.com/cn/downloads 点击下载 Linux (x64) ，…...

编程新知 2025/6/16 11:04:43

Python网页自动化Selenium中文文档

1. 安装 1.1. 安装 Selenium Python bindings 提供了一个简单的API，让你使用Selenium WebDriver来编写功能/校验测试。通过Selenium Python的API，你可以非常直观的使用Selenium WebDriver的所有功能。 Selenium Python bindings 使用非常简洁方便的A…...

编程新知 2025/6/17 15:40:23

前言：

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.兼容性与关系

相关文章：