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

JavaWeb 前端开发

JavaWeb前端

初识

HTML+CSS

入门程序
什么是HTML

 HTML是由标签构成的

什么是CSS

HTML快速入门 

 

标签可以是大写,也可以是小写,也可以是大小写混用。

属性值也可以使用单引号,但一般使用双引号。

HTML的语法结构比较松散,不严谨。

小结

VSCode开发工具 

常见标签与样式
标题排版 

标题样式
CSS引入方式

 

颜色表示形式

小结

 

标题样式(选择器)
常见选择器

 这三类选择器的优先级

id>cls>span

小结

正文排版 

 

正文样式 

整体布局 
盒子模型

 

小结

 案例
flex布局

表单标签

form表单:

      action:表单数据提交的url地址

      method:提交方式

              get:默认,表单数据会出现在ur1后面,形式:/save?name=Tom&age=18

                      特点:

                      1.如果表单中包含了隐私数据,get方式并不安全,不推荐使用该方式

                      2.在浏览器中get请求的大小是有限制的,不适合提交大数据量的表单,

              post:表单数据会在消息体/请求体中提交到服务器

                      特点:

                      1.安全.

                      2.请求大小没有限制

 注意:表单项要想能够采集数据,必须得设置name属性,表示当前表单项的名字

表单项标签

 

表格标签

总结 

 

 

JavaScript 

 

JS核心语法 
引入方式

在html当中,我们可以在任意位置放置任意数量的<script>,但是我们一般将其放在<body>标签的底部。

基础语法
变量

 

 

数据类型

 Not a Number:不是一个数字的数字

函数

 

add不是函数名,是用于接收后面函数返回值的变量名

 

 

自定义对象

 最后一个属性后面的,可以不加

最后一个方法同上

注意:

在自定义对象时,最好不要使用箭头函数,

在箭头函数中, this并不指向当前对象 - 指向的是当前对象的父级 【不推荐】

json

若想要将js对象正常输出,需要调用JSON.stringify()方法,将其从js对象转化为字符串

 

 

DOM

事件监听 

常见事件 

 

js(模块化)

引入模块化的js时,<script>标签中的 type="module"。

Vue

常用指令 

 
v-for 

V-bing

插值表达式不能出现在标签内部

v-if & v-show

 

v-model与v-on

 

 

Ajax

同步与异步 

Axios 

Axios-请求方式别名

小结 

asynic&await使用关键字只是模拟同步,实际上还是异步,这样有利于避免阻塞主线程,以及较为优良的代码可读可维护性。

Vue生命周期

小结

相关文章:

JavaWeb 前端开发

JavaWeb前端 初识 HTMLCSS 入门程序 什么是HTML HTML是由标签构成的 什么是CSS HTML快速入门 标签可以是大写&#xff0c;也可以是小写&#xff0c;也可以是大小写混用。 属性值也可以使用单引号&#xff0c;但一般使用双引号。 HTML的语法结构比较松散&#xff0c;不严谨…...

设计模式深度解析:AI大模型下的策略模式与模板方法模式对比解析

目录 一、策略模式:AI大模型的动态决策引擎 1.1 核心原理与工业级实现 1.2 AI时代的技术演进 二、模板方法模式:AI流水线的标准化基石 2.1 多模态处理框架设计 三、策略与模板方法的协同创新 3.1 电商推荐系统实践 四、前沿趋势与挑战 4.1 量子计算增强模式 五、伦理…...

2. 盒模型/布局模块 - 响应式产品展示页_案例:电商产品网格布局

2. 盒模型/布局模块 - 响应式产品展示页 案例&#xff1a;电商产品网格布局 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><style type"text/css">:root {--primary-color…...

H5S 视频监控AWS S3 对象存储

本文介绍一下如何使用S3对象存储作为H5S 存储空间进行录像存储 然后创建一个对象存储&#xff0c;本文以minio 为例(实际项目亲测天翼云)&#xff1a; 首先安装 s3fs 如果是redhat系列&#xff0c;使用如下命令 sudo yum install epel-release sudo yum install s3fs-fuse …...

Visual Studio 2022 跨网络远程调试

&#x1f680; Visual Studio 2022 跨网络远程调试实践指南 在本地开发软件时&#xff0c;Visual Studio 的调试器是我们最依赖的工具之一。但是当目标程序运行在远程设备上&#xff0c;例如测试服务器、工控设备或嵌入式终端&#xff0c;如何实现 跨网络远程调试 成为了开发中…...

最短路与拓扑(1)

