NPFik--CSDN博客

原创第二章：HTML5基础---新增的语义化标签、电量、磁盘容量、新增下拉列表:模拟搜素功能、新增多媒体标签、新增表单type、新增表单属性、响应式页面

header头部nav导航main主要内容区section板块article段落figure>figcaption类似于自定义列表footer底部time时间内联元素mark标记内联元素。

2022-07-21 19:03:45 157 1

原创第八章：CSS3基础---背景属性、锚点、雪碧图/精灵图/css sprites/图片整合技术、c3盒子模型属性、c3弹性盒

1.背景色background-color2.背景图background-imageurl()3.背景图重复background-repeat4.背景图位置background-position00;5.背景图固定background-attachmentscroll(滚动)/fixed(固定)6.背景图大小background-size宽度高度;-数值px-数值%图片不断的拉伸，直到覆盖到整个容器，可能会出现背景图显示不全的情况。...

2022-07-21 19:00:39 219

原创第七章：CSS3基础---变形旋转 2d/3d、c3边框图片、变形缩放 2d/3d、变形倾斜2d、动画属性

x轴旋转transformrotateX(数值deg)y轴旋转transformrotateY(数值deg)z轴旋转transformrotateZ(数值deg)/rotate(数值deg)xy轴旋转rotateX(数值deg)rotateY(数值deg);有顺序xyz轴旋转rotate3d(x,y,z,d)xyz是否旋转1旋转0不旋转d旋转度数rotateX(数值deg)rotateY(数值deg)rotateZ(数值deg)...

2022-07-21 18:58:27 315

原创第六章：CSS3基础---层级选择器、属性选择器、c3状态伪类选择器、结构伪类选择器、否定选择器、渐变属性、过渡属性、盒子阴影、文字阴影、变形属性---2d/3d

1.[属性名]{}根据属名选择性2.[属性名="属性值"]{}根据属性名和属性值匹配3.[属性名^="值"]{}属性名对应的值以该值开头4.[属性名$="值"]{}属性名对应的值以该值结束5.[属性名*="值"]{}属性名对应的值中包含该值。...

2022-07-15 20:51:54 123

原创第五章：CSS基础---定位

没达到top值之前,元素是正常显示,类似于相对定位,达到top值之后,类似于固定定位,不跟随滚动条滚动,且脱离文档流,一般设置top0;绝对定位的元素会一层一层向上找带有定位属性的祖先元素,如果找到body后~还没有找到,就参考浏览器的第一屏窗口(初始包含块)没有滚动之前的区域。3.移动的时候优先考虑盒模型属性,一般相对定位不会独立使用,会和绝对定位结合使用。绝对定位的元素会一层一层向上找带有定位属性的祖先元素，先找到谁就参考谁。1.绝对定位的元素，宽度/高度/方向里面设置百分数,参考的是参考物。...

2022-07-15 20:37:41 399

原创第四章：CSS基础---伪元素选择器(权重1）、高度塌陷、BFC(Block Formating Context): 块级格式化上下文、css属性继承、表格css属性补充、表格标签补充、表单集

1.选择第一个字符只针对块元素元素first-letter{}元素2.选择第一行只针对块元素元素first-line{}元素3.给元素的里面的前面添加内容内联元素元素before{"";如果有字就加到引号里面，如果没字，就写空引号,必须存在red;100px;}4.给元素的里面的后面添加内容内联元素元素after{"";如果有字就加到引号里面，如果没字，就写空引号，必须存在}...

2022-07-15 20:32:26 180

原创第三章：CSS基础---盒模型、margin补充、溢出属性、单行文本溢出显示省略号、隐藏属性、宽度自适应(自己变化)、高度自适应(自己变化)、高度塌陷

img引入的图片会自带底部大约3px的留白block}

2022-07-15 20:26:57 201

原创第二章：CSS基础---字体四件套、文本属性、列表属性、边框属性、背景属性、img引入的图片和背景图的区别、伪类选择器、元素类型、浮动类型

1）字体大小数字px;默认大小16px一般设置字体大小为偶数（2）字体加粗font-weightbold加粗100-900整百不带单位100-300偏细400-500正常600-900加粗normal正常去掉加粗效果（3）字体倾斜font-styleitalic倾斜normal正常去掉倾斜效果（4）字体类型font-family可以是中文,一般用引号引起，默认微软雅黑可以是英文,多个单词的英文用引号引起来，一个单词可以不引。...

2022-07-15 20:09:46 135

原创第一章：CSS基础---认识CSS、CSS选择器、css语法声明的格式、css代码、外部样式表、样式表套用

css(Cascading Style Sheet): 层叠样式表样式表 1. 行内样式表(内联样式表) - 2. 内部样式表 3. 外部样式表css样式代码格式 css属性名:css属性值;css属性名:css属性值;css样式宽度 width:数值px; 单位必须要加,0可以不加单位高度 height:数值px; 单位必须要加,0可以不加单位字体.........

