2020年08月_Lechar0327

原创前端需要知道的HTTP协议（基础）

前端需要知道的HTTP协议文章目录前端需要知道的HTTP协议一.简介二.HTTP协议主要特点三.HTTP报文1.请求报文1.请求行(request line)2.请求头(header)3.空行4.请求体2.响应报文1.状态行2.响应头3.空行4.响应体四.HTTP方法1.GET2.POST3.PUT4.HEAD5.DELETE6.OPTIONS五.HTTP状态码1. 1XX2. 2XX3. 3XX4. 4XX5. 5XX6.常见状态码一.简介HTTP是一种超文本传输协议,HTTP是一个在计算机世界里专

2020-08-26 01:31:56 562 1

原创 Sass 入门指南

Sass 入门文章目录Sass 入门一.Sass是什么?二.语法格式1.语法格式2.编译Sass3.编译配置选项(输出格式)1.未编译的样式2.nested 编译排版格式(嵌套的)3.expanded编译排版格式(展开的)4.compact编译排版格式(紧凑的)5.compressed 编译排版格式(压缩的)4.注释三.Scss1.变量1.普通变量2.默认变量3.全局变量4.特殊变量2.选择器嵌套3.属性嵌套4.@import导入样式1.扩展link和@import区别2.sass中的@import1.全

2020-08-25 00:50:15 442

原创 Http缓存机制及原理详解

Http缓存机制及原理文章目录Http缓存机制及原理一.前言二.缓存中的HTTP报文三.缓存规则1.第一次请求时缓存规则2.强缓存规则1.强制缓存规则下,缓存命中:2.强制缓存规则下,缓存未命中3.协商缓存规则1.协商缓存规则下,缓存命中2.协商缓存规则下,缓存未命中4.强缓存规则和协商缓存规则区别四.强缓存1.Expires2.Cache-Control五.协商缓存(对比缓存)1.Last-Modified/If-Modified-Since2.Etag/If-None-Match3.Last-Modi

2020-08-24 19:00:12 571 2

原创 CSS 伪类和伪元素归纳

CSS 伪类和伪元素1.伪类CSS伪类用于向某些选择器添加特殊的效果1.CSS3之前的伪类(状态伪类)图中前5个为状态伪类2.CSS3新增的伪类(结构伪类)属性说明X:first-child其父元素的首个子元素。IE7就可以支持X:last-child匹配父元素中最后一个X元素X:nth-child(n)用于匹配索引值为n的子元素。索引值从1开始X:only-child这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也

2020-08-23 21:25:00 354

原创 CSS BFC原理和应用

CSS BFC原理和应用文章目录CSS BFC原理和应用一.定义二.BFC渲染规则三.生成BFC四.BFC的一些应用1.防止margin重叠2.自适应2栏布局3.清除浮动五.总结一.定义BFC(Block Formattin Context) 直译过来就是块级格式化上下文,它是页面中一块独立渲染的区域,有一套渲染规则,只有Block-level box参与,也就是只有块级盒子参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部无关FC(Formattin Context)是

2020-08-23 16:11:59 300

原创四大内核与五大浏览器

四大内核与五大浏览器文章目录四大内核与五大浏览器一.简介二.浏览器内核组成三.四大内核1.Trident2.Gecko3.Webkit4.Chromium/Blink5.Presto(淘汰)四.五大浏览器1.IE浏览器2.Opera浏览器3.Safari浏览器4.Firefox浏览器5.Chrome浏览器五.浏览器前缀兼容写法1.-ms-2.-moz-3.-o-4.-webkit-六.总结一.简介浏览器最重要的部分是浏览器的内核,浏览器内核是浏览器的核心,也称之为"渲染引擎",用来解释网页语法并渲染

2020-08-22 22:48:17 525

原创 CSS 元素类型归纳

CSS 元素类型文章目录CSS 元素类型一.概念1.块级元素特点2.内联元素特点(行内元素)二.元素分类1.常见块级元素2.常见的内联元素(行内元素)3.行内块元素三.元素的转换1display属性2.基本类型3.垂直居中一.概念根据CSS显示分类,XHTML元素被分为:块状元素,内联元素(置换元素&&非置换元素)1.块级元素特点(1) 块状元素在网页中就是以块的形式显示,所谓块状就是元素显示未矩形区域(2) 默认情况下,块状元素都会占据一行,通俗的说,两个相邻块状元素不会出现并

2020-08-22 09:06:12 282

原创 CSS 清除浮动方式归纳