1、找最长良序字符串 #include<bits/stdc.h> using namespace std; const int N105; int dis[N]; int vis[N]; int edge[N][N]; int n,m; int vnum;void dij(int u, int v) {// 初始化距离数组和访问标记for(int i0; i<vnum; i) {vis[i] 0;dis[i] edge[u][i];}// D…...

【前缀和】和为 K 的子数组(medium)

【前缀和】和为 K 的子数组 题目描述算法原理和细节问题代码 题目描述 和为 K 的子数组 给定一个整数数组和一个整数 k &#xff0c;请找到该数组中和为 k 的连续子数组的个数。 示例 1&#xff1a; 输入:nums [1,1,1], k 2 输出: 2 解释: 此题 [1,1] 与 [1,1] 为两种不同的…...

深入理解 JVM:StackOverFlow、OOM 与 GC overhead limit exceeded 的本质剖析及 Stack 与 Heap 的差异

摘要 在 Java 开发过程中&#xff0c;内存管理相关的问题一直是开发者需要重点关注的领域。StackOverFlow、OutOfMemory&#xff08;OOM&#xff09;和GC overhead limit exceeded是常见的运行时错误&#xff0c;而理解Stack&#xff08;栈&#xff09;和Heap&#xff08;堆&a…...

汽车功能安全--TC3xx MBIST设计要点

英飞凌针对硬件潜伏故障的自测&#xff0c;提供了四种机制&#xff1a;PBIST、LBIST、MONBIST和MBIST。 LBIST和MONBIST我们已经聊过了&#xff0c;今天就快速介绍下MBIST。 MBIST&#xff0c;全程Memory Built-in Self Test&#xff0c;用于检测SRAM数据单元的完整性。 在2…...

blazor与硬件通信实现案例

在网页接入硬件交互通信方案这篇博客中,曾经提到了网页中接入各种硬件操作的方法,即通过Windows Service作为指令的中转,并建立websocket通信连接,进而实现接入硬件的各种操作。这篇博客就以实际的案例来讲解具体怎么实现。 一、建立Windows Service项目 比如我就建立了一…...

思迈特软件携手天阳科技,打造ChatBI金融智能分析新标杆

5月10日&#xff0c;广州思迈特软件有限公司&#xff08;以下简称“思迈特软件”&#xff09;与天阳宏业科技股份有限公司&#xff08;以下简称“天阳科技”&#xff09;在北京正式签署战略合作协议。思迈特软件董事长吴华夫、CEO姚诗成&#xff0c;天阳科技董事长兼总裁欧阳建…...

微服务的“导航系统”:使用Spring Cloud Eureka实现服务注册与发现

在上一篇中&#xff0c;我们理解了微服务架构的核心理念以及Spring Cloud为我们提供的强大工具集。我们提到&#xff0c;微服务架构的一个核心挑战在于&#xff0c;服务实例的网络位置是动态的&#xff0c;服务之间需要一种机制来互相定位。 想象一下&#xff0c;你开了一家新…...

Linux之初见进程

1. 冯诺依曼体系结构 冯诺依曼体系结构是计算机的基本设计原则之一&#xff0c;也被认为是现代计算机的基础。它由美国数学家约翰冯诺伊曼在20世纪40年代后期提出。冯诺依曼体系结构包括存储程序概念、将数据和指令存储在同一存储器中、按照顺序执行指令等关键特征。 具体来说…...

Docker入门教程:常用命令与基础概念

目录 简介常用命令Docker 常用命令汇总docker run 命令格式与参数解析 简介 Docker 是一个客户端-服务器&#xff08;client-server&#xff09;架构的应用程序&#xff0c;其中包含两个主要组件&#xff1a;Docker 客户端和 Docker 守护进程&#xff08;也称为 Docker Daemon…...

内核深入学习3——分析ARM32和ARM64体系架构下的Linux内存区域示意图与页表的建立流程

内核深入学习3——ARM32/ARM64在Linux内核中的实现&#xff08;2&#xff09; ​ 今天我们来讨论的是一个硬核的内容&#xff0c;也是一个老生常谈的话题——那就是分析ARM32和ARM64体系架构下的Linux内存区域示意图的内容。对于ARM64的部分&#xff0c;我们早就知道一个基本的…...

vim 练习题

文章目录 前言&#xff1a;学习了vim基础命令&#xff0c;上机实操下吧命令模式练习插入模式练习末行模式练习视图模式练习高级操作练习 总结 前言&#xff1a;学习了vim基础命令&#xff0c;上机实操下吧 命令模式练习 打开任意文本文件&#xff0c;使用gg跳转到首行&#x…...

CSS3 选择器完全指南:从基础到高级的元素定位技术