2022-06-30 16:19:06 140

原创第一章：HTML基础

结构（html）+表现（css）+行为（JavaScript） html:超文本标记语言html为超文本标记语言双标签：单标签：其中双标签的为开始标签为结束标签属性与属性值用等号连接，其属性值课以用单引号也可以用双引号，一个属性可以拥有多个属性值 h1-h6标题标签独占一行 p段落标签可自动换行 b/strong字体加粗可在一行 i/em 字体倾斜可在一行 del 字体删除可在一行 u/ins 字体下划线...

2022-06-30 16:17:38 151

原创第十章：Vue3.0基础---其他Composition API、Composition API的优势、新的组件、其他

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。什么时候使用?如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。readonly: 让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景:

2022-06-07 18:42:26 160

原创第九章：Vue3基础---新特性、创建Vue3.0工程、常用的Composition API

Composition API（组合API）setup配置ref与reactivewatch与watchEffectprovide与inject......新的内置组件FragmentTeleportSuspense其他改变新的生命周期钩子data 选项应始终被声明为一个函数移除keyCode支持作为 v-on 的修饰符......官方文档：创建一个项目 | Vue CLI官方文档：安装 | Vue.jsvite官网：Vite中文网什么是vite？—— 新一代前端构建工具。优势如下：开发环境中，无需打包操作

2022-06-07 18:01:37 110

原创第八章：Vue基础---路由、ElementUI组件库

1. 理解：一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。2. 前端路由：key是路径，value是组件。1. 安装vue-router，命令：```npm i vue-router```2. 应用插件：```Vue.use(VueRouter)```3. 编写router配置项: 4. 实现切换（active-class可配置高亮样式）------vue中配置5. 指定展示位置------vue中配置二：几个注意点1

2022-06-07 17:23:34 296

原创第七章：Vue基础---脚手架配置代理、插槽、Vuex

在vue.config.js中添加如下配置：说明：1. 优点：配置简单，请求资源时直接发给前端（8080）即可。2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器（优先匹配前端资源）编写vue.config.js配置具体代理规则：说明：1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。2. 缺点：配置略微繁琐，请求资源时必须加前缀。1. 作用：让父组件可以向子组件指定位置插入ht

2022-06-07 17:01:32 181

原创第六章：Vue基础---全局事件组件、消息订阅与消息发布（pubsub）、nextTick、过度与动画

一：全局事件组件1. 一种组件间通信的方式，适用于<span style="color:red">任意组件间通信</span>。2. 安装全局事件总线： new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm }, ...... }) 3. 使用事件总线：1. 接收数据：A组件想接收数据，则在

2022-05-27 18:48:51 147

原创第五章：Vue基础---分析脚手架、ref属性、props配置、mixin混入、插件、scoped样式、浏览器本地存储、组件自定义事件

一：分析脚手架一：脚手架文件结构 ├── node_modules ├── public ├── favicon.ico: 页签图标 └── index.html: 主页面 ├── src ├── assets: 存放静态资源 │ └── logo.png │── component: 存放组件 │ └── HelloWorld.vue │── App.vue: 汇总所有组...

2022-05-27 18:22:52 78

原创第四章：Vue基础---内置指令、自定义指令、生命周期、非单文件组件、单文件组件

一：内置指令我们目前学过的指令： v-bind : 单向绑定解析表达式, 可简写为 :xxx v-model : 双向数据绑定 v-for : 遍历数组/对象/字符串 v-on : 绑定事件监听, 可简写为@ v-if : 条件渲染...

2022-05-14 19:47:23 236

原创第三章：Vue基础---条件渲染、列表渲染、收集表单数据、过滤器

一：条件渲染条件渲染：1.v-if 写法： (1).v-if="表达式" (2).v-else-if="表达式" (3).v-else="表达式"适用于：切换频率较低的场景。特点：不展示的DOM元素直接被移除。注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被“打断”。2.v-show写法： v-show="表达式"适用于：切换频率较高的场景。特点：不展示...

2022-05-13 19:07:40 392

原创第二章：Vue基础---数据代理、事件处理、计算属性、监视属性、绑定样式

一：数据代理一：数据代理是什么？数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）二：Vue中的数据代理1.Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）2.Vue中数据代理的好处：更加方便的操作data中的数据3.基本原理：（1）通过Object.defineProperty()把data对象中所有属性添加到vm上。（2）为每一...

2022-05-10 20:47:07 218

原创第一章：Vue基础---初识、模板语法、数据绑定、el与data、MVVM模型

