前端开发学习笔记
文章平均质量分 81
此为学习前端时所作笔记
AncilunKiang
好好学习,天天向上。
展开
-
Element UI
基于 Vue 2.0 的桌面端组件库,可在查看中文文档。原创 2023-05-24 10:40:42 · 68 阅读 · 0 评论 -
Vue.js
通过vue-cli实现的交互式的项目脚手架,通过执行命令方式即可下载相关依赖通过@vue/cli实现的零配置原型开发。一个运行时依赖 (),该依赖:可升级;基于 webpack 构建,并带有合理的默认配置;可以通过项目内的配置文件进行配置;可以通过插件进行扩展。一个丰富的官方插件集合,集成了前端生态中最好的工具。一套完全图形化的创建和管理 Vue.js 项目的用户界面。原创 2023-05-24 10:39:47 · 88 阅读 · 0 评论 -
Node.js
简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引擎执行Javascript的速度非常快,性能非常好。原创 2023-05-23 15:59:41 · 53 阅读 · 0 评论 -
移动端开发
区别于传统的页面开发,移动端开发是指利用移动设备的特性以及CSS3提供的各种相对单位来实现移动端页面布局开发。移动设备是指便携的移动电子设备。包括手机、平板、小屏幕电脑等。原创 2023-05-23 15:58:43 · 346 阅读 · 0 评论 -
Canvas
因为JavaScript在HTML5之前缺乏实现复杂动画和几何图形的绘制技术,在HTML5 新增了 canvas 元素,使用 JavaScript 在网页上绘制图像。画布是一个矩形区域,可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法,可以创建丰富的图形引用。canvas绘图技术利用HTML5提供的<canvas>作为画布,利用JavaScript配套的api来实现绘制几何图形、绘制图形,配合JavaScript 定时器可以实现复杂动画。原创 2023-05-23 15:56:15 · 66 阅读 · 0 评论 -
正则表达式
正则表达式(regular expression)描述了一种字符串匹配的模式(pattern),可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。构造正则表达式的方法和创建数学表达式的方法一样。也就是用多种元字符与运算符可以将小的表达式结合在一起来创建更大的表达式。正则表达式的组件可以是单个的字符、字符集合、字符范围、字符间的选择或者所有这些组件的任意组合。正则表达式是由普通字符(例如字符 a 到 z)以及特殊字符(称为"元字符")组成的文字模式。原创 2023-05-23 15:55:18 · 52 阅读 · 0 评论 -
jQuery
animate():用户自定义动画jQuery标签变量名 . animate({"css属性名1" : "css属性值1" , "css属性名2" : "css属性值2" , "css属性名n" : "css属性值n" } , 动画持续毫秒时间);animate基本上只支持跟位置和尺寸相关的动画,其他的基本都不支持。如果要颜色的动画,可以使用css3,用JavaScript来切换class达到控制动画的目的。原创 2023-05-23 15:53:33 · 66 阅读 · 0 评论 -
BOM
widow对象是每一个页面都会有的对象,由JavaScript程序自动生成,每个页面的window对象是不一样的。JavaScript提供了两个API来实现在一段时间之后执行指定的JavaScript代码的功能,根据指定js代码是否重复执行分为两种定时器:延时定时器以及间隔定时器。如果不清除定时器就新增同样的定时器,则这些定时器就会叠加,反应为执行代码频次增加(像分时复用一样),所以在新增定时器时记得清除旧定时器。定时器的标识符指的是定时器的id,表示要暂停哪个定时器,定时器的标识符可以通过。原创 2023-05-23 15:49:18 · 70 阅读 · 0 评论 -
DOM
JavaScript为了能够在处理事件相关代码时,能够获取该事件的相关信息,JavaScript在触发某事件时会自动创建一个event对象并收集该事件的相关信息,该event对象会作为事件处理函数的实参,所以我们在写事件处理代码时需要定义形参接收。事件委托又称事件代理,指利用了事件执行阶段中的冒泡机制并配合event对象来达到精简代码量效果的编程技巧,它不仅可以减少事件处理程序的代码量,还可以管理事件处理代码。比如事件的触发标签,事件类型名,甚至可以控制冒泡行为,获取触发事件时鼠标的所在位置。原创 2023-05-23 13:01:09 · 72 阅读 · 0 评论 -
JavaScript
90年代早期,浏览器只能进行文字图片的阅读,不具备交互功能。95年,火狐前身-即网景公司内部的工程师(布兰登里奇)花了10天时间设计出了JavaScript去实现动态页面,原本叫livescipt。当时是因为蹭java的热度,同时JavaScript研发方之一也是java的开发商sun。网景公司因JavaScript迅速打入市场。IE不甘寂寞,设计出了功能类似的网页编程语言Jscript来应对JavaScript,即后来的typescript。原创 2023-05-23 11:54:11 · 64 阅读 · 0 评论 -
图表
图表 图标框架 Hightcharts 实例丰富, 文档是英文 稳定性比Echarts好 官网 Echarts 百度地图团队开发。 能够结合百度地图一起使用 内部使用vue语法来写数据部分代码 官网原创 2023-05-23 11:16:53 · 48 阅读 · 0 评论 -
Bootstrap
传统的使用div+CSS实现响应式布局,为了适配各种设备,会写大量的CSS代码,导致开发效率降低。Bootstrap是一个移动端优先用于快速搭建响应式布局的前端UI框架,能够使用已经写好的代码用于搭建出一个具有良好适应性的页面。Bootstrap内置了很多的组件,比如轮播图、标签页、分页、表单等,用户可以直接使用。Bootstrap还提供了一套用于构建响应式布局的栅格系统,用于快速搭建一个良好适应性的页面布局。但Bootstrap有些内置组件不易修改,其本身用了JavaScript来实现的。原创 2023-05-23 09:48:54 · 344 阅读 · 0 评论 -
SASS
Sass(Syntactically Awesome Stylesheets)直译是语法牛逼的层叠样式表语言,是一个将脚本解析成CSS的脚本语言,即SassScript。用部分的Sass代码代替之前写的繁琐的CSS代码,能极大的提高编写CSS的效率。底层是由一个面向对象的编程语言ruby来编写的。可以解决权重问题、样式的重复使用导致修改繁琐问题、有规律的代码编写繁琐问题,可以实现样式切换。原创 2023-05-22 21:53:25 · 56 阅读 · 2 评论 -
CSS3
默认2D情况下,该标签里面的子标签所有的转换会以2D的形式进行展示,并且子标签的活动空间全在父标签所在平面上。:选择作为其父标签倒数第n个同类型的子标签的标签,而非指该标签本身的倒数第n个同类型的子标签。:选择作为其父标签第n个同类型的子标签的标签,而非指该标签本身的第n个同类型的子标签。:选择作为其父标签最后一个子标签的标签,而非指该标签本身的最后一个子标签。:选择作为其父标签第一个子标签的标签,而非指该标签本身的第一个子标签。:选择作为其父标签第n个子标签的标签,而非指该标签本身的第n个子标签。原创 2023-05-22 21:53:17 · 55 阅读 · 2 评论 -
BFC
BFC块级格式化上下文:当一个块级标签满足一定条件时会触发BFC,触发后会带有BFC区域的特点,我们可以利用这些特点辅助解决常见的布局问题,比如浮动父标签高度塌陷,或者margin带跑或层叠问题。IFC(inline Format context)行内格式化上下文:规定了行内标签以及行内块级标签在该空间中如何进行排列。FC(format context)格式化上下文:指的是页面中的一块区域,这块区域可能是一个。默认情况下,IFC区域的高度是由该行空间中高度最高的行内(行内块)标签来决定的。原创 2023-05-22 21:49:59 · 48 阅读 · 1 评论 -
CSS布局
本身不具有太多默认的样式或属性,对CSS来说,可塑性极强,可以实现任何想要的效果。比如布局的一部分,或者模块之类的。固定定位:需要固定在页面的标签,代码建议放在</body>之前。绝对定位:位置比较特殊并且不固定的标签。特殊位置:有层叠效果的标签,是参考父标签,本身不占空间一般情况,绝对定位会搭配相对定位使用。子绝父相相对定位:有层叠效果的标签,同时自己需要占空间的。原创 2023-05-22 21:43:27 · 53 阅读 · 1 评论 -
CSS进阶
当不同的选择器匹配到同一个标签并对其同一个CSS属性同时进行设置时*(即层叠)*,CSS提供了一套权重机制解决属性的最终归属问题,根据权重大小来决定CSS属性的最终归属。可以实现给首行、首个字母设置样式、针对用户选择的文字设置样式、在元素的内容之前或之后插入内容。给每一种基础的选择器(id、class、标签、伪类)设置为不同的权值,权重的数值即为选择器的权值之和。不同浏览器厂商对HTML和css的解析是不一样的,这是厂商所设计出来的浏览器内核不一致的缘故。:给标签内容的第一个字符设置样式。原创 2023-05-22 21:39:44 · 52 阅读 · 0 评论 -
CSS技巧
源代码中连续几个内联级标签中的换行在浏览器中会被解释为一个空格,这是IE才会有的问题,空格和回车都会被显示为一个。如果想要实现子div在父标签中使用绝对定位,建议给父标签设置相对定位,这样就不会对页面其他标签产生影响。:用于设置标签内部一行内容的垂直对齐,将其设置为标签的高度可以实现内部一行内容垂直居中。可以实现行内元素之间居中对齐(一般是参考图片或表单元素)。:用于设置行内元素之间的垂直对齐方式,将其设置为。,是针对块级元素的居中,如果是行内元素用。.如果子标签有文字,就单独给子标签设置。原创 2023-05-22 21:37:34 · 67 阅读 · 0 评论 -
CSS
单纯使用HTML实现页面有很多不方便的地方,样式代码和内容代码混杂,比较杂乱,不易于阅读,且无法实现更好的效果。HTML和CSS的分工明确,HTML只负责页面的内容,及内容代码,CSS负责页面的美化,即样式代码。原创 2023-05-22 21:32:25 · 70 阅读 · 2 评论 -
前端体系
前端体系 第一阶段:网页实现 简单页面实现:HTML + CSS + Photoshop 复杂页面实现:CSS进阶 企业级页面快速构建:Sass + bootstrap 制作网站 第二阶段:JavaScript基础以及数据交互 第三阶段:JavaScript进阶 + Node.js(后台) + Webpack(打包) + MongoDB(数据库) 第四阶段:Vue + 微信小程序 第五阶段:React + React native 扩展:typescript flutter原创 2023-05-22 20:42:10 · 59 阅读 · 2 评论 -
HTML
定义列表由标题和正文表示<dl> </dl>:定义定义列表<dt> </dt>:标题<dd> </dd>:正文示例:< dl > < dt > 中国 </ dt > < dd > 中华人民共和国 </ dd > < dt > 美国 </ dt > < dd > 美利坚合众国 </ dd > < dt > 英国 </ dt > < dd > 大不列颠及北爱尔兰联合王国 </ dd > </ dl >原创 2023-05-22 21:09:24 · 84 阅读 · 2 评论