CSS3选择器完全指南&#xff1a;从基础到高级的元素定位技术 一、基本选择器&#xff1a;精准定位的基石 &#xff08;一&#xff09;元素选择器 通过元素标签名直接匹配页面元素&#xff0c;语法简洁直观&#xff1a; p { color: #333; } /* 选择所有<p>元素 */ div…...

从SAM看交互式分割与可提示分割的区别与联系:Interactive Segmentation Promptable Segmentation

SAM的火爆也带来了一项新的任务&#xff1a;Promptable Segmentation&#xff0c;并且作者在文中对比了交互式分割Interactive Segmentation&#xff0c;并且在训练过程中也参考了交互式分割的训练方法&#xff0c;那么可提示分割与交互式分割有什么区别&#xff1f; 个人观点…...

k8s初始化时候,报错无法通过 CRI(容器运行时接口)与 containerd 通信

报错主要信息处 [reset] Unmounting mounted directories in “/var/lib/kubelet” W0513 11:34:19.818023 27124 cleanupnode.go:134] [reset] Failed to evaluate the “/var/lib/kubelet” directory. Skipping its unmount and cleanup: lstat /var/lib/kubelet: no such f…...

k8s之k8s集群部署

一、kubernetes基础环境搭建 1.安装虚拟机 2. 基础环境配置 2.1 关闭防火墙 更改主机名 #系统更新 sudo dnf update -y # 关闭防火墙 sudo systemctl stop firewalld sudo systemctl disable firewalld # 临时关闭 SELinux sudo setenforce 0 # 永久关闭 SELinux sudo sed -i…...

百度智能云千帆携手联想,共创MCP生态宇宙

5月7日&#xff0c;2025联想创新科技大会&#xff08;Tech World&#xff09;在上海世博中心举行&#xff0c;本届大会以“让AI成为创新生产力”为主题。会上&#xff0c;联想集团董事长兼CEO杨元庆展示了包括覆盖全场景的超级智能体矩阵&#xff0c;包括个人超级智能体、企业超…...

黑白浮生项目测试报告

文章目录 一、项目背景二、项目功能三、测试计划1. 功能测试1.1 注册页面1.1.1 正常注册1.1.2 异常注册 1.2 登录页面1.2.1 正常登录1.2.2 异常登录 1.3 游戏大厅页面1.3.1 开始匹配1.3.2 取消匹配 1.4 游戏房间页面1.4.1 落子1.4.2 游戏结束 2. 自动化测试2.1 创建浏览器驱动类…...

《操作系统真象还原》第十四章(2)——文件描述符、文件操作基础函数

文章目录 前言文件描述符简介文件描述符原理文件描述符实现修改thread.h修改thread.c 文件操作相关的基础函数inode操作相关函数文件相关函数编写file.h编写file.c 目录相关函数完善fs/dir.h编写fs/dir.c 路径解析相关函数实现文件检索功能修改fs.h继续完善fs.c makefile 结语 …...

k8s v1.26 实战csi-nfs 部署

一 前言 使用自开发的一键k8s基础环境部署后&#xff0c;存储需要解决&#xff0c;就是测试环境故选择nfs比较简单&#xff0c;翻阅很多网上资料感觉都不是很全面&#xff0c;结合网上资料折腾了一天&#xff0c;总算是完成了csi-nfs部署。其实之前也部署过&#xff0c;经过一…...

测试集群的功能-执行wordcount程序

具体的操作步骤如下&#xff1a; 确保hadoop是正确运行的。hdfs和yarn都正常启动了。在集群根目录下创建wcinput目录&#xff0c;并在它的下面上传两个文本文件word1.txt, word2.txt&#xff0c;其中保存了要测试的单词信息。在任意一台设备中&#xff0c;进入到hadoop的主目录…...

聊一聊Electron中Chromium多进程架构

Chromium 多进程架构概述 Chromium 的多进程架构是其核心设计之一&#xff0c;旨在提高浏览器的稳定性、安全性和性能。Chromium 将不同的功能模块分配到独立的进程中&#xff0c;每个进程相互隔离&#xff0c;避免了单进程架构中一个模块的崩溃导致整个浏览器崩溃的问题。 在…...

虹科技术 | 简化汽车零部件测试:LIN/CAN总线设备的按键触发功能实现

汽车零部件测试领域对操作的便捷性要求越来越高&#xff0c;虹科Baby-LIN-RC系列产品为这一需求提供了完美的解决方案。从基础的按键设置到高级的Shift键应用&#xff0c;本文将一步步引导您了解虹科Baby-LIN-RC系列产品的智能控制之道。 虹科Baby-LIN-3-RC 想象一下&#xff0…...