CSS 清除浮动方式文章目录CSS 清除浮动方式一.背景二.清除浮动1.空标签 clear:both(不推荐)1.优点2.缺点2.overflow:hidden(不推荐)1.优点2.缺点3.after伪元素清除浮动(推荐使用)1.优点2.缺点4.before和after双伪元素清除浮动()1.优点2.缺点浮动元素脱离文档流,就无法撑起父元素,会造成父元素的高度塌陷一.背景先来了解下为什么要清除浮动?#box{ border:1px solid red; /* overflow:

2020-08-21 16:03:42 358

原创 CSS3 选择器归纳

CSS3 选择器归纳文章目录CSS3 选择器归纳一.CSS之前的选择器1.元素选择器2.id选择器3.类(class)选择器4.属性选择器5.派生选择器6.相邻兄弟选择器二.CSS3新增选择器1.属性选择器2.结构性伪类选择器3.目标伪类选择器4.UI 元素状态伪类选择器5.动态伪类选择器6.否定伪类选择器7.层级选择器一.CSS之前的选择器1.元素选择器文档的元素就是最基本的选择器h1{ color:red;}2.id选择器可以为标有特定id的元素指定特定的样式#box{ b

2020-08-20 23:32:36 185

原创 CSS3 弹性盒Flex

CSS3 弹性盒Flex文章目录CSS3 弹性盒Flex一.简介二.Flex1.Flex布局是什么?2.容器属性1.flex-direction2.justify-content3.align-items4.flex-wrap5.align-content6.flex-flow3.子元素属性1.order2.flex-grow3.flex-shrink4.flex-basis5.flex6.align-self一.简介弹性盒子是CSS3的一种新的布局模式.CSS3弹性盒(flexbox)是一种当页面

2020-08-20 16:10:13 222

原创 CSS 几种常见的布局方式归纳

CSS 几种常见的布局方式文章目录CSS 几种常见的布局方式一.单列布局二.两列布局1.方法一利用float和margin-left实现2.方法二利用float和overflow实现3.方法三利用flex弹性盒4.方法四利用grid栅格布局5.方法五利用table布局三.三列布局1.方法一利用float和margin是实现2.方法二: 利用float3.方法三:利用绝对定位absolute4.方法四弹性盒flex5.方法五 table布局6.方法六 grid栅格布局7.圣杯布局8.双飞翼布局

2020-08-20 01:04:51 926

原创 CSS 水平垂直居中方式详解

CSS 水平垂直居中方式文章目录CSS 水平垂直居中方式1.绝对定位 absolute 负margin1.优点2.缺点2.绝对定位 absolute margin:auto1.优点2.缺点3.绝对定位 absolute calc1.优点2.缺点4.绝对定位 absolute transform1.优点2.缺点5.flex布局1.优点2.缺点6.table表格7.grid布局1.父元素指定子元素对齐方式:2.子元素指定自己的对齐方式:8.空元素span9.总结1.绝对定位 absolute 负margin

2020-08-18 23:44:39 271 2

原创 Html5新特性归纳

Html5新特性文章目录Html5新特性一.简介二.十大新特性1.语义化结构化标签1.section2.header3.footer4.nav5.article6.aside7.figure和figcaption8.main9.兼容低版本2.增强型表单3.多媒体标签1.视频 video2.音频 audio4.本地存储1.localStorage 永久存储2.sessionStorage 临时存储3.相同的API操作4.cookies,sessionStorage,localStorage的区别5.Canv

2020-08-17 22:23:31 299

原创 CSS 属性归纳

CSS 属性文章目录CSS 属性一.CSS属性组成和作用二.文本字体属性1.font-size 文体大小2.font-family 字体的类型3.font-weight 字体加粗4.font-style 字体倾斜5.font-variant 设置文本小型大写字母6.font 简写7.line-height 行高8.color 文本颜色9.text-transform 检索和设置对象中的大小写10. text-align 文本对齐方式11.text-decoration 文本修饰12.text-indent

2020-08-15 23:58:58 189

原创 CSS 盒模型和怪异盒模型

