![](https://img-blog.csdnimg.cn/20201125083637219.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
web学习知识点
文章平均质量分 79
web前端学习的一些笔记
XCharazz
略略略
展开
-
vue入门
3.前端开发工作应用官网BS(bootstrap)+JQ(jquey)修改+Appui+iOS+android+H5(修改频率比较大)小程序+微信公众号活动页(清明节,五一.六一.七夕)活动主题+主题色+流行语后台项目(OA,商城后台,财务系统,尽调系统等等)不对外公开,没有注册,只有登录给公司内部人员使用对页面没有具体的要求表单+表格+数据统计给公司管理层看(后台首页)4.问题及解决方案1.遇到问题,找到问题原因,进行解决2.及时的整理,(有道云笔原创 2021-03-30 09:01:53 · 143 阅读 · 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 · 299 阅读 · 0 评论 -
JS------面向对象
面向对象1.概念面向对象:编码的一种思维方式面向过程:注重过程(一步一步实现某个功能)面向对象:注重结果(把所有和这个对象相关的所以功能都封装在一个对象中,使用的时候直接调用就可以)组成:属性 — 特征描述,静态 ------- var方法— 行为,功能,动态 ---- function对象三大基本特征封装继承多态 : 一个对象的不同表现形式2.创建方式2.1字面量创建 var girlFriend1 = { "name":"如花",原创 2021-01-10 14:49:35 · 140 阅读 · 0 评论 -
js 事件高级
事件高级1.回顾表单事件表单域事件提交事件 onsubmit重置事件 onreset表单元素事件获得焦点事件 onfocus失去焦点事件 onbluronchange:失去焦点时内容和之前有变化时触发oninput/onpropertychange:输入框内容发生变化时触发(实时)window和document?window–窗口document–文档locationlocation.href : 获取设置当前窗口显示的urllocation.h原创 2020-12-27 21:22:14 · 122 阅读 · 0 评论 -
JS---------BOM
BOM1.回顾1.1 数组迭代方法every():对数组进行判断,所有结果都为true,最后结果才为truesome():对数组进行判断,只要有一个为true,结果就为truefilter():对数组进行判断,满足条件的组成一个新的数组返回map():循环数组,返回的值会组成一个新的数组返回forEach():循环数组1.2 DOM获取通过选择器document.querySelector():选择器选中的标签中的第一个document.querySelectorAll(原创 2020-12-25 18:39:55 · 87 阅读 · 0 评论 -
JS------DOM
DOM1.回顾1.1 字符串方法charAt()charCodeAt()indexOf()lastIndexOf()截取substring()slice()substr()split()replace()toUpperCase(),toLowerCase()trim()1.2 数组数组栈方法push,popunshift,shiftsplice(start,deleteCount,items)indexOf()sort()reve原创 2020-12-25 18:39:24 · 90 阅读 · 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 · 198 阅读 · 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 · 300 阅读 · 0 评论 -
Javascript------流程控制语句
流程控制语句1.流程控制语句分类:顺序结构分支结构(分支结构、分支语句) :if-else循环结构 for while1.1 分支结构ifif:如果,给一个假设条件,条件成立会执行一个操作语法: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 falseundefined:未定义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 — JScriptECMA(欧洲计算机制造商协会)(记忆)制定标准:ECMAScript1.0 ECMAScript5.0: es5原创 2020-12-14 22:19:51 · 147 阅读 · 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 · 198 阅读 · 0 评论 -
CSS-----------响应式布局
day18自适应 :随着屏幕发生宽高 大小变化响应式布局响应式:随着屏幕发生宽高 大小变化 + 盒子布局发生变化需要技术点:媒体查询 + 流式布局(phone端)用户界面鼠标样式cursor盒子变大小属性resize:none不可变/both水平垂直尺寸可变/vertical垂直可变大小/horizatail水平方向可变大小新盒模型文本多列布局排列多行文字 大量文字...原创 2020-12-14 09:01:16 · 76 阅读 · 0 评论 -
CSS------视口布局
视口布局vw,vh 视口单位 相对单位 所有设备的视口100vw ,100vh100vw : 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 · 128 阅读 · 0 评论 -
CSS3属性
css3 就是css第3个版本 增加了一些选择器,布局,动画,背景,新盒模型,私有前缀;选择器表单选择器:focus 聚焦选择器 选择的是当下被聚焦的表单元素input:focus {}:checked 勾选 选择的是当下被勾选的复选框或单选框input:checked {}:disabled 选择的是当前被禁用的元素:enabled 选择的是当前没有被禁用的元素::placeholder 选择的是文本框里提示的文字案例:修改单选框和复选框的默认样式[外链图片转存失败原创 2020-12-14 08:58:07 · 83 阅读 · 0 评论 -
CSS-----语义化标签 表单控件类型
语义化标签解决语义化兼容性问题表单控件类型表单控件属性音视频标签css3新增选择器新增语义化布局标签header.footer,nav ,aside, article>section, figure (推荐在移动端使用)ie8及其以下不支持语义化布局标签 —》 1. 不要在PC端用这些标记 2. 解决兼容性问题**解决兼容性问题 **ie8- 不认识标记 那我们让它认识即可手动去创建这些标记document.createElement("标..原创 2020-12-14 08:56:35 · 164 阅读 · 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 · 104 阅读 · 0 评论 -
CSS-------兼容性问题
兼容性问题1、ie8下图片边框问题(记)<a> <img src=""></a>解决办法:reset.cssimg { //取消默认添加的边框 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 · 348 阅读 · 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 · 300 阅读 · 0 评论 -
CSS-----项目前期工作
文件命名规范统一用小写的英文字母,数字和下划线的组合,不得包含汉字空格和特殊字符。原则: 1)方便理解,见名之意2)方面查找例如:首页—index产品列表—prolist产品详细页面—pro_detail新闻列表—newslist新闻详细页面—news_detail发展历史—history关于我们—aboutus联系我们—linkus,contactus信息反馈—feedback留言—leavewords图片命名规范图片的名称分为头尾两部分,用下划线隔开,头部表示此图片的大类原创 2020-12-12 19:46:03 · 123 阅读 · 0 评论 -
CSS----------PS基础操作
PS基础操作标尺设置ctrl+R 或者视图–》标尺 鼠标放上去右键切换单位为像素标尺工具按shift拉出 水平线 和垂直线按shift+alt可以测量角度吸管工具标尺那 点住吸取颜色即可文字工具T编辑—》首选项—》单位与标尺 ----》文字单位设置为px抓手工具快捷键 空格选择工具快捷键 V作用:选择图层 ,拖拽图层切片工具1.切刀 选择区域 文件—》导出—》存储为web所用格式 选择切片改类型背景透明选png 颜色单一选gif 普通图片选 jp原创 2020-12-12 19:26:42 · 77 阅读 · 0 评论 -
CSS-------微信滑动门技术
微信滑动门技术什么?特殊背景图技术(特点:背景图颜色单一,对称的,阴影,边框…)原理: 是一张宽度大小固定的图片铺到宽度不确定的盒子里 ,需要父子关系的两个盒子 ,内部盒子(子元素span)铺图片的右上角位置(backgrpund-position:100% 0%),外侧盒子(父元素a)铺图片的左上角位置(backgrpund-position:0% 0%) <style> * { padding: 0; margin:原创 2020-12-12 19:26:00 · 139 阅读 · 0 评论 -
CSS--------定位position 溢出 圆角边框
布局核心: 盒模型(间距) 浮动 (并排) 定位 (覆盖+ 特殊位置)定位类型position静态定位position:static; 默认值静态定位不能使盒子位置变化 不适合布局作用:解决低版本浏览器兼容问题相对定位position:relative;能不能使盒子发生位置变化 yes 2. 参考对象:自身初始位置 3. 脱离不脱离标准流 不脱离标准(保留原来位置 ) 4. 是否适合布局:不适合布局(压盖,原创 2020-12-11 21:23:57 · 517 阅读 · 0 评论 -
CSS-----浮动带来的影响及解决办法
布局第二大块 盒模型 行内块行内块并排缺点:中间有间距文本内容行数 多少不一样的时候 会出现对不齐现象浮动属性作用: 专业解决并排float: left左侧浮动/right右侧浮动/none不浮动;float:none;默认值 标准状态标准流 浏览器解析块元素从上到下一行一个 垂直排列 行内元素并排 中间有间距[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3cRafAEU-1607447845637)(media/标准流.png)]浮动特原创 2020-12-09 01:19:21 · 370 阅读 · 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 · 157 阅读 · 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 · 62 阅读 · 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 · 155 阅读 · 0 评论 -
Typora的使用方法
1.标题ctrl+1 一级标题ctrl+2 二级标题ctrl+i…6or# + 空格 标题文字 +enter 一级标题## + 空格 标题文字 +enter 二级标题....6个day01HTML语言2.段落 ctrl+0阿湖府邸是否合适改二手房东风浩荡是非得失阿飞赛诺菲3. 插入图片ctrl+shift +i(img-XG57zqNu-1606096157695)(media/1.jpg)]设置:文件—》偏好设置—》图片—》勾选优先本地路径—》关闭—》打开<img原创 2020-11-23 10:08:16 · 372 阅读 · 0 评论