前端开发避坑指南:React 代理配置常见问题与解决方案

前端开发避坑指南:React 代理配置常见问题与解决方案 一、为什么需要配置代理?二、使用 create-react-app 默认配置代理三、使用 http-proxy-middleware 配置复杂代理四、高级代理配置五、生产环境中的代理配置一、为什么需要配置代理? React 应用在开发过程中经常需要与后端…...

43、Server.UrlEncode、HttpUtility.UrlDecode的区别?

Server.UrlEncode 和 HttpUtility.UrlDecode 是 .NET 中用于处理 URL 编码/解码的两个不同方法&#xff0c;主要区别在于所属命名空间、使用场景和具体行为。以下是详细对比&#xff1a; 1. 所属类库与命名空间 Server.UrlEncode 属于 System.Web.HttpServerUtility 类。通常…...

Azure 应用的托管身份与服务主体

Microsoft Entra ID -- 前称 Azure Active Directory -- 提供强大的身份验证和授权功能。托管身份和服务主体通过限制凭据暴露的风险来帮助确保对 Azure 资源的访问安全。 托管身份为Azure原生应用程序自动管理身份&#xff0c;而服务主体则非常适合需要访问Azure资源的外部应…...

音频特征工具Librosa包的使用

深入探索Mamba模型架构与应用 - 商品搜索 - 京东 DeepSeek大模型高性能核心技术与多模态融合开发 - 商品搜索 - 京东 要使用深度学习与语音特征进行抽取&#xff0c;首先需要准备能够对语音特征进行解析的工具。 Librosa是一个用于音频、音乐分析与处理的Python工具包&#x…...

Mapreduce初使用

&#xff08;一&#xff09;MapReduce的定义 MapReduce是一个分布式运算程序的编程框架&#xff0c;是用户开发“基于Hadoop的数据分析应用”的核心框架。 MapReduce核心功能是将用户编写的业务逻辑代码和自带默认组件整合成一个完整的分布式运算程序&#xff0c;并发运行在一个…...

Samtec助力电视广播行业

【摘要前言】 现代广播电视技术最有趣的方面之一就是界限的模糊。过去&#xff0c;音频和视频是通过射频电缆传输的模拟技术采集的&#xff0c;而现在&#xff0c;数字世界已经取代了模拟技术。物理胶片和磁带已让位于数字存储设备和流媒体。 在这个过程中&#xff0c;连接器…...

根据输入的数据渲染柱形图

背景&#xff1a;根据不同季度的销售额&#xff0c;生成对应的柱形图&#xff0c;直观的看出差异 效果&#xff1a; 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatibl…...

Three.js模型材质调整与性能优化实战

一、材质基础调整 1.1 颜色与透明度控制 通过Material.color属性可直接修改材质颜色&#xff1a; material.color new THREE.Color(0xff0000); // 红色结合opacity属性实现透明效果&#xff1a; material.opacity 0.5; // 50%透明度如需动态调整&#xff0c;可通过Color.…...

QEMU模拟32位ARM实现自定义系统调用

实现自定义系统调用 如何使用 QEMU 模拟32位 ARM 环境参考&#xff1a;使用Qemu模拟32位ARM系统 修改linux内核源码 使用 linux-4.4.240 源码&#xff0c;下载链接&#xff1a;下载链接 在 arch\arm\include\uapi\asm\unistd.h 文件下新增系统调用 sys_test&#xff1a; /…...

AWS IoT Core自定义域名配置实战指南

在使用AWS IoT Core时,配置自定义域名可以为您的IoT解决方案带来多方面的好处。本文将详细介绍如何在AWS IoT Core中设置和使用自定义域名,包括证书配置、域名设置以及DNS记录创建等关键步骤。 为什么要使用自定义域名? 使用自定义域名(也称为客户管理的域名)有以下几个主要…...

【C盘空间不足怎么办】

C 盘空间不足是一个常见的问题&#xff0c;即使感觉没怎么用&#xff0c;也可能被各种文件悄悄占满。这里分析一下常见的原因和排查方向&#xff1a; 一、 常见的空间占用大户&#xff1a; Windows 系统文件和更新&#xff1a; Windows Update 缓存&#xff1a; 系统更新后&am…...

workman进阶应用 GatewayWorker 仿微信 做聊天室

聊天室主要用到GatewayWorker &#xff0c;它是对workerman的进一步封装 GatewayWorker基于Workerman开发的一个项目框架&#xff0c;用于快速开发TCP长连接应用&#xff0c;例如app推送服务端、即时IM服务端、物联网、智能家居等等。 1. 安装环境 1.1 首先下载框架 compos…...