一：初识Vue1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象2.root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法3.root容器里的代码被称为【Vue模板】4.Vue实例和容器是一一对应的5.真实开发中只有一个Vue实例，并且会配合着组件一起使用6.{{xxx}}中的xxx要写js表达式，且xxx可以自动读取到data中的所有属性7.一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新注意区分：js表达式和 .

2022-05-06 20:19:32 97

原创第一章：ES11基础---新特性

一：String.prototype.matchAll方法返回一个包含所有匹配正则表达式的结果及分组捕获组的迭代器 let str = `<ul> <li> <a>西游记</a> <p>上映日期: 1994-09-10</p> </li> <li>

2022-05-05 20:10:15 186

原创第一章：ES10基础---新特性

一：Object.fromEntries（将数组转成对象） //将二维数组转换成对象 const result = Object.fromEntries([ ['name','大学'], ['xueke', 'Java,大数据,前端,云计算'] ]); //将 Map 转成对象 const m = new Map(); m.set('name'

2022-05-05 19:53:18 95

原创第一章：ES9基础---新特性

一：Rest/Spread 属性Rest 参数与 spread 扩展运算符在 ES6 中已经引入，不过 ES6 中只针对于数组，在 ES9 中为对象提供了像数组一样的 rest 参数和扩展运算符 //rest 参数 function connect({host, port, ...user}){ console.log(host); console.log(port); console.log(user);

2022-05-05 19:34:54 470

原创第一章：ES8基础---新特性

一：async 和 awaitasync 和 await 两种语法结合可以让异步代码像同步代码一样（1）async 函数1. async 函数的返回值为 promise 对象2. promise 对象的结果由 async 函数执行的返回值决定async 函数 async function fn(){ //返回一个字符串 //return '大学'; // 返回的结果不是一个 Promise 类型的对

2022-05-04 19:49:48 195

原创第一章：ES7基础---新特性

一：Array.prototype.includesIncludes 方法用来检测数组中是否包含某个元素，返回布尔类型值 // includes indexOf const mingzhu = ['西游记','红楼梦','三国演义','水浒传']; //判断 console.log(mingzhu.includes('西游记')); 返回true console.log(ming

2022-05-04 19:39:35 358

原创第三章：ES6基础---Map、class 类、数值扩展、对象扩展、模块化

一：MapES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法：1) size 返回 Map 的元素个数2) set 增加一个新元素，返回当前 Map3) get 返回键名对象的键值4) has 检测 Map 中是否包含某个元素，返回 boolean 值5) clear 清空集合，返

2022-05-04 19:30:14 403

原创第二章：ES6基础---rest参数、Symbol、迭代器、生成器、Promise、Set

一：rest参数（ES6 引入 rest 参数，用于获取函数的实参，用来代替 arguments） ES5 获取实参的方式 function date(){ console.log(arguments); } date('孙悟空','唐僧','猪八戒'); rest 参数 function date(...args){ console.log(args);/

2022-05-04 18:56:55 128

原创第五章：JQuery基础---扩展插件

一：插件方法（1）扩展jQuery函数对象的方法 $.extend({ xxx: fuction () {} // this是$ }) $.xxx()（2）扩展jQuery对象的方法 $.fn.extend({ xxx: function(){} // this是jQuery对象 }) $obj.xxx()二：多库共存如果有2个库都有$, 就存在冲突解决方法 : jQuery库可以释放$的使用权, 让另一个...

2022-04-30 18:11:49 116

原创第四章：JQuery基础---核心对象属性、CSS、文档、筛选、事件、效果、

一：属性/文本操作标签的属性, 标签体文本 attr(name) / attr(name, value): 读写非布尔值的标签属性 prop(name) / prop(name, value): 读写布尔值的标签属性 removeAttr(name)/removeProp(name): 删除属性 addClass(classValue): 添加class removeClass(classValue): 移除指定class val() / val(value)

2022-04-29 21:26:44 748

原创第三章：JQuery基础---核心函数选择器、工具方法

一：是什么？以及作用定义：有特定语法规则(css选择器)的字符串作用：用来查找某个/些DOM元素: $(selector)二：基本选择器（最基本最常用的选择器） id选择器：#id 元素选择器： tagName/* 属性选择器：.class 任意标签：* 取多个选择器的并集(组合选择器)：selector1,selector2,selector3 取多个选择器的交集(相交选择器)：selector1selec...

2022-04-29 20:07:33 836

原创第二章：JQuery基础---JQuery的两把利器

一：JQuery核心函数简称: jQuery函数($/jQuery)jQuery库向外直接暴露的就是$/jQuery引入jQuery库后, 直接使用$即可当函数用: $(xxx)当对象用: $.xxx() jQuery函数: $/jQuery jQuery向外暴露的就是jQuery函数, 可以直接使用当成一般函数使用人: $(param) param是function: 相当于window.onload = function(文档加载完成的监

2022-04-29 19:52:27 94

原创第一章：JQuery基础---初识

一：什么是JQuery？（一个JS函数库）二：为什么用JQuery？（1）强大选择器: 方便快速查找DOM元素（2）隐式遍历(迭代): 一次操作多个元素（3）读写合一: 读数据/写数据用的是一个函数（4）链式调用: 可以通过.不断调用jQuery对象的方法（5）事件处理（6）DOM操作(CUD)（7）样式操作（8）动画（9）浏览器兼容三：如何使用JQuery？（1）引入jQuery库本地引入与CDN远程引入测试版与生产版(压缩版)（2）使用jQ...

2022-04-29 19:41:19 992

原创第一章：ES6基础---声明、解构赋值、模板字符串、对象的简化写法、箭头函数

一：变量的声明（let）以及特性1.变量不能重复声明2.块儿级作用域全局，函数，eval（只能在一个代码块中被使用外部寻找不到该变量）3.不存在变量提升//eg：console.log（a）;var a = 100;//其中，在js里，有变量声明提前，则返回a为undefined//eg：console.log（b）;let b = 200;//这种是会出现报错的4.不影响作用域链 { let name = '孙悟空

2022-04-29 19:27:29 311

原创第十二章：JavaScript基础--JSON

JSON支持大部分浏览器，如果需要兼容IE7及以下的JSON操作，则可以通过引入一个外部的js文件来处理。一：JSON的定义JS中的对象只有JS自己认识，其他的语言都不认识，JSON就是一个特殊格式的字符串，这个字符串可以被任意的语言所识别，并且可以转换为任意语言中的对象，JSON在开发中主要用来数据的交互。JSON和JS对象的格式一样，只不过JSON字符串中的属性名必须加双引号，其他的和JS语法一致。二：JSON的分类（1）JSON分类：对象 {}数组 []（2）JSO

2022-04-12 19:46:48 625

原创第十一章：JavaScript基础--类的操作

当通过style属性来修改元素的样式的时候，每修改一个样式，浏览器就需要重新渲染一次页面，这样的执行的性能是比较差的，而且这种形式当我们要修改多个样式时，也不太方便。因此我们可以采用通过JS的类的操作来进行修改。这样性能比较好，并且这种方式，可以使表现和行为进一步的分离。一：向其中添加一个class属性值参数: obj 要添加class属性的元素 cn 要添加的class值 function addClass(obj , cn){ //检查ob

2022-04-12 19:36:58 965

原创第十章：JavaScript基础--BOM

一：BOM的定义（浏览器对象模型）在BOM中为我们提供了一组对象，用来完成对浏览器的操作二：BOM的对象（1）Window代表的是整个浏览器的窗口，同时window也是网页中的全局对象（2）Navigator代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器（3）Location代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面（4）History代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录由于隐私原因，

2022-04-07 19:41:23 844

原创第九章：JavaScript基础--DOM

一：DOM的定义文档对象模型，通过DOM可以来任意来修改网页中各个内容。******文档文档指的是网页，一个网页就是一个文档******对象对象指将网页中的每一个节点都转换为对象转换完对象以后，就可以以一种纯面向对象的形式来操作网页了******模型模型用来表示节点和节点之间的关系，方便操作页面******节点（Node）节点是构成网页的最基本的单元，网页中的每一个部分都可以称为是一个节点，虽然都是节点，但是节...

2022-04-03 19:33:14 530

原创第八章：JavaScript基础--正则表达式

一：正则表达式的含义正则用来定义一些字符串的规则，程序可以根据这些规则来判断一个字符串是否符合规则，也可以将一个字符串中符合规则的内容提取出来。（1）创建正则表达式 - var reg = new RegExp("正则","匹配模式"); - var reg = /正则表达式/匹配模式（2）正则表达式的语法匹配模式： i:忽略大小写 g:全局匹配模式 - 设置匹配模式时，可以都不设置，也可以设置1个，也可以全...

2022-04-02 19:25:12 248

原创第七章：JavaScript基础--包装类、Date、Math、字符串的相关的方法

一：包装类在JS中有三个包装类分别是：String() Boolean() Number() 通过这三个包装类可以创建基本数据类型的对象//eg： var num = new Number(2); var str = new String("hello"); var bool = new Boolean(true);//但是在实际应用中千万不要这么干。 ******当我们去操作一个基本数据类型的...

2022-04-02 19:18:37 55

原创第六章：JavaScript基础--数组Array

一：数组的定义数组也是一个对象，是一个用来存储数据的对象，和Object类似，但是它的存储效率比普通对象要高数组中保存的内容我们称为元素数组使用索引（index）来操作元素索引指由0开始的整数二：数组的操作（1）创建数组 - var arr = new Array(); - var arr = [];（2）向数组中添加元素语法：数组对象[索引] = 值; ar...

2022-03-31 18:26:49 56

空空如也

空空如也