![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端开发
小飞侠v科比
专注IT全栈技术
展开
-
HTTP/HTTPS的请求与响应
HTTP和HTTPSHTTP协议(HyperText Transfer Protocol,超文本传输协议):是一种发布和接收 HTML页面的方法。HTTPS(Hypertext Transfer Protocol over Secure Socket Layer)简单讲是HTTP的安全版,在HTTP下加入SSL层。SSL(Secure Sockets Layer 安全套接层)主要用于Web的...原创 2019-10-29 21:34:46 · 2274 阅读 · 1 评论 -
常用css列表
常用css列表color 设置文字的颜色,如: color:red;font-size 设置文字的大小,如:font-size:12px;font-family 设置文字的字体,如:font-family:‘微软雅黑’;font-style 设置字体是否倾斜,如:font-style:‘normal’; 设置不倾斜,font-style:‘italic’;设置文字倾斜font-weigh...原创 2019-09-17 23:10:59 · 176 阅读 · 0 评论 -
JavaScript介绍
JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互。 JavaScript是浏览器解释执行的,前端脚本语言还有JScript(微软,IE独有),ActionScript( Adobe公司,需要插件)等。前端三大块1、HTML:页面结构2、CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果3、JavaSc...原创 2019-09-20 23:46:03 · 99 阅读 · 0 评论 -
JavaScript变量
JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 ‘var’ var iNum = 123; var sTr = 'asd'; //同时定义多个变量可以用","隔开,公用一个‘var’关键字 var iNum = 45,sTr='qwe',sCount='68';变量类型5种基本数据类型:1、number 数字类型2...原创 2019-09-20 23:47:05 · 135 阅读 · 0 评论 -
javascript操作元素
获取元素方法可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量,比如:<script type="text/javascript"> var oDiv = document.getElementById('div1');</script>....<d...原创 2019-09-20 23:48:43 · 185 阅读 · 0 评论 -
JavaScript数组
数组及操作方法数组就是一组数据的集合,javascript中,数组里面的数据可以是不同类型的。定义数组的方法//对象的实例创建var aList = new Array(1,2,3);//直接量创建var aList2 = [1,2,3,'asd'];操作数组中数据的方法1、获取数组的长度:aList.length;var aList = [1,2,3,4];alert(a...原创 2019-09-20 23:51:58 · 118 阅读 · 0 评论 -
JavaScript语句
条件语句通过条件来控制程序的走向,就需要用到条件语句。运算符1、算术运算符: +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)2、赋值运算符:=、 +=、 -=、 *=、 /=、 %=3、条件运算符:、=、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)if elsevar iNum01 = 3;var iNum02 ...原创 2019-09-20 23:53:17 · 149 阅读 · 0 评论 -
JavaScript字符串处理方法
1、字符串合并操作:“ + ”var iNum01 = 12;var iNum02 = 24;var sNum03 = '12';var sTr = 'abc';alert(iNum01+iNum02); //弹出36alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加alert(sNum03+sTr); // 弹出12abc...原创 2019-09-21 23:34:24 · 123 阅读 · 0 评论 -
JavaScript定时器
定时器定时器在javascript中的作用1、制作动画2、异步操作3、函数缓冲与节流定时器类型及语法/* 定时器: setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器*/var time1 = setT...原创 2019-09-21 23:35:22 · 119 阅读 · 0 评论 -
Javascript 类型转换 封闭函数
Javascript组成1、ECMAscript javascript的语法(变量、函数、循环语句等语法)2、DOM 文档对象模型 操作html和css的方法3、BOM 浏览器对象模型 操作浏览器的一些方法类型转换1、直接转换 parseInt() 与 parseFloat()alert('12'+7); //弹出127alert( parseInt('12') + 7 ); /...原创 2019-09-21 23:39:12 · 120 阅读 · 0 评论 -
jquery 介绍选择器
query介绍jQuery是目前使用最广泛的javascript函数库。据统计,全世界排名前100万的网站,有46%使用jQuery,远远超过其他库。微软公司甚至把jQuery作为他们的官方库。jQuery的版本分为1.x系列和2.x、3.x系列,1.x系列兼容低版本的浏览器,2.x、3.x系列放弃支持低版本浏览器,目前使用最多的是1.x系列的。jquery是一个函数库,一个js文件,页面用...原创 2019-09-21 23:41:42 · 136 阅读 · 0 评论 -
jquery 事件调用 动画
jquery事件事件函数列表:blur() 元素失去焦点focus() 元素获得焦点click() 鼠标单击mouseover() 鼠标进入(进入子元素也触发)mouseout() 鼠标离开(离开子元素也触发)mouseenter() 鼠标进入(进入子元素不触发)mouseleave() 鼠标离开(离开子元素不触发)hover() 同时为mouseenter和mouseleave...原创 2019-09-21 23:45:23 · 302 阅读 · 0 评论 -
Jquery事件冒泡 事件委托
事件冒泡什么是事件冒泡在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window)。事件冒泡的作用事件冒...原创 2019-09-22 22:48:15 · 188 阅读 · 0 评论 -
json ajax与jsonp
jsonjson是 JavaScript Object Notation 的首字母缩写,单词的意思是javascript对象表示法,这里说的json指的是类似于javascript对象的一种数据格式,目前这种数据格式比较流行,逐渐替换掉了传统的xml数据格式。javascript自定义对象:var oMan = { name:'tom', age:16, talk:f...原创 2019-09-22 22:51:30 · 146 阅读 · 0 评论 -
移动端库和框架 zeptojs swiper Bootstrap
课程介绍学习移动端场景下的js事件;制作移动端特效常用的js库;介绍移动端常用开发框架Bootstrap。移动端js事件移动端的操作方式和PC端是不同的,移动端主要用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件:1、touchstart: //手指放到屏幕上时触发2、touchmove: //手指在屏幕上滑动式触发3、touchend: //手指离开屏幕时触发...原创 2019-09-22 22:55:10 · 281 阅读 · 0 评论 -
正则表达式
正则表达式1、什么是正则表达式:能让计算机读懂的字符串匹配规则。2、正则表达式的写法:var re=new RegExp(‘规则’, ‘可选参数’);var re=/规则/参数;3、规则中的字符1)普通字符匹配:如:/a/ 匹配字符 ‘a’,/a,b/ 匹配字符 ‘a,b’2)转义字符匹配:\d 匹配一个数字,即0-9\D 匹配一个非数字,即除了0-9\w 匹配一个单词字符...原创 2019-09-22 22:56:02 · 150 阅读 · 0 评论 -
前端性能优化
前端性能优化从用户访问资源到资源完整的展现在用户面前的过程中,通过技术手段和优化策略,缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量,所有前端性能优化很重要。前端性能优化分为如下几个方面:一、代码部署:1、代码的压缩与合并2、图片、js、css等静态资源使用和主站不同域名地址存储,从而使得在传输资源时不会带上不必要的cookie信息。3、使用内...原创 2019-09-22 22:56:37 · 109 阅读 · 0 评论 -
移动端页面开发
了解移动端页面与PC端页面开发的区别,学习移动端页面的开发流程。移动端与PC端页面布局区别视口视口是移动设备上用来显示网页的区域,一般会比移动设备可视区域大,宽度可能是980px或者1024px,目的是为了显示下整个为PC端设计的网页,这样带来的后果是移动端会出现横向滚动条,为了避免这种情况,移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看,可以用 meta 标签,name=“v...原创 2019-09-17 23:10:41 · 231 阅读 · 0 评论 -
HTML5新增标签 表单控件
HTML5新增标签新增语义标签1、 页面头部、页眉2、 页面导航3、 一篇文章4、 文章中的章节5、 侧边栏6、 页面底部、页脚音频视频1、2、PC端兼容h5的新标签的方法,在页面中引入以下js文件:script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></scr...原创 2019-09-17 23:07:11 · 361 阅读 · 0 评论 -
HTML详细介绍1
html概述和基本结构html概述HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言,超文本指的是超链接,标记指的是标签,是一种用来制作网页的语言,这种语言由一个个的标签组成,用这种语言制作的文件保存的是一个文本文件,文件的扩展名为html或者htm,一个html文件就是一个网页,html文件用编辑器打开显示的是文本,可以用文本的方式编辑它,如...原创 2019-09-13 23:28:46 · 121 阅读 · 0 评论 -
HTML详细介绍2
html列表有序列表在网页上定义一个有编号的内容列表可以用、配合使用来实现,代码如下:<ol> <li>列表文字一</li> <li>列表文字二</li> <li>列表文字三</li></ol>在网页上生成的列表,每条项目上会按1、2、3编号,有序列表在实际开发中较少...原创 2019-09-13 23:30:09 · 128 阅读 · 0 评论 -
css基本语法及页面引用
课程介绍为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。css基本语法及页面引用css基本语法css的定义方法是:选择器 { ...原创 2019-09-13 23:36:48 · 166 阅读 · 0 评论 -
css文本设置 选择器
css文本设置常用的应用文本的css样式:color 设置文字的颜色,如: color:red;font-size 设置文字的大小,如:font-size:12px;font-family 设置文字的字体,如:font-family:‘微软雅黑’;font-style 设置字体是否倾斜,如:font-style:‘normal’; 设置不倾斜,font-style:‘italic’;设置...原创 2019-09-13 23:38:44 · 893 阅读 · 0 评论 -
CSS盒子模型
盒子模型解释元素在页面中显示成一个方块,类似一个盒子,CSS盒子模型就是使用现实中盒子来做比喻,帮助我们设置元素对应的样式。盒子模型示意图如下:把元素叫做盒子,设置对应的样式分别为:盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子与盒子之间的间距(margin)。设置宽高width:200px; /*...原创 2019-09-14 22:29:18 · 119 阅读 · 0 评论 -
CSS盒模型使用技巧及相关问题
盒模型使用技巧及相关问题margin相关技巧1、设置元素水平居中: margin:x auto;2、margin负值让元素位移及边框合并理解练习1、制作一个600*100的盒子,边框1像素黑色,距离浏览器顶部100px,水平居中。2、制作下面的菜单效果:外边距合并外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的...原创 2019-09-14 22:31:08 · 152 阅读 · 0 评论 -
css元素溢出
css元素溢出当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。overflow的设置项:1、visible 默认值。内容不会被修剪,会呈现在元素框之外。2、hidden 内容会被修剪,并且其余内容是不可见的,此属性还有清除浮动、清除margin-top塌陷的功能。3、scroll 内容会被修剪,但是浏览器会显示滚动条以便...原创 2019-09-14 22:31:48 · 118 阅读 · 0 评论 -
CSS块元素、内联元素、内联块元素
块元素、内联元素、内联块元素元素就是标签,布局中常用的有三种标签,块元素、内联元素、内联块元素,了解这三种元素的特性,才能熟练的进行页面布局。块元素块元素,也可以称为行元素,布局中常用的标签如:div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素,它在布局中的行为:支持全部的样式如果没有设置宽度,默认的宽度为父级宽度100%盒子占据一行、即使设置了宽度内联元素内联元素...原创 2019-09-14 22:32:22 · 146 阅读 · 0 评论 -
CSS浮动
浮动浮动特性1、浮动元素有左浮动(float:left)和右浮动(float:right)两种2、浮动的元素会向左或向右浮动,碰到父元素边界、其他元素才停下来3、相邻浮动的块元素可以并在一行,超出父级宽度就换行4、浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)5、浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,形成文字...原创 2019-09-14 22:33:37 · 112 阅读 · 0 评论 -
CSS样式定位
定位文档流文档流,是指盒子按照html标签编写的顺序依次从上到下,从左到右排列,块元素占一行,行内元素在一行之内从左到右排列,先写的先排列,后写的排在后面,每个盒子都占据自己的位置。关于定位我们可以使用css的position属性来设置元素的定位类型,postion的设置项如下:relative 生成相对定位元素,元素所占据的文档流的位置保留,元素本身相对自身原位置进行偏移。absol...原创 2019-09-15 22:29:14 · 203 阅读 · 0 评论 -
CSS background属性
background属性属性解释background属性是css中应用比较多,且比较重要的一个属性,它是负责给盒子设置背景图片和背景颜色的,background是一个复合属性,它可以分解成如下几个设置项:background-color 设置背景颜色background-image 设置背景图片地址background-repeat 设置背景图片如何重复平铺background-pos...原创 2019-09-15 22:31:16 · 142 阅读 · 0 评论 -
photoshop常用图片处理技巧
常用图片格式图片是网页制作中很重要的素材,图片有不同的格式,每种格式都有自己的特性,了解这些特效,可以方便我们在制作网页时选取适合的图片格式,图片格式及特性如下:1、psdphotoshop的专用格式。优点:完整保存图像的信息,包括未压缩的图像数据、图层、透明等信息,方便图像的编辑。缺点:应用范围窄,图片容量相对比较大。2、jpg网页制作及日常使用最普遍的图像格式。优点:图像压缩效...原创 2019-09-15 22:34:05 · 411 阅读 · 0 评论 -
photoshop批量切图技巧
photoshop批量切图技巧切图,就是从效果图中把网页制作需要的小图片裁剪出来。1、使用psd格式并且带有图层的图像切图2、在图像上用切片工具切出需要的小图3、双击切片,给切片命名4、将需要制作透明背景图像的切片的背景隐藏5、执行菜单命令 存储为web所用格式6、点选切片,设置切片的图片格式7、存储切片,选择“所有用户切片”,点存储(多个切片会自动存到所选文件夹中的images文...原创 2019-09-15 22:34:44 · 2172 阅读 · 0 评论 -
CSS权重介绍
CSS权重CSS权重指的是样式的优先级,有两条或多条样式作用于一个元素,权重高的那条样式对元素起作用,权重相同的,后写的样式会覆盖前面写的样式。权重的等级可以把样式的应用方式分为几个等级,按照等级来计算权重1、!important,加在样式属性值后,权重值为 100002、内联样式,如:style=””,权重值为10003、ID选择器,如:#content,权重值为1004、类,伪类...原创 2019-09-15 22:35:58 · 137 阅读 · 0 评论 -
CSS3 浏览器前缀 新增选择器
CSS3 浏览器前缀浏览器样式前缀为了让CSS3样式兼容,需要将某些样式加上浏览器前缀:-ms- 兼容IE浏览器-moz- 兼容firefox-o- 兼容opera-webkit- 兼容chrome 和 safari比如:div{ -ms-transform: rotate(30deg); -webkit-transform: rotate...原创 2019-09-17 23:00:57 · 441 阅读 · 0 评论 -
CSS3 transition动画 圆角、rgba
CSS3 transition动画1、transition-property 设置过渡的属性,比如:width height background-color2、transition-duration 设置过渡的时间,比如:1s 500ms3、transition-timing-function 设置过渡的运动方式,常用有 linear(匀速)|ease(缓冲运动)4、transition...原创 2019-09-17 23:06:22 · 818 阅读 · 0 评论 -
前端开发概述
什么是前端开发?前端开发也叫做web前端开发,它指的是基于web的互联网产品的页面(也可叫界面)开发及功能开发。什么互联网产品?互联网产品就是指网站为满足用户需求而创建的用于运营的功能及服务,百度搜索、淘宝、QQ、微博、网易邮箱等都是互联网产品。互联网产品开发流程及前端开发岗位?前端开发需要哪些技术?前端工程师参照产品的效果图来开发页面(也可叫界面),效果图是由UI设计师用Photo...原创 2019-09-13 23:23:51 · 200 阅读 · 0 评论