WebRTC技术EasyRTC嵌入式音视频通信SDK打造远程实时视频通话监控巡检解决方案

一、方案概述​ 在现代工业生产、基础设施维护等领域&#xff0c;远程监控与巡检工作至关重要。传统的监控与巡检方式存在效率低、成本高、实时性差等问题。EasyRTC作为一种先进的实时音视频通信技术&#xff0c;具备低延迟、高稳定性、跨平台等特性&#xff0c;能够有效解决这…...

window 显示驱动开发-创建分配时指定段

显示微型端口驱动程序指定并返回有关其内存段的信息&#xff0c;当视频内存管理器调用驱动程序的 DxgkDdiCreateAllocation 函数时&#xff0c;它更喜欢视频内存管理器使用这些信息。 在调用 DxgkDdiCreateAllocation 时&#xff0c;驱动程序为视频资源创建分配。 驱动程序在描…...

如何创建企业微信应用,如何给企业微信发送消息

首先打开你的企业微信 然后在下面创建应用 我创建的是 pes 设置域名和白名单 等你要开发的时候 就需要配置了 然后就能直接在本地发送企业微信消息了 切记 要配置白名单ip 如果要获取所有部门信息&#xff0c;旧得接口已经不能用了&#xff0c;只能获取所有部门id 前提是…...

WM_TIMER定时器消息优先级低,可能会被系统丢弃,导致定时任务无法正常执行

之前在优化电子白板绘制曲线功能时就遇到WM_TIMER定时器消息被丢弃的问题。原先在绘制曲线图元时&#xff0c;左键按下后一直不放&#xff0c;拖动鼠标绘制曲线&#xff08;不断绘制一些小线段形成曲线&#xff09;&#xff0c;等到左键弹起后完成一个完整曲线的绘制&#xff0…...

在Babylon.js中实现完美截图的艺术:包含Canvas和HTML覆盖层

在现代Web 3D应用开发中&#xff0c;Babylon.js作为强大的3D引擎被广泛应用。一个常见的需求是实现场景截图功能&#xff0c;特别是当场景中包含HTML覆盖层(如UI控件、菜单等)时。本文将深入探讨如何在Babylon.js中实现完整的截图方案。 问题背景 这里我是希望实现一个渐隐的…...

mac 10.15.7 svn安装

macOS 版本推荐 SVN 安装方式≤10.14Homebrew 安装独立 SVN≥10.15优先使用 CLT 自带 SVN 一、使用 brew 安装 &#xff08;没成功&#xff09; brew install subversion 这个方法安装一直不成功&#xff0c;一直在提示说版本旧或都是一些引用工具安装失败&#xff0c; 二、使…...

文件同步2

请大家思考如何使用scp命令去解决这个问题。 有两种思路&#xff1a; 第一种&#xff1a;三个文件一个一个去拷贝。缺点是操作麻烦&#xff0c;要逐一操作。 第二种&#xff1a;重新把A上的conf拷贝到B上。缺点是会重复拷贝文件1&#xff0c;2&#xff0c;3&#xff0c;4。 …...

el-select 结合 el-tree:树形下拉数据

一、单选 <template><div class"selectTree-wapper"><el-selectv-model"selectValue"placeholder"请选择"popper-class"custom-el-select-class"ref"selectRef"clearableclear"clearHandle">&…...

GOOSE 协议中MAC配置

在 GOOSE&#xff08;Generic Object Oriented Substation Event&#xff09;协议中&#xff0c;主站&#xff08;Publisher&#xff09;发送的 MAC 地址不需要与从站&#xff08;Listener&#xff09;的 MAC 地址一致&#xff0c;其通信机制与 MAC 地址的匹配逻辑取决于 GOOSE…...

11. CSS从基础样式到盒模型与形状绘制

在前端开发中&#xff0c;CSS&#xff08;层叠样式表&#xff09;是控制网页样式和布局的核心技术。整理了关于 CSS 基础样式、文本样式、盒模型以及形状绘制的一些心得。以下是详细的学习笔记。 一、基础样式设置 1. 字体样式 字体样式是网页视觉呈现的重要组成部分&#xf…...

【springcloud学习(dalston.sr1)】项目整体介绍(含源代码)(一)

当前项目是用来记录下以前学习过的springcloud的dalston.sr1版本&#xff0c;该版本目前来看已经过时了&#xff0c;这里仅做下学习记录分享&#xff08;当前推荐学习spring cloud alibaba&#xff09;。 springcloud主要用于大型项目&#xff0c;比如有一个电商项目&#xff…...