CSS 盒模型和怪异盒模型一.概念盒模型是CSS布局的基石,它规定了网页元素如何显示以及元素间相互关系,CSS定义所有元素都可以拥有像盒子一样的外形和平面空间,即都包含内容区,补白(填充,内边距),边框,边界(外边距)下面图片说明了盒子模型:Margin(外边距):在元素外边的空白区域,被称为外边距Border(边框): 元素的边框Padding(内边距) 元素内容到元素的边框之间的距离,也称补白.Content 盒子的内容二.标准盒模型和IE盒模型盒模型又分为标准盒模型(W3

2020-08-15 10:45:16 918

原创 JavaScript 执行上下文,执行栈,作用域链

JavaScript 执行上下文,执行栈,作用域链文章目录JavaScript 执行上下文,执行栈,作用域链一.简介二.执行上下文的类型1.全局执行上下文1.变量对象VO()2.变量对象详解3.let/const和变量对象的关系2.函数执行上下文1.活动对象3.Eval函数执行上下文三.执行栈1.调用栈管理执行上下文2.执行上下文是怎么创建的3.执行上下文谈this四.作用域和作用域链1.作用域2.作用域链一.简介执行上下文也叫执行环境,指的就是当前Javascript代码被解析和执行所在环境的抽象

2020-08-14 00:42:55 353

原创模块化之AMD,CMD,CommonJs,ES6 Module

模块化之AMD,CMD,CommonJs,ES6 module文章目录模块化之AMD,CMD,CommonJs,ES6 module一.简介二.AMD(异步模块定义)1.AMD原理2.为什么要使用require.js3.require.js的使用1.require加载模块2.require.config()3.require.config()全局配置4.define5.完整示例三.CMD(通用模块定义)1.CMD原理2.为什么要使用seajs3.seajs的使用1.define2.seajs.config

2020-08-12 00:25:30 353

原创 JavaScript 图片懒加载和预加载

JavaScript 图片懒加载和预加载文章目录JavaScript 图片懒加载和预加载一.背景二.懒加载1.为什么要使用懒加载?2.实现懒加载思路3.懒加载原理4.实现懒加载三.预加载1.为什么要使用预加载2.实现预加载思路3.实现预加载常见方法1.使用HTML标签2.使用Image对象3.使用ajax4.使用PreloadJS库四.懒加载和预加载区别1.概念2.区别3.意义一.背景目前各种电商网站层出不穷,大家都知道,电商网站的图片量是非常之多的,其实也不只是电商网站,更有些其他的,图片密集度比

2020-08-11 00:16:53 1173

原创 JavaScript this指向问题深入理解

JavaScript this指向问题深入理解文章目录JavaScript this指向问题深入理解一.前言二.this指向1.一般函数调用模式2.对象调用模式1.示例12.示例23.示例34.示例43.构造函数调用模式1.示例12.示例24.构造函数中指明返回值1.返回复杂对象2.返回值类型3.返回null5.事件绑定调用模式6.定时器函数调用模式7.箭头函数的this指向1.示例12.示例23.示例34.示例48.保存this指向三,强制改变this指向1.call()1.示例12.示例23.应用场景

2020-08-10 19:48:57 384

原创 JavaScript Set和Map数据结构

JavaScript Set和Map数据结构文章目录JavaScript Set和Map数据结构一.前言二.Set1.成员唯一2.属性方法1. size2.add()3.delete()4.has()5.clear()3.无法按下标查询,修改,排序4.Set的取值1.扩展运算符解构赋值2.forEach遍历3.for...of遍历4.keys()5.values()6.entries()5.Array和Set的对比6.Set的应用1.Set转为数组2.数组去重3.数组的map和filter可以间接用于Se

2020-08-09 21:54:43 573 4

原创聊一聊 ajax

聊一聊 ajax文章目录聊一聊 ajax一.概念二.ajax使用1.优点2.缺点3.使用(ajax五步曲)1.创建ajax对象2.连接服务器:设置请求行 open方法3.设置请求头4.设置请求体,发送请求5.等待数据响应,响应后处理数据三.封装一个ajax一.概念AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术(局部刷新)AJAX => Asynchronous Javascript And XML直译为:异步的JavaScript和XML比较直白的讲,AJAX就

2020-08-08 23:50:59 218 3

原创 JavaScript async和await

JavaScript async和await文章目录JavaScript async和await一,概念二.基本使用1.async1. async 使用形式2. 异常处理3. Promise对象状态的变化2.await1. await使用2. 错误捕捉3. 错误处理三.async/await执行顺序分析一,概念ES2017标准引入了async函数,使得异步操作变得更加方便,有人说,这是解决回调地狱的终极方案async函数是什么?其实它就是Generator函数的语法糖.async函数就是将Ge

2020-08-08 22:50:50 507

原创 JavaScript Generator 函数迭代器

Generator 函数迭代器文章目录Generator 函数迭代器一.概念二.使用Generator1.遍历器对象2.Generator写法3.yield表达式1.yield与return区别2.yield不存在于Generator时三.与Iterator的接口的关系一.概念Generator函数是ES6提供的一种异步编程解决方案,语法行为与传统函数完全不同.语法上,可以把它理解成Generator函数是一个状态机,封装了多个内部状态.形式上,Generator函数是一个普通函数,但是有两个

2020-08-08 18:26:15 290

原创谈一下JavaScript的几种for循环

谈一下Javascript的几种for循环文章目录谈一下Javascript的几种for循环一.for循环1.优点2.缺点二.forEach循环1.优点2.缺点三.for... in循环1.优点2.缺点四.for...of循环1.for...of遍历数组2.for...of遍历字符串3.for...of遍历Map4.for...of遍历Set5.for...of循环遍历DOM集合6.for...of循环遍历arguments1.优点2.缺点五.提高for循环性能要点一.for循环for循环,我们最

2020-08-08 00:26:59 499

原创 JavaScript Promise浅析

JavaScript Promise文章目录JavaScript Promise一.概念二.Promise对象1.回调地狱2.Promise使用2.1 reslove2.2 reject2.3 then()2.4 catch()2.4.1 catch()本质2.5 then()第二个函数和catch()区别2.6 finally()2.7 Promise对象本身是同步的2.8 Promise示例2.9 Promise链式调用2.10 Promise优点缺点1.优点2.缺点三.Promise.all()1.

2020-08-06 15:39:23 357

原创 JavaScript 检测数据类型的四种方式

JavaScript 检测数据类型的四种方式文章目录JavaScript 检测数据类型的四种方式一.typeof1 优点2.缺点二.instanceof1.优点2.缺点三.constructor1.优点2.缺点四.Object.prototype.toString.call()1.优点2.缺点3,扩展一.typeoftypeof操作符返回一个用来表示数据类型的字符串,注意typeof运算之后的结果都是字符串类型的注意:typeof是一个操作符,不是一个函数!1.“string” 值是字符串

2020-08-05 02:06:48 2030 1

原创 JavaScript 继承优缺点详解

JavaScript 继承文章目录JavaScript 继承一,构造函数继承(对象冒充继承)1.优点2.缺点二.原型链继承1.优点2.缺点三.组合继承(常用)1.优点2.缺点四.拷贝继承1.优点:2.缺点五.原型式继承1.优点2.缺点六.实例继承1.优点2.缺点七.寄生继承1.优点2.缺点八.寄生组合继承(常用)1.优点2.缺点九.ES6 Class继承(不用想了,我就要用这个,妥妥的)1.优点一,构造函数继承(对象冒充继承)原理:调用父类构造函数,并改变其中的this指向(bind,call,ap

2020-08-05 00:22:19 245

原创原型和原型链浅析

一.前言javascript与其它面向对象语言不同,在ES6没有引入class概念之前,javascript并不是通过类而是直接创建构造函数来创建实例.在javascript中,类不能描述对象可以干什么事,对象可以直接定义它自己的行为.因为根本不存在类! javascript一切皆对象,把js中的对象分为普通对象和函数对象.函数在js中是一等公民,所以把函数对象给区分出来.javascript是一种直译式脚本语言,是一种动态类型.弱类型,基于原型的语言二.属性:Prototype(原型)每个函

2020-08-03 19:37:54 734

原创 JavaScript BOM详解

JavaScript BOM文章目录JavaScript BOM一.概念及作用二.BOM和DOM对比三.BOM五大核心对象1.window对象1.1 常用窗口事件1.1.1 window.open() 打开新窗口1.1.2 window.close() 关闭新打开的窗口1.1.3 resizeTo和resizeBy 调整窗口大小1.1.4 window.onresize 调整窗口大小加载事件1.1.5 window.onload 窗口(页面)加载事件1.2 定时器1.2.1 window.setInter

2020-08-03 00:17:08 636 1

原创 JavaScript DOM详细解析

JavaScript DOM文章目录JavaScript DOM一.概念及作用二.DOM树1.节点类型1.1 文档节点1.2 元素节点1.3 文本节点1.4 属性节点1.5 注释节点2.nodeType属性3 nodeName属性4.nodeValue属性5.节点关系6.节点方法7.获取元素样式7.1 行间样式7.2 非行间样式7.3 getComputedStyle获取样式(不兼容IE678)7.4 currentStyle 获取样式 IE678的方法7.5 封装获取元素样式(兼容处理)8.offse

2020-08-02 20:01:38 1872 1

liuqiao0327的专栏