web学习知识点
文章平均质量分 79
web前端学习的一些笔记
XCharazz
略略略
展开
-
vue入门
3.前端开发工作 应用 官网 BS(bootstrap)+JQ(jquey)修改+ App ui+iOS+android+H5(修改频率比较大) 小程序+微信公众号 活动页(清明节,五一.六一.七夕)活动主题+主题色+流行语 后台项目 (OA,商城后台,财务系统,尽调系统等等)不对外公开,没有注册,只有登录给公司内部人员使用对页面没有具体的要求表单+表格+数据统计给公司管理层看(后台首页) 4.问题及解决方案 1.遇到问题,找到问题原因,进行解决 2.及时的整理,(有道云笔原创 2021-03-30 09:01:53 · 148 阅读 · 2 评论 -
JS------面向对象与正则
面向对象与正则 1.面向对象继承 1.1 原型链继承 原型链继承 :子类的原型对象 = 父类的实例对象 //1.父类构造函数 function Student(name,age,sex){ this.name = name; this.age = age; this.sex = sex; this.arr = [1,2,3]; } Student.prototype.classId = "1116" Student.prototype.study = function(){原创 2021-01-10 14:50:19 · 303 阅读 · 0 评论 -
JS------面向对象
面向对象 1.概念 面向对象:编码的一种思维方式 面向过程:注重过程(一步一步实现某个功能) 面向对象:注重结果(把所有和这个对象相关的所以功能都封装在一个对象中,使用的时候直接调用就可以) 组成: 属性 — 特征描述,静态 ------- var 方法— 行为,功能,动态 ---- function 对象三大基本特征 封装 继承 多态 : 一个对象的不同表现形式 2.创建方式 2.1字面量创建 var girlFriend1 = { "name":"如花",原创 2021-01-10 14:49:35 · 140 阅读 · 0 评论 -
js 事件高级
事件高级 1.回顾 表单事件 表单域事件 提交事件 onsubmit 重置事件 onreset 表单元素事件 获得焦点事件 onfocus 失去焦点事件 onblur onchange:失去焦点时内容和之前有变化时触发 oninput/onpropertychange:输入框内容发生变化时触发(实时) window和document? window–窗口 document–文档 location location.href : 获取设置当前窗口显示的url location.h原创 2020-12-27 21:22:14 · 122 阅读 · 0 评论 -
JS---------BOM
BOM 1.回顾 1.1 数组迭代方法 every():对数组进行判断,所有结果都为true,最后结果才为true some():对数组进行判断,只要有一个为true,结果就为true filter():对数组进行判断,满足条件的组成一个新的数组返回 map():循环数组,返回的值会组成一个新的数组返回 forEach():循环数组 1.2 DOM 获取 通过选择器 document.querySelector():选择器选中的标签中的第一个 document.querySelectorAll(原创 2020-12-25 18:39:55 · 87 阅读 · 0 评论 -
JS------DOM
DOM 1.回顾 1.1 字符串方法 charAt() charCodeAt() indexOf() lastIndexOf() 截取 substring() slice() substr() split() replace() toUpperCase(),toLowerCase() trim() 1.2 数组 数组栈方法 push,pop unshift,shift splice(start,deleteCount,items) indexOf() sort() reve原创 2020-12-25 18:39:24 · 92 阅读 · 0 评论 -
js数组方法
数组方法 1.字符串方法 通过下标获取 charAt(下标):获取对应下标的字符 charCodeAt(下标):获取对应下标的字符编码 “0”–48 “a”–97 “A”–65 检索位置,查找是否存在 indexOf(searchValue,start):查询某个字符在另一个字符串中首次出现的位置,出现返回对应的下标,没有出现返回-1; 作用:判断字符串中是否某个特定字符的存在 lastIndexOf(searchValue,start):查询某个字符在另一个字符串中最后一次出现的位置,原创 2020-12-25 18:38:49 · 93 阅读 · 0 评论 -
JS时间对象与字符串对象
时间对象与字符串对象 1.回顾 定时器分类 setTimeout 语法:setTimeout(函数,时间ms) 使用场景:广告弹窗 setInterval 语法:setInterval(函数,时间ms) 使用场景:轮播图,倒计时,抽奖 停止定时器 clearInterval(intervalId) clearTimeout() 封装 实现功能 声明一个函数,把主要代码放入到函数中 找参数 调用调试----- 来回目标值问题----&& 步长正负问题原创 2020-12-25 18:38:16 · 104 阅读 · 0 评论 -
js定时器
定时器 1.定时器 1.1 定时器的分类 setTimeout:延迟定时器 使用场景:广告弹窗 语法:setTimeout(函数,时间ms) 延迟某个时间执行函数一次 setInterval:间歇执行定时器 使用场景:轮播图,倒计时,抽奖 语法:setInterval(函数,时间) 间隔某个时间就执行函数一次 1.2 定时器使用 setTimeout <div>广告</div> <script> var oDiv = document.ge原创 2020-12-25 18:37:37 · 199 阅读 · 0 评论 -
Javascript----------函数
函数 1.函数 函数的概念:函数是由事件驱动的或当他被调用时可重复使用的代码块 使用场景: 作为事件处理函数 标签.事件 = function(){} 函数封装 代码复用 1.1函数的声明和使用 普通声明方式 声明:function 函数名(){代码块} 调用:函数名() 表达式声明 声明:var 变量 = function (){ 代码块} 调用:变量名() //1.普通函数声明方式 function study(){ console.log("沉迷学习,日渐消瘦"); }原创 2020-12-25 18:36:05 · 68 阅读 · 0 评论 -
Javascript----------this与自定义属性
this与自定义属性 1.回顾 document.write和innerHTML的区别? 共同点:都可以识别标签,都可以改变body标签的内容 区别: innerHTML会覆盖 document.write:写入的时候文档已经加载完成,会重绘文档-- 覆盖之前的内容。写入的时候文档没有加载完,不会覆盖原有的内容 for循环:可以让特定代码执行指定的次数 语法:for(初始化循环变量;循环条件;更新循环变量){ 循环体 } 2.循环 2.1 for循环嵌套 图形 //外循环控制原创 2020-12-17 22:24:10 · 301 阅读 · 0 评论 -
Javascript------流程控制语句
流程控制语句 1.流程控制语句 分类: 顺序结构 分支结构(分支结构、分支语句) :if-else 循环结构 for while 1.1 分支结构 if if:如果,给一个假设条件,条件成立会执行一个操作 语法:if(条件){ 条件成立执行的代码 } //1.如果有钱(100块),花两块买彩票,中500万 var money = 99; if (money >= 100) { console.log("花两块买彩票,中500万"); console.log("买500万的泡面原创 2020-12-16 21:04:32 · 89 阅读 · 0 评论 -
JS------数据类型
1.数据类型 根据数据特性、以及存储空间位置、存储容量进行划分 2.1 数据类型的分类 js数据类型分为6大类 五大基本数据类型 number : 数值 string:字符串 “” ‘’ boolean:布尔 true false undefined:未定义 null:空 复合类型(复杂类型、引用类型) object : 对象 array:数组 function:函数 2.2 基本数据类型 number:小数、整数、 负数、二进制、八进制、十六进制、NaN、infinity //1.原创 2020-12-16 09:42:58 · 85 阅读 · 0 评论 -
JavaScript--------js初识
1.js历史(了解) 1995年,网景(NetScape)开发出了一款大型商用浏览器,后台用java 解决问题:解决前端的表单提交问题 要求:尽可能要和java像,要比java简单 开发:布兰登.艾奇 借鉴 10天 命名:LiveScript ---- > javaScript (热点) 微软 – 搭载了一个克隆版的JavaScript — JScript ECMA(欧洲计算机制造商协会)(记忆) 制定标准:ECMAScript1.0 ECMAScript5.0: es5 原创 2020-12-14 22:19:51 · 149 阅读 · 1 评论 -
CSS----------响应式布局之grid网格布局
响应式布局之grid网格布局 二维布局 更加灵活好用 相对于弹性盒兼容性差(ie11以及以上) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Fm3TGJoq-1607777189412)(media/grid布局容器.png)] <div class="container"> <div class="item"> <p>1</p> </div> <div原创 2020-12-14 09:01:47 · 199 阅读 · 0 评论 -
CSS-----------响应式布局
day18 自适应 :随着屏幕发生宽高 大小变化 响应式布局 响应式:随着屏幕发生宽高 大小变化 + 盒子布局发生变化 需要技术点: 媒体查询 + 流式布局(phone端) 用户界面 鼠标样式cursor 盒子变大小属性 resize:none不可变/both水平垂直尺寸可变/vertical垂直可变大小/horizatail水平方向可变大小 新盒模型 文本多列布局 排列多行文字 大量文字 ...原创 2020-12-14 09:01:16 · 76 阅读 · 0 评论 -
CSS------视口布局
视口布局 vw,vh 视口单位 相对单位 所有设备的视口100vw ,100vh 100vw : viewport width 视口宽度,浏览器可视区域的宽度 100vh : viewport height 视口高度,浏览器可视区域的高度 750px 100vw 1vw = 7.5px; 375px 100vw 1vw = 3.75px 以设计稿为准: 假设还是750px设计稿 750px=100vw 1px=0.13333vw; 预设字体基础值 100px 1r原创 2020-12-14 09:00:50 · 159 阅读 · 0 评论 -
CSS--------Less 移动端布局
LESS 变量 类混入 导入 .css--->.css .less --->.less 导入 @import "文件路径"; 嵌套 父子 嵌套 .a>.b .a { .b { } } 兄弟平行 .a +.b .a { } .b { } 如果想加伪类 ; .a{ //&代指上一级选择器 &:hover { } } 编译后效果: .a:hovr {原创 2020-12-14 09:00:21 · 188 阅读 · 0 评论 -
CSS---------弹性盒子
弹性盒布局css3(伸缩盒布局) 传统布局的局限性 清除浮动影响 很难实现居中 结构不灵活 不能随时添加盒子 弹性盒布局 非常灵活 提供一套浏览器内置布局 特点:一维布局 固定的css属性 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ae7v8cWh-1607776830159)(media/弹性盒兼容性.png)] 决定了 这个布局一般用在移动端 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2E36pPXE-1原创 2020-12-14 08:59:29 · 111 阅读 · 0 评论 -
CSS---------过渡 变形 动画
动画: 过渡, 变形, 关键帧动画 过渡 从一个状态到另外一个状态 (两个状态的连接 最初,最终)的变化 ,并且时间的持续 transition: 要过渡的属性 持续时间s/ms 运动的曲线 延时的时间s/ms; transition: width 2s linear 0s; transition: all 1s linear 2s; transition:width 2s linear 0s ,height 1s linear 0s ,background-color .5s原创 2020-12-14 08:58:55 · 130 阅读 · 0 评论 -
CSS3属性
css3 就是css第3个版本 增加了一些选择器,布局,动画,背景,新盒模型,私有前缀; 选择器 表单选择器 :focus 聚焦选择器 选择的是当下被聚焦的表单元素 input:focus {} :checked 勾选 选择的是当下被勾选的复选框或单选框 input:checked {} :disabled 选择的是当前被禁用的元素 :enabled 选择的是当前没有被禁用的元素 ::placeholder 选择的是文本框里提示的文字 案例:修改单选框和复选框的默认样式 [外链图片转存失败原创 2020-12-14 08:58:07 · 84 阅读 · 0 评论 -
CSS-----语义化标签 表单控件类型
语义化标签 解决语义化兼容性问题 表单控件类型 表单控件属性 音视频标签 css3新增选择器 新增语义化布局标签 header.footer,nav ,aside, article>section, figure (推荐在移动端使用) ie8及其以下不支持语义化布局标签 —》 1. 不要在PC端用这些标记 2. 解决兼容性问题 **解决兼容性问题 ** ie8- 不认识标记 那我们让它认识即可 手动去创建这些标记 document.createElement("标..原创 2020-12-14 08:56:35 · 165 阅读 · 0 评论 -
CSS--------BFC布局 经典的多列布局
BFC规则 1. 什么BFC规则? Block Formatting Context 块级格式化上下文 块级元素的渲染区域规则 BFC盒子 外部不影响内部 内部不影响外部 2. 哪些属性可以触发BFC规则? 1. float不为none 2. position属性为absolute和fixed 3. oveflow不为visiable 4. html 根标签 3. BFC有哪些规则 1. BFC盒子内部的子标签按照垂直从上到下排 2. 共用一个BFC盒原创 2020-12-12 20:25:19 · 105 阅读 · 0 评论 -
CSS-------兼容性问题
兼容性问题 1、ie8下图片边框问题(记) <a> <img src=""> </a> 解决办法:reset.css img { //取消默认添加的边框 border:none; } 2. ie7下子元素相对定位 父盒子overflow属性失效问题 3. ie6下小高度盒子问题 原因:ie6下有默认行高 4. ie6浮动双边距问题 5. ie8下透明度问题(记) 背景透明, 内容不透明 background-color:rgba(0,0原创 2020-12-12 20:12:31 · 85 阅读 · 0 评论 -
CSS----- 实现箭头 表单结构 文本溢出处理
实现箭头 原理: 定位两个三角形 (边框) <style> .box { width: 50px; height: 50px; /* background-color: pink; */ position: relative; margin-left: 100px; margin-t原创 2020-12-12 19:58:05 · 353 阅读 · 0 评论 -
CSS------------鼠标样式属性
鼠标样式属性 cursor:auto; 默认 cursor:crosshair; 加号 cursor:text; 文本竖标 cursor:wait; 等待 cursor:help; 帮助 cursor:progress; 过程 cursor:inherit; 继承 cursor:move; 移动 cursor:ne-resize; 左下右上箭头 cursor:ns-resize; 向上向下箭头 cursor:nw-resize; 左上右下箭头原创 2020-12-12 19:47:13 · 304 阅读 · 0 评论 -
CSS-----项目前期工作
文件命名规范 统一用小写的英文字母,数字和下划线的组合,不得包含汉字空格和特殊字符。 原则: 1)方便理解,见名之意 2)方面查找 例如: 首页—index 产品列表—prolist产品详细页面—pro_detail 新闻列表—newslist新闻详细页面—news_detail 发展历史—history 关于我们—aboutus 联系我们—linkus,contactus 信息反馈—feedback 留言—leavewords 图片命名规范 图片的名称分为头尾两部分,用下划线隔开,头部表示此图片的大类原创 2020-12-12 19:46:03 · 124 阅读 · 0 评论 -
CSS----------PS基础操作
PS基础操作 标尺设置 ctrl+R 或者视图–》标尺 鼠标放上去右键切换单位为像素 标尺工具 按shift拉出 水平线 和垂直线 按shift+alt可以测量角度 吸管工具 标尺那 点住吸取颜色即可 文字工具 T 编辑—》首选项—》单位与标尺 ----》文字单位设置为px 抓手工具 快捷键 空格 选择工具 快捷键 V 作用:选择图层 ,拖拽图层 切片工具 1.切刀 选择区域 文件—》导出—》存储为web所用格式 选择切片改类型 背景透明选png 颜色单一选gif 普通图片选 jp原创 2020-12-12 19:26:42 · 80 阅读 · 0 评论 -
CSS-------微信滑动门技术
微信滑动门技术 什么?特殊背景图技术(特点:背景图颜色单一,对称的,阴影,边框…) 原理: 是一张宽度大小固定的图片铺到宽度不确定的盒子里 ,需要父子关系的两个盒子 ,内部盒子(子元素span)铺图片的右上角位置(backgrpund-position:100% 0%),外侧盒子(父元素a)铺图片的左上角位置(backgrpund-position:0% 0%) <style> * { padding: 0; margin:原创 2020-12-12 19:26:00 · 140 阅读 · 0 评论 -
CSS--------定位position 溢出 圆角边框
布局核心: 盒模型(间距) 浮动 (并排) 定位 (覆盖+ 特殊位置) 定位类型position 静态定位 position:static; 默认值 静态定位不能使盒子位置变化 不适合布局 作用:解决低版本浏览器兼容问题 相对定位 position:relative; 能不能使盒子发生位置变化 yes 2. 参考对象:自身初始位置 3. 脱离不脱离标准流 不脱离标准(保留原来位置 ) 4. 是否适合布局:不适合布局(压盖,原创 2020-12-11 21:23:57 · 520 阅读 · 0 评论 -
CSS-----浮动带来的影响及解决办法
布局第二大块 盒模型 行内块 行内块并排缺点: 中间有间距 文本内容行数 多少不一样的时候 会出现对不齐现象 浮动属性 作用: 专业解决并排 float: left左侧浮动/right右侧浮动/none不浮动; float:none;默认值 标准状态 标准流 浏览器解析块元素从上到下一行一个 垂直排列 行内元素并排 中间有间距 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cRafAEU-1607447845637)(media/标准流.png)] 浮动特原创 2020-12-09 01:19:21 · 374 阅读 · 0 评论 -
CSS----基础入门(03)
盒模型 组成以及用法 背景属性 语义化理解 选择器进阶 ,优先级计算 外边距margin 使用: 上外边距可以使盒子向下移动 左外边距可以使盒子向右移动 右下外边距不能使盒子发生移动 只能将这个盒子与其他盒子的距离拉开 外边距可以设置负值 margin:10px; margin: 0 auto ;水平居中(1.块类型 2.明确可以计算的宽度) *{ margin:0; padding:0; } 内边距padding 使用:上下左右内边距全部有用 移动内容位置 加了内边距.原创 2020-12-09 01:17:13 · 114 阅读 · 0 评论 -
CSS--基础入门(02)~~盒模型
文本相关的css属性 元素的分类与转换 布局核心—》盒模型 在线的css手册网址: http://css.cuishifeng.cn/text-decoration-line.html 文本相关的css属性 字体大小 颜色 字体粗细 字体斜体正体 字体类型 行高 (行间距) 水平对齐方式 垂直对齐方式 字符间距 词间距 文本格式化输出 首字母操作 缩进 文本修饰 字体属性 font:字体是否是斜体 字体粗细 字体大小/行高 字体类型; 字体是否是斜体 .原创 2020-12-09 01:14:06 · 158 阅读 · 1 评论 -
CSS-基础入门(01)
超链接 列表系列 表格结构 引入CSS 三个方法的区别 css选择器 (基础) css文本属性 超链接 链接 anchor 锚点 <a href='跳转的地址'>文本or img or div </a> 属性: href:跳转地址 target:设置打开方式 target:_self本页/_blank空白页,新页 base标记 <head> <meta charset="UTF-8"> <meta name="viewpor.原创 2020-12-09 01:11:54 · 63 阅读 · 0 评论 -
前端发展史及浏览器内核
前端开发 用前端技术实现用户界面 前端技术:基础三大要素 html5 css3 javascript +js衍生物(vue,react,angular框架,node.js) 用户界面:pc端 + 移动端app (页面+交互+数据渲染) 发展史 web1.0阶段 蒂姆·伯纳斯·李 [1] (Tim Berners-Lee) 界面:只能读 不能写 web2.0阶段 布兰登·艾奇(Brendan Eich,1961年~) JS 有了交互 只能读 还能写 建设者 web3.0阶段(大前端)原创 2020-11-25 08:34:15 · 158 阅读 · 0 评论 -
Typora的使用方法
1.标题 ctrl+1 一级标题 ctrl+2 二级标题 ctrl+i…6 or # + 空格 标题文字 +enter 一级标题 ## + 空格 标题文字 +enter 二级标题 ....6个 day01 HTML语言 2.段落 ctrl+0 阿湖府邸是否合适改二手房东风浩荡是非得失阿飞赛诺菲 3. 插入图片 ctrl+shift +i (img-XG57zqNu-1606096157695)(media/1.jpg)] 设置:文件—》偏好设置—》图片—》勾选优先本地路径—》关闭—》打开 <img原创 2020-11-23 10:08:16 · 373 阅读 · 0 评论