前端、Java
文章平均质量分 56
双
小XiaXia
沉迷学习,不能自拔
展开
-
如何区分对象自身的属性以及原型上的属性
两种属性: 自身属性和 prototype 属性。 自身属性是直接在对象上定义的。 而原型属性在 prototype 上定义。function Dog(name) { this.name = name;}Dog.prototype.numLegs = 4;let beagle = new Dog("Snoopy");let ownProps = [];let prototypeProps = [];// 只修改这一行下面的代码for(let property in beagle)原创 2022-05-26 13:33:44 · 388 阅读 · 0 评论 -
Promise
一、什么是promise?1、Promise 是 JS 中进行异步编程的新解决方案2、从语法上来说: Promise 是一个构造函数3、从功能上来说: promise 对象用来封装一个异步操作并可以获取其成功/失败的结果值为什么使用promise?promise是ES6中用来处理 异步操作 的。如果不使用promise,就需要使用 回调函数来处理异步操作后的结果,此时如果有 多个有顺序 的异步操作,会造成回调的嵌套,引发 回调地狱。回调地狱的缺点?1、不便于阅读2、不便于异常处理二、pro原创 2022-05-12 17:42:52 · 81 阅读 · 0 评论 -
前端性能优化
一、地址栏输入URL发生了什么大致分为:DNS域名解析、TCP连接、HTTP请求、处理请求返回HTTP响应、页面渲染、关闭连接首先会进行 url 解析,根据 dns 系统进行 ip 查找根据 ip 就可以找到服务器,然后浏览器和服务器会进行 TCP 三次握手建立连接,如果此时是 https 的话,还会建立 TLS 连接以及协商加密算法(注意的问题"https 和 http 的区别")连接建立之后浏览器开始发送请求获取文件,此时这里还会出现一种情况就是缓存,建立连接后是走缓存还是直接重新获取,需要看原创 2022-03-21 17:14:10 · 2794 阅读 · 0 评论 -
http相关
一、HTTP协议简介1、通信的定义通信,就是信息的传递和交换。通信三要素:通信的主体通信的内容通信的方式案例:服务器把传智专修学院的简介通过响应的方式发送给客户端浏览器。其中,通信的主体是服务器和客户端浏览器;通信的内容是传智专修学院的简介;通信的方式是响应;2、通信协议通信协议(Communication Protocol)是指通信的双方完成通信所必须遵守的规则和约定。通俗的理解:通信双方采用约定好的格式来发送和接收消息,这种事先约定好的通信格式,就叫做通信协议。2.1互联原创 2022-03-20 21:30:30 · 3688 阅读 · 0 评论 -
JS预编译
(function(a){console.log(a);var a = 12;console.log(a);function a(){...}console.log(a);var b = function(){...}console.log(b);function d(){...}})(1);先创建GO对象(Global Object),再创建AO对象(Activation Object)。1.首先创建一个GO对象,和AO对象(立即执行函数是在全局作用域中执行的,立即执行函数执行原创 2022-03-14 22:25:44 · 334 阅读 · 0 评论 -
JS作用域(链)和变量提升
一、作用域JS是静态作用域let x = 10;function f() { return x;}function g() { let x = 20; return f();}console.log(g()); // 10解释:我们调用一个函数时,如果这个函数的变量没有在函数中定义,就去定义该函数的地方查找相似题:var n=123;function f1(n){ console.log(n);}function f2(){ v.........原创 2022-03-14 15:37:03 · 1251 阅读 · 0 评论 -
防抖为什么要使用闭包
1. 防抖从概念上来讲,所谓的闭包指的是一个函数,有权访问另一个函数作用域中的变量的函数。直观点来讲,JavaScript的闭包就是函数中嵌套函数。<input type="text" id="input"/><div id="show"></div><script> function showInfo(text){ document.getElementById('show').innerHTML=text.target.value }原创 2022-03-11 13:44:14 · 3585 阅读 · 1 评论 -
socket.io的使用问题
在使用 Node http 服务器时,需要解决跨域问题在server对应文件夹运行终端node index.js(index为自定义的名称)index.js文件中(名称自定)原var io = require('socket.io')(app);改为var io = require('socket.io')(app,{cors:true});修改前:修改后:but一般我们不会自己写一个服务器,所以,用express框架安装npm install --save express同样要解原创 2021-08-18 10:25:24 · 448 阅读 · 0 评论 -
flex布局
背景元素有四种类型在flex容器中1.float失效2.vertical-align失效3.元素默认不换行,要换行,使用flex-wrap:wrap/wrap-reverse(放不下的元素跑到上面,与一般不同)justify-content:对齐方式,有5种,其中自动分配间隔space-around,使得每个的边距都一致主轴变换:flex-direction,默认值为row交叉轴align-itemstext-align对文本有效,对div无效,用交叉轴居中实.原创 2021-02-28 01:33:59 · 100 阅读 · 0 评论 -
移动端和PC端(dpr、viewport、rem)
移动端与网页端的相关介绍dprdpr值的意义:当在网页上用CSS划出一条1像素的线段时,当手机的dpr值为2,就会用2个像素划出这条像素。网页缩放网页缩放为原来的1/2,就相当于网页本身的大小变成了原来的2倍,下例中变为1:1meta标签中属性叫做name=“viewport”,viewport指的是手机浏览器的窗口大小,content中指让窗口的宽度跟手机的设备保持一致,当dpr=3,initial-scale取值1/3,即0.333移动端网页端适配一:百分比布局(原创 2021-02-28 01:22:40 · 780 阅读 · 0 评论 -
inline-block(vertical)、z-index、opacity、
inline-block不同写法的显示效果verticalvertical-align属性必须作用于inline-block元素设置line-height使其真正居中z-index、opacityz-index(层级问题)后来居上原则:正常情况下,元素没有设置z-index属性,出现位置比较靠后的元素层级更高。定位局上原则:做了定位的比没有做定位的层级要高大者居上原则:根据z-index数值大小来决定,如果一个父元素的z-index是高于另一个父元素的那么他的子元素也必然高.原创 2021-02-27 21:35:17 · 234 阅读 · 0 评论 -
帧动画(关键帧@keyframes)
关键帧时间进度为30%时,心的形状可以达到最大<!DOCTYPE><head> <title>帧动画</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> body{ padding: 100px; }原创 2021-02-27 19:09:36 · 231 阅读 · 2 评论 -
阿里巴巴矢量图标库的应用(字体图标)
网址:https://www.iconfont.cn/流程:放置于图标上——添加入库——再点击右上角的库(购物车)——点击下载代码——解压——打开说明文档(html)(symbol下才有彩色图标)——根据说明文档使用类型一:字体图标实质为文字可以改变图标大小、颜色如font-size:18px; color:#A4579D用法:引入CSS文件,即引入外部样式表.文件名.CSS,使用link标签来关联.CSS文件,输入link,再回车自动补全,再写入正确路径类型二:彩色字体图标用法:原创 2021-02-27 13:21:51 · 226 阅读 · 0 评论 -
透视与3D(3D立方体)
背景不符合实际上的近大远小,所以引入透视transform:perspective(px)给多个元素公共的父元素,视觉观察点是父元素正中心,<!DOCTYPE><head> <title>3D立方体</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css">.原创 2021-02-20 14:24:46 · 130 阅读 · 0 评论 -
transform位移、缩放、旋转效果(hover、transition、trasform)
背景介绍进行absolute绝对定位,改变位置时,脱离文档流,影响布局使用transform属性,不影响其他元素布局,只在原来的位置上发生了偏移这2种效果一样transform的缩放和旋转缩放:1为正常大小,正常情况下,变形时的原点在元素中心位置,但,可改变原点位置transform-oringin:50% 50%(默认位置,中心)放:transform:scale(1.5);缩:transform:scale(0.6);旋转(3D立体效果):transform:ro.原创 2021-02-20 00:40:53 · 2098 阅读 · 0 评论 -
滑动按钮(阴影效果、过渡效果、伪类选择器、线性渐变)
伪类选择器linear-gradient:表示线性渐变阴影效果浏览器在元素底部画一个和他形状一致的影子,通过对影子的移动来完成阴影效果,也进行模糊处理,更真实transition:可用多张图可制成动画,电影拍摄原理也如此,1s之内至少拍摄24张画面,一张画面叫做一帧,1s之内画面越多,帧率越高,捕捉细节越多过渡方式<!DOCTYPE><head> <title>滑动按钮</title> &l..原创 2021-02-19 18:00:50 · 133 阅读 · 0 评论 -
语义化标签
分别用header(头部)、footer(底部)、main(主要部分)、section(区段,可有多个article)、nav(导航部分)、aside(侧边栏部分)、article(文章、内容,又分为头、脚、中间部分)这些标签来代替divbox-sizing: border-box;<!DOCTYPE><head> <title>语义化标签</title> <meta http-equiv="Content-Typ.原创 2021-02-11 13:55:44 · 118 阅读 · 1 评论 -
overflow
overflow:hidden;overflow:auto;此时出现滚动条overflow-x:hidden;overflow-y:auto;案例代码:<!DOCTYPE><head> <title>定位</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/cs.原创 2021-02-11 13:25:58 · 77 阅读 · 0 评论 -
hover鼠标的划入效果、精灵图的使用
hover鼠标的划入效果当鼠标划入到元素上,背景颜色、链接效果等可设置变化。当想增加鼠标划入效果时,用 :hover 选择器。<!DOCTYPE><head> <title>定位</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <style type="text/css"> .test{原创 2021-02-10 14:04:23 · 385 阅读 · 0 评论 -
布局中的定位
设置定位这样设置,要定位的元素添加定位方式,参考系设置为absolute.那该元素的位置,就是相对于设置了relative的元素而言元素设置了position:absolute后,则找参考系。从离得最近的元素(B)开始查找,当有元素设置了position:relative/absolute/fixed后,则该元素为参考系,否则继续查找,当找不到时,则浏览器窗口为参考系。固定定位position:fixed :元素相对于整个网页来定位的,给想要定位的元素写上left和top值,那么在页面滑.原创 2021-02-07 23:53:20 · 49 阅读 · 0 评论 -
CSS属性
backgroundborder只可以省略最后一个,即颜色fontmarginpadding与margin用法一样颜色原创 2021-02-07 13:39:25 · 121 阅读 · 1 评论 -
display属性
块级元素:可以设置元素的宽高和边距,元素会自动换行行内元素:不可以设置元素的宽高和边距,元素不会自动换行行内块级元素:可以设置元素的宽高和边距,元素不会自动换行 display属性: 规定元素生成框类型 block:元素会被显示 none:元素会被隐藏 inline:元素会被显示成行内元素,元素前后没有换行符 inline-block:行内块级元素(既可以设置宽高,又可以在一行<!DOCTYPE><head> <...原创 2021-02-07 13:19:41 · 71 阅读 · 0 评论 -
布局案例
首先每个都设置左右margin,然后,最左最右再分别设置相应的margin为none,更详细的名称,权重也会更大<!DOCTYPE html><html> <head> <meta charset="utf-8"/> <title>盒模型</title> <style> *{ margin: 0;/*将所.原创 2021-02-07 12:15:45 · 170 阅读 · 0 评论 -
盒子模型
联系元素的浮动布局这篇文章看使用div得到各个区域,可将几个div用一个div围住,可以对区域的属性进行设置,使区域之间有间隔,如下图元素的padding、margin、border(边框以内为元素)margin可以统一设置同一个数值,也可以分开4个位置设置padding所谓填充,就是指一个元素的内部,增加空间,也可以称为内边距。和外边距不同的是,填充会改变元素大小,随着填充的增加,元素会被撑大。变化如下:内边距和外边距一样,也可以分4个方向设置代码及解读:原创 2021-02-06 13:32:29 · 134 阅读 · 2 评论 -
元素的浮动布局
不涉及浮动,直接编写时,排列如下:添加浮动时,此时,那3块与灰色发生了重叠 3. 灰色块去除浮动法一:clear:left/right/both(如果不希望当前元素受到前面浮动元素的影响,就给当前元素增加clear样式,即表示当前元素不受到左/右/左右浮动影响)使灰色块换行,可以在框中3块的外部再包裹一个div,再使灰色块清除浮动,这样就可以使灰色块与前一块元素不产生浮动关系这里的包裹了3个元素的那个div还需要设置高度,而不能被子元素撑开,因为这3个元素是浮动的,不占据空间..原创 2021-02-05 15:28:04 · 68 阅读 · 0 评论 -
CSS选择器
原始方法编写一个简单的网页,很多重复的,显得代码不够简化<!DOCTYPE html><html style="background-color: #ddd;"> <head> <meta charset="utf-8"/> <title>虾虾有限公司</title> </head> <body style="margin: 0"> .原创 2021-02-03 22:27:17 · 71 阅读 · 0 评论 -
容器的作用
style属性:可设置width,height,background-color,color,text-align:center等值,颜色可通过颜色拾色器获取值来填入,";"分隔text-align:center; 让内部元素水平居中margin:auto; 让元素本身水平居中background-color:gray; 设定背景颜色font-size:24px; 设定字体大小color:white;设定文字颜色<span></span>:span是原创 2021-02-03 09:25:13 · 294 阅读 · 0 评论 -
表单
<input type="">:type的取值可为text(文本输入框)、password(密码输入框),button(普通按钮)、submit(提交按钮)、reset(重置按钮)、radio(单选)、checkbox(复选框·)、file(文件选择框)form必须有action属性,表示表单数据的提交地址所有需要提交的数据,input必须有name属性input按钮的文字,使用value属性表示input必须放在form标签内才能提交<form method="">&l.原创 2021-02-03 00:55:59 · 171 阅读 · 0 评论 -
简单表格制作
1、参数boder表示边框,cellspaing表示单元格间隙控制行、列的宽度:使用width,height文字默认居左对齐,可通过align控制可通过来控制一列,但是貌似不能通过align控制文字排列方式那么,可通过控制<tr align=""></tr>来控制文字位置2、合并单元格合并单元格,要把多余的单元格删除由6×7改造来的<!DOCTYPE html><html> <head> <原创 2021-02-02 19:21:11 · 77 阅读 · 0 评论 -
标签
标签<!DOCTYPE html> 声明为 HTML5 文档,告诉浏览器使用HTML5标准来解释这个网页<html></html> 元素是 HTML 页面的根元素<head></head> 这里的信息都是对网页的整体说明,元素包含了文档的元(meta)数据,如 <meta charset="utf-8"> 定义网页编码格式为 utf-8。<title></title> 元素描述了文档的标题<bo原创 2021-02-02 19:18:47 · 83 阅读 · 2 评论 -
图片的保存、显示与背景使用
如果想保存网页中的照片,点击右键又没有“图片另存为”,按“F12”,切换到”Elements”,点击左上角箭头,再点击图片,在右边代码区域会有一个图片链接,右键,“open in new tab”,就打开了,再右键,“图片另存为”。但有些图片下载后是由若干的小图片合成的,如果想下载其中一张小图,就要用到PhotoShop了,用“切片工具”,框出来,保存ctr+alt+shift+s,所有用户“切片”...原创 2021-02-02 19:22:13 · 130 阅读 · 0 评论