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

【JavaWeb】HTMLCSSJavaScript

HTML&CSS&JavaScript

文章目录

  • HTML&CSS&JavaScript
  • 一、开发工具及在线帮助文档
  • 二、 HTML
    • 2.1 HTML&CSS&JavaScript的作用
    • 2.2 HTML基础结构
    • 2.3 HTML概念词汇解释
    • 2.4 HTML的语法规则
    • 2.5 常用标签
  • 三、CSS
    • 3.1 引入方式
    • 3.2 CSS选择器
    • 3.3 CSS浮动
    • 3.4 CSS定位
    • 3.5 CSS盒子模型
  • 四、JavaScript
    • 4.1 引入方式
    • 4.2 JS 组成部分
    • 4.3 BOM编程
    • 4.4 DOM编程
      • 4.4.1 获取页面元素的几种方式
      • 4.4.2 操作元素属性值
      • 4.4.3 增删元素
    • 4.5 注意事项及细节
  • 五、注册页面案例

一、开发工具及在线帮助文档

前端工程师比较推崇的一款开发工具就是visual studio code,下载地址为:https://code.visualstudio.com/

插件:

  • Auto Rename Tag 自动修改标签对插件
  • Chinese Language Pack 汉化包
  • HTML CSS Support HTML CSS 支持
  • Intellij IDEA Keybindings IDEA快捷键支持
  • Live Server 实时加载功能的小型服务器
  • open in browser 通过浏览器打开当前文件的插件
  • Prettier-Code formatter 代码美化格式化插件
  • Vetur VScode中的Vue工具插件
  • vscode-icons 文件显示图标插件
  • Vue 3 snipptes 生成VUE模板插件
  • Vue language Features Vue3语言特征插件

在线帮助文档:

http://www.w3school.com.cn

二、 HTML

HTML是Hyper Text Markup Language的缩写。意思是超文本标记语言。它的作用是搭建网页结构,在网页上展示内容

2.1 HTML&CSS&JavaScript的作用

  • HTML 主要用于网页主体结构的搭建
  • CSS 主要用于页面元素美化
  • JavaScript 主要用于页面元素的动态处理

2.2 HTML基础结构

VSCode中创建html文件,输入 ! ,默认补全h5代码

<!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>

2.3 HTML概念词汇解释

  • 标签:代码中的一个 <> 叫做一个标签,有些标签成对出现,称之为双标签,有些标签单独出现,称之为单标签
  • 属性:一般在开始标签中,用于定义标签的一些特征

  • 文本:双标签中间的文字,包含空格换行等结构

  • 元素:经过浏览器解析后,每一个完整的标签(标签+属性+文本)可以称之为一个元素

2.4 HTML的语法规则

  1. 无论是双标签还是单标签都需要正确关闭
  2. 属性必须有值,值必须加引号,H5中属性名和值相同时可以省略属性值
  3. HTML中不允许自定义标签名,强行自定义则无效
  4. HTML标签不严格区分大小写,但是不能大小写混用

2.5 常用标签

如需参考,强烈推荐看在线文档,参考一些标签中存在的最佳实践来开发。

https://www.w3school.com.cn/html/html5_intro.asp

三、CSS

