HTML+CSS+JS
文章平均质量分 77
从0开始到学会做项目
学前端的狗头苏丹
血泥相间,花瓣飘落。林中落雨,秋前盛夏。凌晨腾雾,潮起,潮落。
展开
-
Web存储
使用HTML5可以在本地存储用户的浏览数据。早些时候,本地存储使用的是 cookie。但是Web 存储需要更加的安全与快速. 这些数据不会被保存在服务器上,但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据,而不影响网站的性能。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。原创 2023-09-07 22:15:06 · 750 阅读 · 0 评论 -
什么是高度塌陷?
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度, 导致父元素的高度塌陷。 由于父元素的高度塌陷了,则父元素下的所有元素都会向上移动,这样将会导致页面布局混乱原创 2023-08-19 12:10:34 · 140 阅读 · 0 评论 -
ES6 Generator和Promise
Generator是ES6提供的一种异步编程解决方案,语法不同于普通函数;简单的把Generator 理解为一个状态机,封装了多个内部状态。执行Generator 函数会返回一个迭代器对象,可以通过调用迭代器next依次遍历Generator函数内部的每一个状态。Promise是一种异步编程解决方案,Promise是一个容器,保存着将来才会执行的代码;从语法角度来说Promise是一个对象,可以用来获取异步操作的消息。异步操作,同步解决,避免了层层嵌套的回调函数,可以链式调用降低了操作难度。原创 2023-07-18 18:54:18 · 497 阅读 · 0 评论 -
ES6迭代器、Set、Map集合和async异步函数
迭代器(Iterator)就是这样一种机制。它是一种接口,为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署Iterator接口,就可以完成遍历操作(即依次处理该数据结构的所有成员)。Set类似于数组,但是成员的值都是唯一的,没有重复的值。Set 本身是一个构造函数,用来生成 Set 数据结构。Set 构造函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。原创 2023-07-16 14:15:23 · 995 阅读 · 0 评论 -
ES6类-继承-Symbol-模版字符串
在javascript语言中,生成实例对象使用构造函数;ES6提供了类Class这个概念,作为对象的模板。定义一个类通过class关键字,ES6的类可以看成是构造函数的另一种写法。class可以通过extends关键字实现继承,子类可以没有构造函数,系统会默认分配。子类提供了构造函数则必须要显式调用super。super函数类似于借用构造函数。类似于Animal.call()。ES6引入的一种新的原始数据类型Symbol,表示独一无二的值。Symbol函数可以接受参数,表示对于这个唯一值的描述。原创 2023-07-15 19:40:04 · 999 阅读 · 0 评论 -
ES6基础语法
解构ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构,解构的本质属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。如果解构不成功,变量的值就等于undefined。原创 2023-07-11 20:48:58 · 1043 阅读 · 0 评论 -
ECMAScript6和其常量变量的声明
ECMAScript(简称ES)的几个重要版本ES6是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017 等,ES6 的第一个版本,在 2015 年 6 月发布了正式名称就是《ECMAScript 2015 标准》(简称 ES2015)。ES6在ES5的基础上拓展了很多新特性。原创 2023-07-10 16:17:50 · 419 阅读 · 0 评论 -
Ajax简介和实例
AJAX = 异步 JavaScript 和 XML。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。原创 2023-07-08 13:15:35 · 737 阅读 · 0 评论 -
DOM事件机制(事件流、事件委托、事件类型)以及BOM
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。JavaScript 能够在事件发生时执行,比如当用户点击某个 HTML 元素时。 JavaScript与HTML之间的交互是通过事件实现的。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。原创 2023-07-05 22:21:38 · 491 阅读 · 0 评论 -
DOM“文档对象模型”
DOM是JS操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个JS对象,从而可以用脚本进行各种操作(比如增删内容)。原创 2023-07-05 18:05:24 · 665 阅读 · 0 评论 -
面向对象之创建对象模式和继承模式
从前面的学习可以知道创建单个对象有两种方法,一种是直接使用字面量 var obj = {},另一种则是使用构造函数 var obj = new Object() 来创建单个对象的。那么,多个对象又如何创建呢?接下来,将介绍四种创建多个对象的方法。原创 2023-07-04 17:04:05 · 164 阅读 · 0 评论 -
面向对象的程序设计
在 ES 中,数据的分类分为基本数据类型和引用类型。而基本包装类型,严格来说不属于上面两个中的任意一个,但是又和这两种类型息息相关。基本数据类型和引用类型这两个类型其中一个很明显的区别是,引用类型有自己内置的方法,也可以自定义其他方法用来操作数据,而基本数据类型不能像引用类型那样有自己的内置方法对数据进行更多的操作。但基本数据类型真的没有吗?原创 2023-07-02 12:04:33 · 179 阅读 · 0 评论 -
正则表达式
正则表达式(英语:Regular Expression,在代码中常简写为regex、regexp或RE)使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。搜索模式可用于文本搜索和文本替换。验证是否为11位有效手机号码 以1为开头,第二位为3,4,5,7,8中的任意一位,最后以0-9的9个整数结尾密码验证匹配密码,必须包含大写,小写和数字,和特殊字符(!,@,#,%,&),且大于6位原创 2023-06-28 19:17:27 · 458 阅读 · 0 评论 -
JS之闭包
简单讲,闭包就是指有权访问另一个函数作用域中的变量的函数。MDN 上面这么说闭包(closure)是一个函数以及其捆绑的周边环境状态(词法环境)的引用的组合。换而言之,闭包让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中,闭包会随着函数的创建而被同时创建。闭包产生条件:1.嵌套函数。2.函数内部存在对函数外部变量的引用。3.变量不会被回收机制回收 缓存变量。创建闭包最常见方式,就是在一个函数内部创建另一个函数。原创 2023-06-28 17:15:00 · 81 阅读 · 0 评论 -
函数的基本知识
函数允许我们封装一系列代码来完成特定任务。当想要完成某一任务时,只需要调用相应的代码即可。方法(method)一般为定义在对象中的函数。JavaScript 使用关键字function定义函数。函数可以通过声明定义,也可以是一个表达式。作用域中本身没有这个变量 但是想要获取到该变量对应的值作用域链 自由变量沿着作用域逐层向上寻找的过程构成了作用域链/*** 作用域链 自由变量沿着作用域逐层向上寻找的过程构成了作用域链* 自由变量 作用域中本身没有这个变量 但是想要获取到该变量对应的值*/原创 2023-06-26 19:34:34 · 88 阅读 · 0 评论 -
数组API的重构(shift、unshift、forEach、every、some、filter、map)、数组去重的方法、扁平化数组的方法以及返回字符串最长单词的长度/最长单词
数组API的重构(shift、unshift、forEach、every、some、filter、map)、数组去重的方法、扁平化数组的方法以及返回字符串最长单词的长度/最长单词原创 2023-06-23 15:36:06 · 213 阅读 · 0 评论 -
数组API之操作方法、位置方法和迭代方法
数组API之操作方法concat、slice、splice,位置方法indexOf、lastIndexOf和迭代方法every、some、forEach、filter、map原创 2023-06-23 14:32:23 · 91 阅读 · 0 评论 -
数组API之数组序列化、构造函数的静态方法、栈和队列的方法和数组排序方法
序列化的定义、数组API之数组序列化、构造函数的静态方法、栈和队列的方法和数组排序方法原创 2023-06-23 13:48:11 · 493 阅读 · 0 评论 -
数组的创建、数组部分API以及练习
ECMAScript数组是有序列表,是存放多个值的集合。 有以下特性: 每一项都可以保存任何类型的数据。 数组的大小是可以动态调整。 数组的length属性:可读可写,可以通过设置length的值从数组的末尾移除项或向数组中添加新项.原创 2023-06-19 19:51:29 · 95 阅读 · 0 评论 -
JS原型的介绍、数据属性和访问器属性定义方法以及对象序列化
JS原型的介绍、数据属性和访问器属性定义方法以及对象序列化原创 2023-06-19 19:11:47 · 491 阅读 · 0 评论 -
JS对象的创建,访问以及遍历删除新增修改以及属性的检测
JS对象的创建,访问以及遍历删除新增修改以及属性的检测。原创 2023-06-19 11:25:16 · 538 阅读 · 0 评论 -
隐式转换和显式转换
隐式转换和显示转换基本数据类型隐式转换、引用数据类型隐式转换。显式转换将其他类型转为string类型、boolean类型、number类型原创 2023-06-18 14:21:45 · 180 阅读 · 0 评论 -
算术运算符、一元运算符、赋值运算符、比较运算符、逻辑运算符
操作数放到typeof的后面,会返回当前操作数的类型,对于数值类型可以准确返回,对于引用类型,Function会返回'function',其他都只会返回'object'。当一个操作数为数字字符串时,除了“+”外都会将数字字符串转换为数字进行运算,这里涉及隐式转换,我们后面再讲。如果两个操作数第一个是假的 返回第一个操作数 null "" NaN false undefined 假的操作数。经常被用作条件判断时的取反操作,类型判断等,还可以用'!或者操作数 如果第一个操作数是假的 返回第二个操作数。原创 2023-06-15 19:57:19 · 144 阅读 · 0 评论 -
浅谈深拷贝和浅拷贝
对于引用数据类型的成员变量,比如成员变量是数组、某个类的对象等,浅拷贝就是引用的传递,也就是将成员变量的引用(内存地址)复制了一份给新的成员变量,他们指向的是同一个事例。在一个对象修改成员变量的值,会影响到另一个对象中成员变量的值。对于引用数据类型的成员变量,深拷贝申请新的存储空间,并复制该引用对象所引用的对象,也就是将整个对象复制下来。对于基本数据类型的成员变量,浅拷贝直接进行值传递,也就是将属性值复制了一份给新的成员变量。引用数据类型的特点:存储的是该对象在栈中引用,真实的数据存放在堆内存里。原创 2023-06-15 15:10:47 · 72 阅读 · 0 评论 -
初识JS/JavaScript及其数据类型
1.ECMAScript 核心js 基础语法和内置对象函数。2.DOM(Document Object Model)文档对象模型。3.BOM(Browser Object Model)浏览器对象模型。js是一门函数优先,具有原型编程的一门需要解释器解析的编程语言。原创 2023-06-15 09:13:16 · 249 阅读 · 0 评论 -
CSS-animation动画案例
由于该技术的规范还没有稳定,在使用前要先确保浏览器对其兼容性。Animations是css3的一个模块,使用keyframes定义如何随着时间的移动改变CSS的属性值,可以通过指定它们的持续时间,重复次数,如何重复来控制关键帧的行为。Animations由两部分组成:css动画的配置,以及一系列的keyframes(用来描述动画的开始、过程、结束状态)。不需要了解任何Js技术即可完成动画的制作。原创 2023-06-14 20:01:56 · 220 阅读 · 0 评论 -
使用CSS过渡-Transitions实现图片手风琴效果
transition:property duration timing-function delay原创 2023-06-13 16:55:12 · 356 阅读 · 0 评论 -
css实现水平垂直居中的方法
水平垂直居中的方法:方法(1)通过margin属性,方法(2)通过padding属性,方法(3)“子绝父相”,方法(4)flex弹性盒子原创 2023-06-08 17:00:16 · 302 阅读 · 0 评论 -
相对定位、绝对定位和固定定位
相对定位就是相对于自己以前在标准流中的位置来移动。绝对定位就是相对于body来定位。绝对定位在这里分两种情况:(1)父元素没有或者没设置相对定位,相对于浏览器视口区域进行定位。(2)父元素设置了相对定位,相对于父元素/祖先元素进行定位。固定定位可以让某个盒子不随着滚动条的滚动而滚动。原创 2023-06-08 16:20:45 · 459 阅读 · 0 评论 -
什么是外边距塌陷以及BFC是什么?(12)
外边距合并,即外边距塌陷。BFC全称:Block Formatting Context,即块级格式化上下文。原创 2023-06-06 17:36:54 · 85 阅读 · 0 评论 -
盒子属性和盒子模型(11)
IE盒子宽:width=contentWidth+paddingLeft+paddingRight+borderLeft+borderRight。盒子的高:height+paddingTop+paddingBottom+borderTop+borderBottom。盒子的宽:width+paddingLeft+paddingRight+borderLeft+borderRight。盒子所占页面宽:盒子宽+marginLeft+marginRight。其中width是设置给盒子本身的。原创 2023-06-06 16:45:13 · 72 阅读 · 0 评论 -
CSS中Overflow属性(10)
overflow是CSS的简写属性,其设置了元素溢出时所需的行为——即当元素的内容太大而无法适应它的块级格式化上下文时。原创 2023-06-06 11:28:45 · 58 阅读 · 0 评论 -
面试题:使用 css隐藏页面元素
css隐藏元素的方式以及重排、重绘原创 2023-06-03 19:47:49 · 138 阅读 · 0 评论 -
CSS列表样式和其他样式(9)
列表样式和其他样式的应用原创 2023-06-03 17:08:54 · 113 阅读 · 0 评论 -
前端学习之CSS颜色属性、文本属性和文本装饰属性的使用(8)
CSS颜色属性、文本属性和文本装饰属性的使用原创 2023-06-02 17:51:54 · 87 阅读 · 0 评论 -
前端学习之CSS简介和选择器(6)
css简介和css选择器原创 2023-06-02 17:10:59 · 55 阅读 · 0 评论 -
前段学习之CSS三大特性(7)
CSS三大特性原创 2023-06-02 17:11:06 · 65 阅读 · 0 评论 -
前端学习之HTTP协议的介绍(5)
HTTP协议介绍原创 2023-06-02 16:26:41 · 99 阅读 · 0 评论 -
前端学习之功能元素的使用(4)
列表标签、表格标签和表单标签的简易使用原创 2023-06-02 16:08:28 · 79 阅读 · 0 评论 -
前端学习之音视频及其谷歌浏览器无法自动播放的解决方法(3)
音视频无法自动播放的问题解决方法原创 2023-05-29 17:52:45 · 2341 阅读 · 0 评论