web前端学习总结(一)
web前端使用三项技术:html、css、javascript.
一、html:超文本标记语言,用于展示网页的框架。
<html> <head><title> </title></head><body><div> </div> <!--用于布局,占1行 --><span> </span> <!--行内布局 --><p> </p><h1></h1> <!--标题标签,1-6字体一次变小,跟word中的字体大小的命名规则相似--><h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6><a href="https://www.baidu.com/">访问baidu</a> <!--超链接 --><img src="图像url" /> <!--自闭合的图片标签--></body>
</html>
标签多数成对出现,文本内容置于两标签中间。
也有单个出现,自闭合,
例如:换行标签<br/>
<hr> 水平线标签
<!-- -->标签:注释,快捷键是ctrl+/
二、css:层叠样式表,用于丰富网页的样式。
无论是.css文件的引入,还是通过<style>标签引入内部样式表,一般都放在<head>标签内部最下部分。
有三种表示方式:
方式一:外部样式表
与.html文件分离,单独形成.css文件,可同时被多个html文件引用,非常方便。一般都使用这种方式。
1)将内部样式表中的<style>和</style>中的内容拷贝到.css文件中即可。 例如,定义文件名为styles.css中的内容如下:
//定义标签样式h1{color:red;text-align:center;}P{font-family:Arial;line-height:1.6;}
//定义id样式
#box{width: 140px;height: 140px;background-color: green;
}
//定义类样式
.item {width: 100px;height: 100px;background-color: red;}
2)在html文件中,引入.css文件
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>外部样式示例</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
通过link标签,一般在<head></head>标签内最下边引入.css文件。
方式二:内联样式
<body><h1 style="color:blue;font-size:24px;">这是内联样式的标题</h1><p style="color:green;">这是内联样式的段落</p>
</body>
在每个标签内部,通过style属性,定义样式。
每个元素上都要重复填写样式,不利于代码维护。
方式三:内部样式表
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>内部样式示例</title>
<style>h1{color:red;text-align:center;}P{font-family:Arial;line-height:1.6;}
</style>
</head>
通过<style></style>标签定义样式表。
一般置于<head></head>标签中的 最下方位置。
三、javascript:脚本语言,弱数据类型语言,与java语言没有关系,用于定义网页的行为。
js的引用方式,也分为三种:
1.外部引用
在单独的.js文件中,
1) 编写独立的js文件,如创建no3.js文件,注:文件中不能包含<script>标签
function guess(){alert(this.value);}
2)在页面中,引入.js文件 ,推荐放在<body></body>内中最下部分。也可以放在</body>外。
<body><div id="myDiv">Hello World</div><script src="example.js"></script>
</body>
2.内部引用
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中,可以在任意地方,放置任意数量的<script>
- 一般会把脚本置于<body>元素的底部,可改善显示速度
<body><div><input id="btn1" type="button" value="你猜我的效果是啥?"></div></body><script>function guess(){alert(this.value);}</script>
网页中如只有html、css,则是静态的网页,引入javascript后,前端网页实现动态效果,如可以弹窗,可以在控制台打印日志信息,同时,也可以与后台程序实现数据交互。
js脚本语言中,引入了数据类型和方法。
(一)数据类型
js是弱数据类型语言,所有的变量定义一般都用var来定义(包括数组),使用var定义的变量,是全局变量,生命周期不受代码框的限制;如使用let 定义变量,则跟C语言、Java一样了,代码{}内定义的变量,生命周期只限于大括号内了。如欲知晓数据类型,使用typeof()函数来获取。
1.基本数据类型
1.数值型(number)数值的某一属性:NON(not a number)
var value= 100;
var value= 100.2;2.字符串型(string)可以用单引号或双引号括起来,但不能嵌套使用,即:双引号不能放双引号,单引号不能放单引号。
var str= "helloworld";3.布尔型(boolean)
var bvalue= true;
var bvalue= false;4.未定义(undefined)
var value; //使用typeof会看到value为undefined类型5.空(null)//数据类型为Object,不存在的对象
var value = null; //使用typedef(),显示数据类型为 object //不显示null,是历史遗留问题。6.符号型(symbol)
2.引用类型
Object 对象 ,其中包含了Data、Array、function等。
1)数组定义方式一: var arr = [1,3,4]; //与C语言不同,不需要明确数组个数。
数组定义方式二:var animal = new Array("apple","orange","peach","banana");
2)a.定义js对象:大括号内部包含键值对。
var value = {
name:"xiaoming",
age:18,
func:function(){alert("helloworld");}
}
属性的获取:通过 "点"+属性名 : 例如 value.name ;
此外,还可以利用构造函数创建对象
注意
- 构造函数约定首字母大写。
- 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
- 构造函数中不需要 return 返回结果。
- 当我们创建对象的时候,必须用 new 来调用构造函数。
b.json数据:是一个字符串,字符串内部形式跟js对象很相似,但是键需要用双引号括起来
例如:
“{
“name”:"xiaoming",
“age”:18}”
3)函数
3.1)定义函数形式一:
function 函数名(形参){函数体}
调用:
函数名 () ;//例如 func();
没有返回值类型、没有形参数据类型,因为可以是任意的数据类型,都用var、let表示即可。
3.2) 定义函数形式二:
let func = funtion() {}
调用:
func();
3.3) 定义函数形式三:通过构造函数形式
let func = new function('a','b','return a+b');
调用:
let sum = func(3,4);
3.4)定义函数形式四:es6 新增了使用胖箭头(=>)语法定义函数表达式的能力。
()=>{}
// 普通函数
let sum = function(a, b) {return a + b;
}// 箭头函数
let sum1 = (a, b) => {return a + b;
}
相关文章:
web前端学习总结(一)
web前端使用三项技术:html、css、javascript. 一、html:超文本标记语言,用于展示网页的框架。 <html> <head><title> </title></head><body><div> </div> <!--用于布局,占1行 --><span&g…...
【深度学习入门_基础篇】概率论
开坑本部分主要为基础知识复习,新开坑中,学习记录自用。 学习目标: 随机事件与概率、随机变量及其分布、多维随机变量及其分布、大数定律与中心极限定理。 强烈推荐此视频: 概率论_麻省理工公开课 废话不多说,直接…...
SpringMVC根据url校验权限,防止垂直越权
思路是加一个拦截器,对除登录接口的所有请求进行拦截。拦截到请求后,查询当前用户都拥有哪些url的权限(这个需要权限表有url字段),然后与当前请求的url对比,如果相同则说明有权限,否则没有。 首…...
istio-proxy oom问题排查步骤
1. 查看cluster数量 cluster数量太多会导致istio-proxy占用比较大的内存,此时需检查是否dr资源的host设置有配置为* 2. 查看链路数据采样率 若采样率设置过高,在压测时需要很大的内存来维护链路数据。可以调低采样率或增大istio-proxy内存。 检查iop中…...
openstack下如何生成centos9 centos10 和Ubuntu24 镜像
如何生成一个centos 10和centos 9 的镜像1. 下载 对应的版本 wget https://cloud.centos.org/centos/10-stream/x86_64/images/CentOS-Stream-GenericCloud-x86_64-10-latest.x86_64.qcow2 wget https://cloud.centos.org/centos/9-stream/x86_64/images/CentOS-Stream-Gener…...
Yolov8训练方式以及C#中读取yolov8+onnx模型进行目标检测.NET 6.0
目录 首先你要定义v8的模型特征文件 下方是完整的模型编写函数 然后你要在控件窗体中定义应用这些方法以及函数 一、定义你的标签 二、下方是定义模块和坐标的方法 三、画框 完整推理函数代码块 效果展示 完整源码 训练其实和yolov10差不多 因为v10就是在v8的基础上做了优…...
C#中序列化的选择:JSON、XML、二进制与Protobuf详解
C#中序列化的选择:JSON、XML、二进制与Protobuf详解 在C#开发中,序列化是将对象转换为可存储或传输的格式的过程,而反序列化则是将存储或传输的数据重新转换为对象的过程。选择合适的序列化方式对应用程序的性能、可维护性和兼容性至关重要。…...
深入理解 Java 设计模式之策略模式
一、引言 在 Java 编程的世界里,设计模式就如同建筑师手中的蓝图,能够帮助我们构建出更加健壮、灵活且易于维护的代码结构。而策略模式作为一种经典的行为型设计模式,在诸多实际开发场景中都发挥着至关重要的作用。它能够让算法的定义与使用…...
如何快速导出Python包和安装?
pip freeze > requirements.txt导出: 安转 : pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple...
记录一个在增量更新工具类
1. 应用场景 比方说我现在有一个商品,这个商品可以上传图片用来展示,之前已经上传过5张图片 ABCDE,现在其中BC这两张图片不想要了要换成FG,这个时候就可以使用这个工具类进行更新。 在最后一步,可以不管ADE直接只管新增…...
VUE3 常用的组件介绍
Vue 组件简介 Vue 组件是构建 Vue 应用程序的核心部分,组件帮助我们将 UI 分解为独立的、可复用的块,每个组件都有自己的状态和行为。Vue 组件通常由模板、脚本和样式组成。组件的脚本部分包含了各种配置选项,用于定义组件的逻辑和功能。 组…...
UML系列之Rational Rose笔记二:包图
rose绘制包图,有简单的有复杂的; 正常图简单的话,直接新建package使用就行,改变package的大小,改变名称当作不同的包就行;基本没有什么学习难度;在此,笔者直接介绍一下回执标准一点…...
第34天:安全开发-JavaEE应用反射机制攻击链类对象成员变量方法构造方法
时间轴: Java反射相关类图解: 反射: 1、什么是 Java 反射 参考: https://xz.aliyun.com/t/9117 Java 提供了一套反射 API ,该 API 由 Class 类与 java.lang.reflect 类库组成。 该类库包含了 Field 、 Me…...
cuda实现flash_attn_mma_share_kv源码分析
一 源码分析 1.1 函数入口 void flash_attn_mma_stages_split_q_shared_kv(torch::Tensor Q, torch::Tensor K, torch::Tensor V, torch::Tensor O, int stages) {CHECK_TORCH_TENSOR_DTYPE(Q, torch::kHalf) // Q [B,H,N,D]CHECK_TORCH_TENSOR_DTYPE(K, torch::kHalf) // K …...
Python操作Excel的库openpyxl使用入门
openpyxl 是一个用于读写 Excel 2010 xlsx/xlsm/xltx/xltm 文件的 Python 库。以下是一些 openpyxl 的基本使用方法: 安装 openpyxl 首先,确保已经安装了 openpyxl。如果没有安装,可以使用以下命令进行安装: pip install openp…...
《拉依达的嵌入式\驱动面试宝典》—计算机网络篇(二)
《拉依达的嵌入式\驱动面试宝典》—计算机网络篇(二) 你好,我是拉依达。 感谢所有阅读关注我的同学支持,目前博客累计阅读 27w,关注1.5w人。其中博客《最全Linux驱动开发全流程详细解析(持续更新)-CSDN博客》已经是 Linux驱动 相关内容搜索的推荐首位,感谢大家支持。 《…...
信息网络安全考试gjdw
序号 一级纲要 二级纲要 题目分类 题型 题干 选项 答案 题目依据 试题分数 试题编码 备注 说明 1 信息安规 \ 专业题库 单选题 根据信息安规规定,试验和推广信息新技术,应制定相应的( ),经本单位…...
S变换matlab实现
S变换函数 function [st,t,f] st(timeseries,minfreq,maxfreq,samplingrate,freqsamplingrate) % S变换 % Code by huasir Beijing 2025.1.10 % Reference is "Localization of the Complex Spectrum: The S Transform" % from IEEE Transactions on Signal Proc…...
【OLAP和PLTP】—— 浅谈两者的应用场景和区别
大家好,我是摇光~ OLAP(Online Analytical Processing)和OLTP(Online Transaction Processing)是两种不同的数据处理技术,分别用于不同的业务场景。以下是关于OLAP和OLTP的详细介绍: 一、OLAP&…...
计算机组成原理(1)王道学习笔记
一、 引言 计算机硬件唯一能识别的数据是二进制-----0/1。 用低/高电平表示0/1。 通过很多条电路,可以传递多个二进制数位。 每个二进制数位称为1bit(比特)。 计算机硬件的基本组成 早期的ENIAC计算机是通过手动接线来控制计算。冯诺依曼首次…...
LLaMA模型:自然语言处理的革新者
引言 在人工智能的领域中,自然语言处理(NLP)是一个充满挑战的分支,它的目标是让计算机能够理解和生成人类语言。Transformer模型,作为NLP的基石,已经极大地推动了这一领域的发展。然而,为了进一…...
各种特种无人机快速发展,无人机反制技术面临挑战
随着科技的飞速发展,各种特种无人机在军事、民用等领域得到了广泛应用,其性能不断提升,应用场景也日益丰富。然而,无人机反制技术的发展确实面临一定的挑战,难以完全跟上无人机技术的快速发展步伐。以下是对这一问题的…...
1555银行账户概要_pandas解答
目录 题目链接(无_力扣VIP_略过)一.读题(建议使用这种表结构_数据对比看)题目SQL Schema & Pandas Schema 建表语句_数据 二.答案_MySQL一图解MySQL一图解__可只需看此!!!!!!!!!!!!!!!!答案-----------------------------------------------------------------------------…...
【C++补充】第一弹---位图技术揭秘:内存优化与快速访问
✨个人主页: 熬夜学编程的小林 💗系列专栏: 【C语言详解】 【数据结构详解】【C详解】 目录 1 位图 1.1 位图相关面试题 1.2 位图的设计及实现 1.3 C库中的位图 bitset 1.4 位图的模拟实现 1.5 位图的优缺点 1.6 位图相关考察题目 1 …...
node.js中实现token的生成与验证
Token(令牌)是一种用于在客户端和服务器之间安全传输信息的加密字符串。在Web开发中,Token常用于身份验证和授权,确保用户能够安全地访问受保护的资源。 作用与意义 身份验证:Token可以用来验证用户的身份࿰…...
服务器登陆后有java变量
需求:在ssh服务器后,用户root 使用java会报错,没有这个变量,其实环境变量中已经有配置了,在/etc/profile 中有写变量及地址,通过source /etc/profile 命令也可以使环境变量加载上,但是ssh后不会…...
层次模型式的工作流
层次模型式的工作流是一种适合分布式版本控制系统(如 Git、Mercurial)的开发协作方式,它将开发团队分成多个层次,每个层次有明确的角色和职责,代码从底层逐步向上层汇总和集成,最终形成一个完整、稳定的产品…...
Linux 发行版介绍与对比:Red Hat、Ubuntu、Kylin、Debian
Linux 操作系统有众多发行版(Distros),每个发行版的设计目标、目标用户、应用场景和使用方式有所不同。常见的 Linux 发行版包括 Red Hat、Ubuntu、Kylin 和 Debian。以下是这些发行版的详细介绍与对比,以及它们的应用场景和使用方…...
G1原理—3.G1是如何提升垃圾回收效率
大纲 1.G1为了提升GC的效率设计了哪些核心机制 2.G1中的记忆集是什么 3.G1中的位图和卡表 4.记忆集和卡表有什么关系 5.RSet记忆集是怎么更新的 6.DCQ机制的底层原理是怎样的 7.DCQS机制及GC线程对DCQ的处理 提升G1垃圾回收器GC效率的黑科技 G1设计了一套TLAB机制 快速…...
IOS界面传值-OC
1、页面跳转 由 ViewController 页面跳转至 NextViewController 页面 (1)ViewController ViewController.h #import <UIKit/UIKit.h>interface ViewController : UIViewControllerend ViewController.m #import "ViewController.h" …...
C# SQL ASP.NET Web
留学生的课程答疑 按照要求完成程序设计、数据库设计、用户手册等相关技术文档; 要求 1. 计算机相关专业,本科以上学历,至少有1年以上工作经验或实习经历。 2. 熟练掌握WinForm程序开发,或ASP.NET Web编程。 3. 熟悉C#中网络…...
asp.net core webapi 并发请求时 怎么保证实时获取的用户信息是此次请求的?
对于并发请求,每个请求会被分配到一个独立的线程或线程池工作线程上。通过 HttpContext 或 AsyncLocal,每个线程都能独立地获取到它自己的上下文数据。由于这些数据是与当前请求相关的,因此在并发请求时不会互相干扰。 在并发请求时…...
软件23种设计模式完整版[附Java版示例代码]
一、什么是设计模式 设计模式是在软件设计中反复出现的问题的通用解决方案。它们是经过多次验证和应用的指导原则,旨在帮助软件开发人员解决特定类型的问题,提高代码的可维护性、可扩展性和重用性。 设计模式是一种抽象化的思维方式,可以帮助开发人员更好地组织和设计他们…...
FPGA 20 ,FPGA按键消抖功能解析与实现
目录 前言 一. 具体场景 二. 消抖方法...
基于单片机的无线气象仪系统设计(论文+源码)
1系统方案设计 如图2.1所示为无线气象仪系统设计框架。系统设计采用STM32单片机作为主控制器,结合DHT11温湿度传感器、光敏传感器、BMP180气压传感器、PR-3000-FS-N01风速传感器实现气象环境的温度、湿度、光照、气压、风速等环境数据的检测,并通过OLED1…...
OA系统如何做好DDOS防护
OA系统如何做好DDOS防护?在数字化办公蔚然成风的当下,OA(办公自动化)系统作为企业内部管理与协作的神经中枢,其安全性和稳定性直接关系到企业的日常运营效率、信息流通效率以及长远发展。OA系统不仅承载着企业内部的日…...
java_单例设计模式
什么是设计模式 什么是单例设计模式 单例设计模式——饿汉式 虽然你没有使用这个对象实例,但是它也帮你创建了!容易造成对象的浪费 對象,通常是重量級的對象, 餓漢式可能造成創建了對象,但是沒有使用. package com.hspedu.singl…...
比较分析:Windsurf、Cody、Cline、Roo Cline、Copilot 和 通义灵码
随着人工智能技术的快速发展,开发者工具变得越来越智能化,特别是在代码生成、辅助编程等领域,市面上涌现了多种 AI 驱动的工具。本文将从开源性、集成能力、功能覆盖范围、支持的编程语言、生态兼容性、成本、学习曲线、响应速度、离线支持以…...
vue3后台系统动态路由实现
动态路由的流程:用户登录之后拿到用户信息和token,再去请求后端给的动态路由表,前端处理路由格式为vue路由格式。 1)拿到用户信息里面的角色之后再去请求路由表,返回的路由为tree格式 后端返回路由如下: …...
C#版 软件开发6大原则与23种设计模式
开发原则和设计模式一直是软件开发中的圣经, 但是这仅仅适用于中大型的项目开发, 在小型项目的开发中, 这些规则会降低你的开发效率, 使你的工程变得繁杂. 所以只有适合你的才是最好的. 设计模式六大原则1. 单一职责原则(Single Responsibility Principle࿰…...
后端Java开发:第十三天
第十三天:继承 - 面向对象的核心概念 欢迎来到第十三天的学习!今天,我们将深入探讨 Java 中的 继承(Inheritance),这是面向对象编程的四大基本特性之一。继承是指一个类(子类)通过继…...
awr报告无法生成:常见分析手段
awr报告无法生成:常见分析手段 STATISTICS_LEVEL和OPEN_MODEAWR快照是否能自动生成?AWR快照能否手动生成?日志有无ORA-12751或ORA-32701报错?MMON进程是否被挂起?排查数据库隐藏参数分析快照生成错误信息分析AWR Snapshot Tracing分析AWR Table Flush是否超时STATISTICS_L…...
基础算法——差分
原理与特点 先回顾一下前缀和算法。 | arr | 1 | 3 | 7 | 5 | 6 | | ---------- | ------ | ------ | ------ | ------ | ------ | | prefix 值 | 101 | 134 | 13711 | 137516 | 1375622 |前缀和的特点是前面的相加prefix(i)sum(i-1)arr(i)。那么差分数组diff就如下面的形式 |…...
[ LeetCode 75 ] 283 移动零(JavaScript)
283 移动零 题目描述解题思路步骤解析时间和空间复杂度代码实现 题目描述 LeetCode 283 移动零 给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序。 请注意 ,必须在不复制数组的情况下原地对数组进行操…...
YOLOv10改进,YOLOv10添加HAttention注意机制用于图像修复的混合注意力转换器,CVPR2023,超分辨率重建
摘要 基于Transformer的方法在低层视觉任务中表现出色,例如图像超分辨率。然而,作者通过归因分析发现,这些网络只能利用有限的空间范围的输入信息。这意味着现有网络尚未充分发挥Transformer的潜力。为了激活更多的输入像素以获得更好的重建效果,作者提出了一种新型的混合…...
VS调试MFC进入系统源代码配置
调试MFC代码有时候能进入MFC的源代码,有时候不能.之前一直没有深入研究.后面经过查资料发现每次调试必能进入源代码的配置.很简单,只需要3步. 1.打开工具->选项->调试->符号,勾选Microsoft符号服务器. 2.打开项目->属性->配置属性->常规,MFC的使用修改成&qu…...
C# 告别FirstOrDefault
一、开篇:FirstOrDefault 的 “江湖地位” 在 C# 编程的世界里,FirstOrDefault 可谓是一位 “常客”,被广大开发者频繁地运用在各种项目场景之中。无论是 Windows 窗体应用程序,需要从数据集中检索第一条记录,或是满足…...
图像处理|腐蚀操作
在计算机视觉与图像处理中,腐蚀操作(Erosion)是形态学操作的一种。形态学操作广泛应用于二值图像中,主要用于分析和提取图像中的结构信息。腐蚀操作是这类操作中最常见的一种,用来对图像进行“收缩”处理,消…...
全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之循环结构(应用)
实战训练1—报数游戏 问题描述: 小明和小鹏玩报数游戏,小明按1∼20 报数,小鹏按1∼30报数。若两人同时开始,并以同样的速度报数,当两人都报了1000个数时,同时报相同数的次数是多少呢? 输入格…...
140.WEB渗透测试-信息收集-小程序、app(11)
免责声明:内容仅供学习参考,请合法利用知识,禁止进行违法犯罪活动! 内容参考于: 易锦网校会员专享课 上一个内容:139.WEB渗透测试-信息收集-小程序、app(10) 3.直接有app 直接拿…...