CSS 层叠样式表(英文全称:(Cascading Style Sheets) 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,简单来说,美化页面

3.1 引入方式

  • 行内式:通过元素开始标签的style属性引入, 样式语法为 样式名:样式值; 样式名:样式值;
  • 内嵌式:写在html中,用 style 标签包裹
  • 连接式/外部样式表:在项目单独创建css样式文件,在head标签中,通过link标签引入外部CSS样式文件
<link href="css/index.css" rel="stylesheet" type="text/css"/>

3.2 CSS选择器

  1. 简单选择器(根据名称、id、类来选取元素)
    • 元素选择器:元素名 ;ID选择器:#id ;类选择器:.class
    • 选择器之间可以组合,如:p.center 表示只有 class=“center” 的 p 元素才会被选中
    • 选择时还可以以 , 分隔,表示元素都选取
  2. 组合选择器(根据它们之间的特定关系来选取元素)
    • 后代选择器:空格 ;子选择器:> ;相邻兄弟选择器:+;通用兄弟选择器:~
  3. 伪类选择器(根据特定状态选取元素)
    • 语法:selector:pseudo-class ,伪类有很多,可参考在线文档看,一般主要用于鼠标悬停提示等
  4. 伪元素选择器(选取元素的一部分并设置其样式)
    • 语法:selector::pseudo-element ,具体使用参考在线文档
  5. 属性选择器(根据属性或属性值来选取元素)
    • 语法:[attribute="value"] ,如 a[target="value"] 表示选择带有 target 属性等于 valuea 标签,还可以将符号换成 |= 表示 value 开头的元素,具体参考在线文档

3.3 CSS浮动

CSS 的 Float(浮动)使元素脱离文档流,按照指定的方向(左或右发生移动),直到它的外边缘碰到包含框或另一个浮动框的边框为止

  • 浮动设计的初衷为了解决文字环绕图片问题,浮动后一定不会将文字挡住,这是设计初衷;故使用浮动时会把浮动框外的文字挤出去
  • 文档流是文档中可显示对象在排列时所占用的位置/空间,而脱离文档流就是在页面中不占位置了

浮动原理:

  1. 当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘

在这里插入图片描述

  1. 当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框

在这里插入图片描述

  1. 如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”

在这里插入图片描述

3.4 CSS定位

position 属性规定应用于元素的定位方法的类型(static、relative、fixed、absolute 或 sticky)

  • 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移
  • 元素可以使用的 topbottomleftright 属性定位。然而,这些属性无法单独工作,必须依赖于上面设置
  1. static:默认值,静态定位,即没有定位,元素出现在该出现的位置,块级元素垂直排列,行内元素水平排列
  2. absolute:绝对定位,通过方向属性指定元素相对页面窗口的页面位置;定位后元素会让出原来位置
  3. relative:相对定位,相对原来位置通过方向属性定位;定位后保留原来的站位
  4. fixed:固定定位,在浏览器窗口固定位置,且不会随着页面的上下移动而移动;元素定位后会让出原来的位置
  5. sticky:粘性定位,根据用户的滚动位置进行定位,可参考在线文档

z-index 属性指定元素的堆栈顺序(哪个元素应放置在其他元素的前面或后面),具有较高堆叠顺序的元素始终位于具有较低堆叠顺序的元素之前。

注意:如果两个定位的元素重叠而未指定 z-index,则位于 HTML 代码中最后的元素将显示在顶部。

3.5 CSS盒子模型

所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。

  • CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:边距(margin),边框(border),填充(padding),和实际内容(content)

在这里插入图片描述

  • 说明:
    • Margin(外边距) - 清除边框外的区域,外边距是透明的。
    • Border(边框) - 围绕在内边距和内容外的边框。
    • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
    • Content(内容) - 盒子的内容,显示文本和图像。

在这里插入图片描述

四、JavaScript

JS是一种运行于浏览器端上的小脚本语句,可以实现网页如文本内容动,数据动态变化和动画特效等。

4.1 引入方式

  • 内部脚本:script 标签内嵌js代码
  • 外部脚本:<script src="js/index.js" type="text/javascript"></script>

4.2 JS 组成部分

在这里插入图片描述

  1. BOM编程:BOM是Browser Object Model的简写,即浏览器对象模型
  2. DOM编程:DOM编程其实就是用window对象的document属性的相关API完成对页面元素的控制的编程
  3. ECMAScript:JS 实现了 ES 的语言标准。JS 还在此基础上新增了一些拓展。ES即ECMAScript语法规则。

4.3 BOM编程

BOM是Browser Object Model的简写,即浏览器对象模型

  • window 顶级对象,代表整个浏览器窗口
    • location对象 window对象的属性之一,代表浏览器的地址栏
    • history对象 window对象的属性之一,代表浏览器的访问历史
    • screen对象 window对象的属性之一,代表屏幕
    • navigator对象 window对象的属性之一,代表浏览器软件本身
    • document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档
    • console对象 window对象的属性之一,代表浏览器开发者工具的控制台
    • localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储
    • sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储

通过BOM编程实现会话级和持久级数据存储

  • 会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现
  • 持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现
  • 可以用于存储一些服务端响应回来的数据,比如:token令牌,或者一些其他功能数据
// 会话级数据
window.sessionStorage.setItem("sessionMsg","sessionValue");
// 持久级数据
window.localStorage.setItem("localMsg","localValue");

4.4 DOM编程

DOM(Document Object Model)编程就是使用document对象的API完成对网页HTML文档进行动态修改,以实现网页数据和样式动态变化效果的编程

dom树中节点的类型

  • node 节点,所有结点的父类型
    • element 元素节点,node的子类型之一,代表一个完整标签
    • attribute 属性节点,node的子类型之一,代表元素的属性
    • text 文本节点,node的子类型之一,代表双标签中间的文本

4.4.1 获取页面元素的几种方式

  1. 在整个文档范围内查找元素结点
功能API返回值
根据id值查询document.getElementById(“id值”)一个具体的元素节
根据标签名查询document.getElementsByTagName(“标签名”)元素节点数组
根据name属性值查询document.getElementsByName(“name值”)元素节点数组
根据类名查询document.getElementsByClassName(“类名”)元素节点数组
  1. 在具体元素节点范围内查找子节点
功能API返回值
查找子标签element.children返回子标签数组
查找第一个子标签element.firstElementChild标签对象
查找最后一个子标签element.lastElementChild节点对象
  1. 查找指定子元素节点的父节点
功能API返回值
查找指定元素节点的父标签element.parentElement标签对象
  1. 查找指定元素节点的兄弟节点
功能API返回值
查找前一个兄弟标签node.previousElementSibling标签对象
查找后一个兄弟标签node.nextElementSibling标签对象

4.4.2 操作元素属性值

  1. 属性操作
需求操作方式
读取属性值元素对象.属性名
修改属性值元素对象.属性名=新的属性值
  1. 内部文本操作
需求操作方式
获取或者设置标签体的文本内容element.innerText
获取或者设置标签体的内容element.innerHTML

4.4.3 增删元素

API功能
document.createElement(“标签名”)创建元素节点并返回,但不会自动添加到文档中
document.createTextNode(“文本值”)创建文本节点并返回,但不会自动添加到文档中
element.appendChild(ele)将ele添加到element所有子节点后面
parentEle.insertBefore(newEle,targetEle)将newEle插入到targetEle前面
parentEle.replaceChild(newEle, oldEle)用新节点替换原有的旧子节点
element.remove()删除某个标签

4.5 注意事项及细节

  • ===== 的差别:对于 == 符号,如果两端的数据类型不一致,会先进行类型转换再比较,故最好使用 ===
  • 小数 Number 类型会存在精度问题,优先考虑使用decimal,高精度要求情况下,前后端数字类型交互可考虑用字符串

五、注册页面案例

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>登陆页面</title><style>html {margin-top: 15%;}.ht{text-align: center;color: cadetblue;font-family: 幼圆;}.tab{width: 500px;border: 5px solid cadetblue;margin: 0px auto;border-radius: 5px;font-family: 幼圆;}.ltr td{border: 1px solid  powderblue;}.ipt{border: 0px;width: 50%;}.btn1{border: 2px solid powderblue;border-radius: 4px;width:60px;background-color: antiquewhite;}.msg {color: gold;}.buttonContainer{text-align: center;}</style><script>function checkUsername(){var usernameReg = /^[a-zA-Z0-9]{5,10}$/var usernameInput = document.getElementById("usernameInput")  var username = usernameInput.value  var usernameMsg = document.getElementById("usernameMsg")if(!usernameReg.test(username)){usernameMsg.innerText="格式有误"return false} usernameMsg.innerText="OK"return true }function checkUserPwd(){var userPwdReg = /^\d{6}$/var userPwdInput = document.getElementById("userPwdInput")  var userPwd = userPwdInput.value  var userPwdMsg = document.getElementById("userPwdMsg")if(!userPwdReg.test(userPwd)){userPwdMsg.innerText="格式有误"return false} userPwdMsg.innerText="OK"return true }function checkReUserPwd(){var userPwdReg = /^\d{6}$/// 再次输入的密码的格式var reUserPwdInput = document.getElementById("reUserPwdInput")  var reUserPwd = reUserPwdInput.value var reUserPwdMsg = document.getElementById("reUserPwdMsg")if(!userPwdReg.test(reUserPwd)){reUserPwdMsg.innerText="格式有误"return false} // 获得上次密码,对比两次密码是否一致var userPwdInput = document.getElementById("userPwdInput")  var userPwd = userPwdInput.value  if(reUserPwd != userPwd){reUserPwdMsg.innerText="两次密码不一致"return false} reUserPwdMsg.innerText="OK"return true }function checkForm(){var flag1 = checkUsername()var flag2 = checkUserPwd()var flag3 = checkReUserPwd()return flag1 && flag2 && flag3}</script></head><body><h1 class="ht">欢迎使用XX管理系统</h1><form method="post" action="/user/regist" onsubmit="return checkForm()"><table class="tab" cellspacing="0px"><tr class="ltr"><td>请输入账号</td><td><input class="ipt" id="usernameInput" type="text" name="username" onblur="checkUsername()"><span id="usernameMsg" class="msg"></span></td></tr><tr class="ltr"><td>请输入密码</td><td><input class="ipt" id="userPwdInput" type="password" name="userPwd" onblur="checkUserPwd()"><span id="userPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td>确认密码</td><td><input class="ipt" id="reUserPwdInput" type="password" onblur="checkReUserPwd()"><span id="reUserPwdMsg" class="msg"></span></td></tr><tr class="ltr"><td colspan="2" class="buttonContainer"><input class="btn1" type="submit" value="注册"><input class="btn1" type="reset" value="重置"><button class="btn1"><a  href="login.html">去登录</a></button></td></tr></table></form></body>
</html>

相关文章:

【JavaWeb】HTMLCSSJavaScript

HTML&CSS&JavaScript 文章目录 HTML&CSS&JavaScript一、开发工具及在线帮助文档二、 HTML2.1 HTML&CSS&JavaScript的作用2.2 HTML基础结构2.3 HTML概念词汇解释2.4 HTML的语法规则2.5 常用标签 三、CSS3.1 引入方式3.2 CSS选择器3.3 CSS浮动3.4 CSS定位…...

如何在没有备份的情况下恢复 iPhone 上已删除的短信

要在没有备份的情况下恢复 iPhone 上已删除的消息&#xff0c;您可以从“消息”应用程序恢复它们或使用第三方数据恢复工具。 虽然我们的 iPhone 可以做很多事情&#xff0c;但我在设备上最常做的事情之一就是文本。无论我是与朋友或家人联系&#xff0c;还是分享重要信息&…...

tomcat-pass-getshell 弱口令 漏洞复现

tomcat-pass-getshell 弱口令 漏洞复现 名称: tomcat-pass-getshell 弱口令 描述: Tomcat是Apache 软件基金会&#xff08;Apache Software Foundation&#xff09;的Jakarta 项目中的一个核心项目&#xff0c;由Apache、Sun 和其他一些公司及个人共同开发而成。 通过弱口令登…...

利用 LD_PRELOAD 环境变量

文章目录 原理LD_PRELOAD介绍如何上传.so文件 例题 [虎符CTF 2022]ezphp 原理 LD_PRELOAD介绍 LD_PRELOAD是Linux系统的一个环境变量&#xff0c;它可以影响程序的运行时的链接&#xff08;Runtime linker&#xff09;&#xff0c;它允许你定义在程序运行前优先加载的动态链接…...

黑马点评-Feed流的实现方案,基于推拉结合模式实现笔记推送

Feed流实现方案 我们关注了博主之后,当用户发布了动态后我们应该把这些数据推送给粉丝,关注推送也叫作Feed(投喂)流,通过无限下拉刷新获取新的信息 传统的模式内容检索: 粉丝需要主动通过搜索引擎或者是其他方式去查找想看的内容新型Feed流的效果: 系统分析用户到底想看什么,…...

Re53:读论文 How Can We Know What Language Models Know?

诸神缄默不语-个人CSDN博文目录 诸神缄默不语的论文阅读笔记和分类 论文名称&#xff1a;How Can We Know What Language Models Know? ArXiv网址&#xff1a;https://arxiv.org/abs/1911.12543 官方GitHub项目&#xff08;prompt之类的都有&#xff09;&#xff1a;https:…...

YARN工作流程详解

图1 图2 图1 -作业提交阶段&#xff1a; 1、client 提交job,向 ResourceManager【RM】 申请job_id; 2、RM 返回 job_id 及资源提交路径 给 client 3、client 把job所需的资源提交 到 3中指定的路径中 4、client 上传完成资源后&#xff0c;向RM 发送执行作业请求&#xff0c;RM…...

力扣373场周赛题解

第一题&#xff1a; 这个题是一个简单题&#xff0c;数据范围也特别小&#xff0c;所以直接使用模拟方式暴力解答。 直接进行行移动的过程&#xff0c;然后检查移动后的结果是否与移动前相同。 代码&#xff1a; ​ public class Solution {// 将指定行循环右移k次pri…...

编程语言发展史:Rust语言的出现和特点

一、Rust语言的出现 Rust语言是一种由Mozilla开发的系统级编程语言&#xff0c;该语言于2010年首次公布&#xff0c;由Graydon Hoare在Mozilla的工作期间开发&#xff0c;最初是为了替代C而设计的。Rust语言的目标是提供一种安全、高效、并发性强的编程语言&#xff0c;同时保…...

Centos Bind安装与排错

1.配置Centos系统静态IP vi/etc/sysconfig/network-scripts/ifcfg-ens33BOOTPROTOstaticIPADDR192.168.1.100NETMASK255.255.255.0GATEWAY192.168.1.1DNS18.8.8.8:wqsudo systemctl restart network.service 2.安装BIND&#xff08;需要服务器连接互联网&#xff0c;如果服务…...

spark中write算子和format算子详解

在spark中&#xff0c;想要往数据库或者某sink路径里面写数据&#xff0c;存到外部存储系统&#xff0c;如文件系统、数据库或数据仓库&#xff0c;经常会用到write算子。 具体来说&#xff0c;write算子通常与DataFrame或Dataset API一起使用&#xff0c;用于将数据写入持久化…...

设计模式—接口隔离原则(ISP)

1.背景 2002 年罗伯特C.马丁给“接口隔离原则”的定义是&#xff1a;客户端不应该被迫依赖于它不使用的方法&#xff08;Clients should not be forced to depend on methods they do not use&#xff09;。该原则还有另外一个定义&#xff1a;一个类对另一个类的依赖应该建立…...

Jenkins用126邮箱发邮件为什么发不出去

1、检查 Jenkins Location中的邮件地址配置与发邮件的地址配置是否一致 Manage Jenkins -》 system 2、检查地址和端口号 3、检查邮箱的登录配置是否正确&#xff08;这个地方的配置方式网上一抓一大把&#xff0c;自己搜一下就好&#xff09; 4、126邮箱发邮件不需要勾选ssl协…...

怎么给数据库某个字段建立一个前缀索引

说明&#xff1a;SQL调优中重要的一个环节是建立索引&#xff0c;其中有一条是字段值过长字段应该建立前缀索引&#xff0c;即根据字段值的前几位建立索引&#xff0c;像数据库中的密码字段、UUID字段。 因为其随机性&#xff0c;其实根据前几位就可以锁定某一条记录了。前缀索…...

C# 图片下载工具类

写在前面 从浏览器的Html文本中获取图片链接并保存到本地&#xff0c;同时对图片的分辨率和品质进行处理&#xff0c;以满足某些平台的规格需求&#xff1b;可以放到多线程中调用以提高下载效率。 代码实现 public class ImageDownloader{private int minImageSize 1024 * 1…...

嵌入式硬件电路·电平

目录 1. 电平的概念 1.1 高电平 1.2 低电平 2. 电平的使用场景 2.1 高电平使能 2.2 低电平使能 2.3 失能 1. 电平的概念 电平是指电信号电压的大小或高低状态。在数字电子学中&#xff0c;电平有两种状态&#xff0c;高电平和低电平&#xff0c;用来表示二进制中…...

Python文件路径常用操作

1 文件路径 在进行数据处理时&#xff0c;经常要用代码去读文件里的数据&#xff0c;那么首先就得知道这个文件的文件路径。文件路径简单地说就是文件的存放位置。文件路径分为两块&#xff1a;文件夹路径和文件名&#xff0c;文件名又分为文件基本名和扩展名。 举例说明&…...

Redis-Redis 高并发分布式锁

集群分布式场景高并发 1.negix配置代理和路由 高并发场景超卖问题 1.使用原生redis控制超卖时(若是商品&#xff0c;则可以将商品id作为锁对象)&#xff0c;会遇到的问题 问题一&#xff1a;若直接使用&#xff1a;将获取锁的对象和设置的超时的时间分开&#xff0c;则不能控…...

【推荐系统】MMOE笔记 20231126

paper阅读 任务差异带来的固有冲突实际上会损害至少某些任务的预测&#xff0c;特别是当模型参数在所有任务之间广泛共享时。&#xff08;在说ESMM&#xff09; 共享底层参数可以减少过拟合风险&#xff0c;但是会遇到任务差异引起的优化冲突&#xff0c;因为所有任务都需要在…...

4. 标准 IO 库

4. 标准 IO 库 1. 标准 IO 简介2. FILE 指针3. 标准输入、标准输出和标准错误4. fopen() 和 flose()5. fread() 和 fwrite()6. fseek 定位7. 检查或复位状态7.1 feof()7.2 ferrof()7.3 clearerr() 8. 格式化 IO8.1 格式化输出8. 2 格式化输入 9. IO 缓冲9.1 文件 IO 的内核缓冲…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

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

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

Aspose.PDF 限制绕过方案:Java 字节码技术实战分享(仅供学习)

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

MFC 抛体运动模拟:常见问题解决与界面美化

在 MFC 中开发抛体运动模拟程序时,我们常遇到 轨迹残留、无效刷新、视觉单调、物理逻辑瑕疵 等问题。本文将针对这些痛点,详细解析原因并提供解决方案,同时兼顾界面美化,让模拟效果更专业、更高效。 问题一:历史轨迹与小球残影残留 现象 小球运动后,历史位置的 “残影”…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...

门静脉高压——表现

一、门静脉高压表现 00:01 1. 门静脉构成 00:13 组成结构&#xff1a;由肠系膜上静脉和脾静脉汇合构成&#xff0c;是肝脏血液供应的主要来源。淤血后果&#xff1a;门静脉淤血会同时导致脾静脉和肠系膜上静脉淤血&#xff0c;引发后续系列症状。 2. 脾大和脾功能亢进 00:46 …...