- 博客(58)
- 收藏
- 关注
RSS订阅
1原创 前端学习笔记——node.js
初识 Node.js什么是 Node.jsNode.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 中的 JavaScript 运行环境注意： 浏览器是 JavaScript 的前端运行环境。Node.js 是 JavaScript 的后端运行环境。Node.js 中无法调用 DOM 和 BOM 等浏览器内置 API。Node.js 可以做什么Node.js 作为一个 JavaScript 的运行环境，仅仅提供了基础的功能和
2022-03-20 14:45:56
1333
原创 前端学习笔记——git
版本控制软件概念:版本控制软件是一个用来记录文件变化，以便将来查阅特定版本修订情况的系统，因此有时也叫做“版本控制系统”。使用版本控制软件的好处操作简便，只需识记几组简单的终端命令，即可快速上手常见的版本控制软件。易于对比，基于版本控制软件提供的功能，能够方便地比较文件的变化细节，从而查找出导致问题的原因。易于回溯，可以将选定的文件回溯到之前的状态，甚至将整个项目都回退到过去某个时间点的状态。不易丢失，在版本控制软件中，被用户误删除的文件，可以轻松的恢复回来。协作方便，基于版本控
2022-03-13 13:35:14
377
原创 前端学习笔记——HTTP协议
HTTP协议简介什么是通信通信，就是信息的传递和交换。通信三要素： 通信的主体，通信的内容 ，通信的方式什么是通信协议通信协议（Communication Protocol）是指通信的双方完成通信所必须遵守的规则和约定。通俗的理解：通信双方采用约定好的格式来发送和接收消息，这种事先约定好的通信格式，就叫做通信协议。客户端与服务器之间要实现网页内容的传输，则通信的双方必须遵守网页内容的传输协议。网页内容又叫做超文本，因此网页内容的传输协议又叫做超文本传输协议（HyperText
2022-03-12 16:11:45
104
原创 前端学习笔记——跨域与JSONP
同源策略什么是同源如果两个页面的协议，域名和端口都相同，则两个页面具有相同的源。什么是同源策略同源策略（英文全称 Same origin policy）是浏览器提供的一个安全功能。MDN 官方给定的概念：同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通俗的理解：浏览器规定，A 网站的 JavaScript，不允许和非同源的网站 C 之间，进行资源的交互，例如：无法读取非同源网页的 Cookie、LocalSt
2022-03-12 15:11:38
91
原创 前端学习笔记——Ajax
URL地址URL地址的概念URL (全称是UniformResourcel ocator)中文叫统一资源定位符, 用于标识互联网上每个资源的唯一存放位置，浏览器只有通过URL地址,才能正确定位资源的存放位置,从而成功访问到对应的资源。URL地址的组成部分URL地址一般由三部组成:①客户端与服务器之间的通信协议②存有该资源的服务器名称③资源在服务器上具体的存放位置客户端与服务器的通信过程客户端与服务器之间的通信过程,分为请求-处理-响应三个步骤。如果要在网页中请
2022-03-10 21:45:14
1284
原创 JS学习笔记——jquery
JavaScript库JavaScript库:即library ,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库 就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、 show ,比如获取元素等。简单理解:就是一一个JS文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如jQuery ,就是为了快速方便的操作DOM ,里面基本都是函数(方法)。jQuery的概念jQuery是一一个快速、简
2022-03-04 14:46:58
447
原创 JS学习笔记——APIS
API ( Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力, 而又无需访问源码,或理解内部工作机制的细节。API是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能。Web API是浏览器提供的一套操作浏览器功能和页面元素的API( BOM和DOM)。DOM文档对象模型( Document Object Model ,简称DOM) , 是W3C组织推荐的处理.
2022-02-23 21:37:57
1595
原创 JS学习笔记——对象
在JavaScript中,对象是一组无序的相关属性和方法的集合 ,所有的事物都是对象,例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词)创建对象的三种方式在JavaScript中,现阶段我们可以采用三种方式创建对象( object) :利用字面量创建对象利用new Object创建对象利用构造函数创建对象利用字面量创建对象对象字面量:就是花括号{}里面包含了表达
2022-02-16 16:14:04
334
原创 JS学习笔记——函数
函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。函数使用分为两步:声明函数和调用函数声明函数function函数名() { //函数体}function是声明函数的关键字，必须小写由于函数一般是为了实现某个功能才定义的,所以通常我们将函数名命名为动词,比如getSum调用函数函数名(); // 通过调用函数名来执行函数体代码声明函数本身并不会执行代码,只有调用函数时才会执行函数体代码。函数的封装函数的封装是把一个或者
2022-02-15 17:45:45
250
原创 JS学习笔记——数组
数组是指一组数据的集合 ,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。数组的创建方式JS中创建数组有两种方式:1、利用new创建数组 。 2、利用数组字面量创建数组。利用new创建数组var 数组名= new Array() ;var arr = new Array() ;//创建个新的空数组利用数组字面量创建数组//1.使用数组字面量方式创建空的数组var 数组名=[];//2.使用数组字面量方..
2022-02-15 16:04:55
354
原创 JS学习笔记——流程控制
流程控制就是来控制我们的代码按照什么结构顺序来执行流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序。顺序结构顺序结构是程序中最简单、最基本的流程控制,它没有特定的语法结构,程序会按照代码的先后顺序,依次执行,程序中大多数的代码都是这样执行的。分支结构由上到下执行代码的过程中,根据不同的条件,执行不同的路径代码(执行代码多选-的过程) , 从而得到不同的结果分支流程控制if语句if 语句（单分支）//条件成立执行代码,否则什
2022-02-14 17:55:55
110
原创 JS学习笔记——运算符
运算符( operator )也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。浮点数的精度问题浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。递增和递减运算符如果需要反复给数字量添加或减去1 ,可以使用递增( ++ )和递减( -- )运算符来完成。在JavaScript中,递增( ++ )和递减( -- )既可以放在变量前面,也可以放在变量后面。放在变量前面时,我们可以称为前置递增(递减)运算符,放在变量后面时,我们可以称为后置递增(递减).
2022-02-14 15:37:40
227
原创 JS学习笔记——数据类型
变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript 是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。在代码运行时,变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的,运行完毕之后，变量就确定了数据类型。基本数据类型JavaScript中数值的最大和最小值alert(Number.MAX_VALUE) ; / / 1. 7976931348 623157e+308alert(Number.MIN
2022-02-13 19:20:02
206
原创 JS学习笔记——变量
概述本质:变量是程序在内存中申请的一块用来存放数据的空间。声明变量var age; //声明一个名称为age的变量var是一个JS关键字,用来声明变量( variable变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间。变量初始化var age = 18; //声明变量同时赋值为18声明一个变量并赋值,我们称之为变量的初始化。更新变量一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。同时声明多个变量同时声明多
2022-02-13 16:34:48
73
原创 JS学习笔记——初识
JS的组成ECMAScriptECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript ,但实际上后两者是ECMAScript语言的实现和扩展。ECMAScript: ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工 业标准。DOM-文档对象模型文档对象模型( Document ObjectModel ,简称DOM) ,是W3C组
2022-02-13 16:00:45
319
原创 移动web开发学习笔记——布局
1.单独制作移动端页面(主流)流式布局(百分比布局)flex弹性布局(强烈推荐)less+ rem+媒体查询布局混合布局2.响应式页面兼容移动端(其次）媒体查询· bootstarp移动端常见布局流式布局(百分比布局)流式布局,就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。max-width最大宽度( max-height最大高度)min-width最小宽度( min-heig
2022-02-13 15:04:26
357
原创 移动web开发学习笔记——技术解决方案
移动端浏览器移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。我们可以放心使用H5标签和CSS3样式。同时我们浏览器的私有前缀我们只需要考虑添加webkit即可。CSS初始化normalize.css移动端CSS初始化推荐使用normalize.css/●Normalize.css :保护了有价值的默认值●Normalize.css :修复了浏览器的bug●Normalize.css :是模块化的●Normalize.css :拥有详细的文档官网地址: h
2022-02-10 17:49:45
159
原创 移动web开发学习笔记——视口、二倍图
视口( viewport )就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口。布局视口layout viewport一般移动设备的浏览器都默认设置 了一个布局视口用于解决早期的PC端页面在手机上显示的问题。iOS, Android基本都将这个视C分辨率设置为980px所以PC上的网页大多都能在手机上呈现,不过元素看上去很小, 一般默认可以通过手动缩放网页。视觉视口visual viewport字面意思,它是用户正在看到的网站的区域。注意:是网站的区域。
2022-02-10 17:32:19
416
原创 CSS学习笔记——3D转换
三维坐标系三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。x轴:水平向右 注意: x右边是正值,左边是负值y轴:垂直向下 注意: y下面是正值,上面是负值z轴:垂直屏幕 注意:往外面是正值,往里面是负值3D移动translate3dtranslform:translateX(100px) :仅仅是在x轴上移动translform:translateY(100px) :仅仅是在Y轴上移动translform:translateZ(100px) :仅仅是在Z轴
2022-02-10 16:30:09
184
原创 CSS学习笔记——动画
动画的基本使用制作动画分为两步:1.先定义动画2.再使用(调用)动画用keyframes定义动画(类似定义类选择器)@keyframes 动画名称{ 0%{ width: 100px; } 100%{ width: 200px; }}动画序列0% 是动画的开始，100%是动画的完成。这样的规则就是动画序列。在@keyframes中规定某项CSS样式,就能创建由当前样式逐渐改为新样式的动画效果。动画是使元
2022-02-09 18:36:51
293
原创 CSS学习笔记——2D转换
2D转换——移动translate2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位。语法：transform: translate(x,y);transform: translateX(n) ;transform: translateY(n) ;注意：1.定义2D转换中的移动,沿着X和Y轴移动元素。2.translate最大的优点:不会影响到其他元素的位置。 3.translate中的百分比单位是相对于自...
2022-02-09 17:19:26
203
原创 网站favicon图标
制作favicon图标1.把图标切成png图片。2.把png图片转换为ico图标,这需要借助于第三方转换网站,例如比特虫: http://www.bitbug.net/网站TDK三大标签SEO优化SEO ( Search Engine Optimization )汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式。SEO的目的是对网站进行深度的优化，从而帮助网站获取兔费的流量，进而在搜索引擎上提升网站的排名,提高网站的知名度。title网站标题
2022-01-28 15:09:32
359
原创 CSS3学习笔记——新增属性
CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。1. 属性选择器2.结构伪类选择器3.伪元素选择器属性选择器属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。注意:类选择器、属性选择器、伪类选择器,权重为10。结构伪类选择器结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素nth-child (n)选择某个父元素的一个或多个特定的子元素n可以是数字,关键字和公式n如果是数字,就是选
2022-01-22 17:01:55
165
原创 H5学习笔记——新增特性
语义化标签HTML5新增的语义化标签<header> :头部标签<nav> :导航标签<article> :内容标签<section> : 定义文档某个区域<aside> : 侧边栏标签<footer> :尾部标签注意: 1、这种语义化标准主要是针对搜索引擎的 2、这些新标签页面中可以使用多次 3、在IE9中,需要把这些元素转换为块级元素...
2022-01-20 17:23:00
328
原创 CSS学习笔记22——常见布局技巧
margin负值运用1.让每个盒子margin往左侧移动-1px正好压住相邻盒子边框。2.鼠标经过某个盒舒的时候,提高当前盒子的层级即呵(如果没有有定位,则加相对定位(保留位置) , 如果有定位,则加z-index )文字围绕浮动元素巧妙运用浮动元素不会压住文字的特性CSS三角强化width: 0;height: 0;border -color: transparent red transparent transparent;border-...
2022-01-20 16:33:12
77
原创 CSS学习笔记21——vertical-align属性应用
CSS的vertical-align属性使用场景：经常用于设置图片或者表单(行内块元素)和文字垂直对齐。用于设置一个元素的垂直对齐方式，但是它只针对于行内元素或者行内块元素有效。语法：vertical-align: baseline | top | middle | bottom图片、表单和文字对齐图片、表单都属于行内块元素，默认的vertical-align是基线对齐。此时可以给图片、表单这些行内块元素的vertical-align属性设置为middle就可以让文字和图
2022-01-19 17:58:04
234
原创 CSS学习笔记20——用户界面样式
鼠标样式cursorli {cursor: pointer; }设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。轮廓线outline给表单添加outline:0;或者outline: none;样式之后,就可以去掉默认的蓝色边框。input { outline:none; }防止拖拽文本域resize实际开发中,我们文本域右下角是不可以拖拽的。textarea{ resize: none; }...
2022-01-19 17:21:03
41
原创 CSS学习笔记19——画三角
box2 { width: 0; height: 0; border:50px solid transparent; border-left-color:■pink; margin: 100px auto;)效果 ：原理：利用边框的宽度改变大小。
2022-01-19 17:06:57
43
原创 CSS学习笔记18——文字图标
字体图标字体图标使用场景：主要用于显示网页中通用、常用的一些小图标。字体图标可以为前端工程师提供一种方便高效的图标使用方式,展示的是图标,本质属于字体。优点：轻量级：一个图标字体要比一系列的图像要小。 一旦字体加载了，图标就会马上渲染出来，减少了服务器请求。灵活性: 本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果、旋转等。兼容性:几乎支持所有的浏览器,请放心使用。注意：字体图标不能替代精灵技术,只是对工作中图标部分技术的提...
2022-01-19 16:56:53
304
原创 CSS学习笔记17——精灵图
为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术(也称CSS Sprites、CSS 雪碧)。核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了。精灵图( sprites )的使用使用精灵图核心:1.精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中。2.这个大图片也称为sprites精灵图或者雪碧图。3.移动背景图片位置，此时可以使用background-position。4.移动的距离就是
2022-01-19 15:55:02
122
原创 CSS学习笔记16——元素的显示与隐藏
本质:让一个元素在页面中隐藏或者显示出来。有三种方法：1. display 显示隐藏2. visibility 显示隐藏3. overflow 溢出显示隐藏display属性display属性用于设置一元素应如何显示。display: none ; 隐藏对象display : block ; 除了转换为块级元素之外,同时还有碌元素的意思display隐藏元素后,不再占有原来的位置。visibility可见性visib...
2022-01-19 15:31:51
86
原创 CSS学习笔记15——定位
定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。定位组成定位：将盒子定在某一个位置 ，所以定位也是在摆放盒子，按照定位的方式移动盒子。定位=定位模式+边偏移。定位模式定位模式用于指定一个元素在文档中的定位方式。 边偏移则决定了该元素的最终位置。定位模式决定元素的定位方式，它通过CSS的position属性来设置，其值可以分为四个:边偏移边偏移就是定位的盒子移动到最终位置。有top. bottom. left 和right 4个属性
2022-01-18 17:48:37
103
原创 CSS学习笔记14——CSS属性书写顺序
建议遵循以下顺序:1.布局定位属性: display / position/ float / clear / visibility/ overflow (建议display第一个写，毕竟关系到模式)。2.自身属性: width/ height / margin/ padding / border / background。3.文本属性: color/ font / text-decoration/ text-align/ vertical-align/ white-space / break-w
2022-01-17 14:22:24
317
原创 常见的图片格式
1. jpg图像格式: JPEG ( JPG )对色彩的信息保留较好，高清，颜色较多，我们产品类的图片经常用jpg格式。2. gif图像格式 : GIF格式最多只能储存256色，所以通常用来显示简单图形及字体，但是可以保存透明背景和动画效果，实际经常用于一些图片小动画效果。3. png图像格式是一 种新兴的网络图形格式，结合了GIF和JPEG的优点，具有存储形式丰富的特点，能够保持透明背景，如果想要切成背景透明的图片，请选择png格式。4. PSD图像格式，PSD格式是Photoshop的专用.
2022-01-14 21:31:57
2730
原创 CSS学习笔记13——浮动
CSS提供了三种传统布局方式(简单说就是舒如何进行排列顺序: 1、普通流(标准流) 2、浮动 3、定位注意:实际开发中, 一个页面基本都包含了这三种布局方式。标准流标准流：就是标签按照规定好默认方式排列。1.块级元素会独占一行，从上向下顺序排列。常用元素:div、 hr、p、h1~h6、ul、 ol、 dl、 form、table2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素: sp...
2022-01-14 21:23:43
133
原创 CSS学习笔记12——盒子阴影
使用box-shadow属性为盒子添加阴影。语法：box-shadow: h-shadow V-shadow blur spread color inset;注意:1.默认的是外阴影(outset)，但是不可以写这个单词，否则导致阴影无效。2.盒子阴影不占用空间，不会影响其他盒子排列。文字阴影使用text-shadow属性将阴影应用于文本。语法:text-shadow: h-shadow V-shadow blur color;...
2022-01-14 16:48:44
231
原创 CSS学习笔记11——圆角边框
border-radius属性用于设置元素的外边框圆角。语法：border-radius: length;radius半径(圆的半径)原理：(椭)圆与边框的交集形成圆角效果。原理：注意：1、参数值可以为数值或百分比的形式。2、如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为50%。3、如果是个矩形，设置为高度的一半就可以做。4、该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角、右下角、左下角。border-radi
2022-01-14 16:32:02
380
原创 ps基本操作
文件---->打开：打开我们要测量的图片。Ctrl+R：可以打开标尺，或者视图→标尺。右击标尺，把里面的单位改为像素。Ctrl+加号(+)可以放大视图，Ctrl+减号(-)可以缩小视图。按住空格键，鼠标可以变成小手，拖动PS视图。用选区拖动可以测量大小。Ctrl+ D可以取消选区，或者在旁边空白处点击一下也可以取消选区。...
2022-01-13 21:07:02
166
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人