![](https://img-blog.csdnimg.cn/20210124192310992.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
移动与web前端开发
文章平均质量分 89
记录自己学习web的过程
-4444x-
再努力一年,见我想见的人,做我想做的事(已经见到了我想见的人)
展开
-
【es6】es6的一丢丢知识点
具体概念:ES6教程│|菜鸟教程这里只有一丢丢知识点,后面需要用到的,需要概念的直接点上面的链接文章目录一:let / var二:const三:对象增强语法一:let / var事实上var的设计可以看成JavaScript语言设计上的错误.但是这种错误多半不能修复和移除,以为需要向后兼容.大概十年前, Brendan Eich就决定修复这个问题,于是他添加了一个新的关键字: let我们可以将let看成更完美的var块级作用域JS中使用var来声明一个变量时,变量的作用域主要是和函数的定义原创 2021-02-26 09:29:37 · 125 阅读 · 0 评论 -
【web前端 | jQuery】jQuery操作
一:jQuery 属性操作二:jQuery 内容文本值三 :jQuery 元素操作四:jQuery 尺寸、位置操作原创 2020-12-28 18:48:19 · 185 阅读 · 0 评论 -
【web前端 | jQuery】jQuery的效果
jQuery的效果1:显示隐藏1.1:show() 显示show([speed,[easing],[fn]])speed:预定速度 ,slow,normal,fast,1000mseasing:(Optional) 用来指定切换效果,默认是“swing”,可用参数“linear”fn:回调函数,在动画完成时执行的函数,每个函数执行一次1.2:hide() 隐藏hide([speed,[easing],[fn]])同显示1.3:toggle() 切换toggle([speed,[e原创 2020-12-27 18:14:12 · 101 阅读 · 0 评论 -
【web前端 | jQuery】jQuery的样式操作
jQuery的样式操作1:操作css的方法1.1:参数只写属性名,则是返回属性值$(this).css("color");1.2:操作,修改样式,参数是属性名,属性值,逗号分隔,是设置一组样式,属性必须加引号,值如果是数字可以不用跟单位和引号$(this).css("color","red");1.3:修改多个样式,参数可以是对象形式,属性名和属性值用冒号隔开, 属性可以不用加引号,$(this).css({ "color": "white",}) 复合属性:驼峰命名法2:原创 2020-12-26 16:48:10 · 135 阅读 · 2 评论 -
【web前端 | jQuery】jQuery常用的API
jQuery常用的API1:jQuery的选择器$(“选择器”) // 里面选择器直接写 CSS 选择器即可,但是要加引号属性描述使用ID选择器获取指定ID的元素$("#id")全选选择器匹配所有元素$("*’)类选择器获取同一类class的元素$(".class")标签选择器获取同一类标签的所有元素$(“div”)并集选择器选取多个元素s(“div,p,li”)交集选择器交集元素$(“Ii.current”)子代原创 2020-12-25 20:24:55 · 125 阅读 · 0 评论 -
【web前端 | jQuery】jQuery的基本概念
基本概念1:JavaScript库:library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数在里面,比如动画animate、hide、show,比如获取元素等。简单理解:就是一个JS 文件,里面对我们原生js代码进行了封装,存放到里面。这样我们可以快速高效的使用这些封装好的功能了。比如 jQuery,就是为了快速方便的操作DOM,里面基本都是函数(方法)。常见的JavaScript库:jQueryPrototyp原创 2020-12-24 20:30:13 · 92 阅读 · 1 评论 -
【web前端基础 | JS基础】内置对象
1 - 内置对象1.1 内置对象 JavaScript 中的对象分为3种:自定义对象内置对象前面两种对象是JS基础内容,属于 ECMAScript;浏览器对象浏览器对象属于 JS 独有的JS API 讲解内置对象就是指 JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能属性和方法),内置对象最大的优点就是帮助我们快速开发 JavaScript 提供了多个内置对象:Math、 Date 、Array、String等1.2 查文档查找文原创 2020-12-21 19:45:30 · 149 阅读 · 0 评论 -
【web前端基础 | JS基础】对象
对象一:对象的相关概念1:什么是对象?在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。对象是由属性和方法组成的。属性:事物的特征,在对象中用属性来表示(常用名词)方法:事物的行为,在对象中用方法来表示(常用动词)2:为什么需要对象:保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。数据只能通过索引值访问,开发者需要清晰的清除所有的数据的排行才能准确地获取数据,而当数据量庞大时,不可能做到记忆原创 2020-12-20 15:35:57 · 346 阅读 · 1 评论 -
【web前端基础 | JS基础】作用域
1 - 作用域1.1 作用域概述通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。JavaScript(es6前)中的作用域有两种:- 全局作用域- 局部作用域(函数作用域) 1.2 全局作用域作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。1.3 局部作用域作用于函数内的代码环境,就是局部作用域。因为跟函数有关系,所原创 2020-12-20 15:35:21 · 115 阅读 · 1 评论 -
【web前端基础 | JS基础】函数
2 - 函数2.1 函数的概念在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。2.2 函数的使用声明函数// 声明函数function 函数名() { //函数体代码}function 是声明函数的关键字,必须小写由于函数一般是为了实现原创 2020-12-19 20:34:21 · 302 阅读 · 0 评论 -
【web前端基础 | JS基础】数组
1 - 数组1.1 数组的概念数组可以把一组相关的数据一起存放,并提供方便的访问(获取)方式。数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。1.2 创建数组JS 中创建数组有两种方式:利用 new 创建数组var 数组名 = new Array() ;var arr = new Array(); // 创建一个新的空数组注意 Array () ,A 要大写利用数组字面量创建数组/原创 2020-12-19 18:47:32 · 382 阅读 · 0 评论 -
【web前端基础 | JS基础】逻辑语句
2 - 流程控制2.1 流程控制概念在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。简单理解:**流程控制就是来控制代码按照一定结构顺序来执行**流程控制主要有三种结构,分别是**顺序结构**、**分支结构**和**循环结构**,代表三种代码执行的顺序。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CAEnrKZa-1608038795913)(images\图片11.png)]原创 2020-12-18 21:04:59 · 515 阅读 · 0 评论 -
【web前端基础 | JS基础】运算符
1 - 运算符(操作符)1.1 运算符的分类运算符(operator)也被称为操作符,是用于实现赋值、比较和执行算数运算等功能的符号。JavaScript中常用的运算符有:算数运算符递增和递减运算符比较运算符逻辑运算符赋值运算符1.2 算数运算符算术运算符概述概念:算术运算使用的符号,用于执行两个变量或值的算术运算。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q61Y7Go6-1608038741449)(images\图片1.png)]原创 2020-12-18 19:32:53 · 398 阅读 · 0 评论 -
【web前端基础 | JS基础】数据类型
数据类型为什么需要数据类型在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。简单来说,数据类型就是数据的类别型号。比如姓名“张三”,年龄18,这些数据的类型是不一样的。一:变量的数据类型(不用声明类型)变量是用来存储值的所在处,它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。//int num = 10 ; java 整型var num;num = 1原创 2020-12-15 21:21:50 · 392 阅读 · 0 评论 -
【web前端基础 | JS基础】变量
一:JavaScript输入输出语句为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:方法说明alert(msg)浏览器弹出警示框console.log(msg)浏览器控制台打印输出信息prompt(info)浏览器弹出输入框,用户可以输入注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息。二:变量1:变量的基本概念【叨叨草图】2: 变量的使用2.1:声明变量// .原创 2020-12-14 15:53:42 · 236 阅读 · 0 评论 -
【web前端基础 | JS基础】初识 javaScript
初识 java script布兰登·艾奇(Brendan Eich,1961年~)。1995年利用10天完成的运行在客户端的脚本语言,不需要编译不需要配置环境作用① 表单动态校验(密码强度检测) ( JS 产生最初的目的 )② 网页特效③ 服务端开发(Node.js)④ 桌面程序(Electron)⑤ App(Cordova)⑥ 控制硬件-物联网(Ruff)⑦ 游戏开发一:浏览器执行js简介浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器)原创 2020-12-14 14:29:18 · 203 阅读 · 1 评论 -
【移动Web开发 | 移动端】响应式布局+bootstrap的使用
一:响应式开发就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。屏幕划分尺寸区间平时设置超小屏幕(手机)<768px100%小屏设备(平板)>=768px~ < 992px750px中等屏幕((桌面显示器)>= 992px~ <1200px970px宽屏设备(大桌面显示器)>= 1200px1170px1.1:响应式布局容器响应式需要一个父级做为布局容器,来配合子级元素来原创 2020-11-24 14:57:40 · 1405 阅读 · 0 评论 -
【移动Web开发 | 移动端常见布局】rem的适配方案
思维导图让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备。使用媒体查询根据不同设备按比例设置html的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配。一:less+rem+媒体查询设计稿常见尺寸宽度动态设置 html 标签 font-size 大小<!DOCTYPE html><html lang="en"><head> <meta c原创 2020-11-23 21:26:31 · 238 阅读 · 0 评论 -
【移动Web开发 | 移动端常见布局】rem布局
文章目录一:rem二:媒体查询 Media Query2.1:类型2.2:关键字2.3:媒体特性三:rem+媒体查询一:rem1:rem (root em)是一个相对单位,类似于em,em是父元素字体大小。rem的基准是相对于html元素的字体大小。比如:根元素(html)设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。【叽叽歪歪】把页面中所有表示大小的单位都换成rem把对应的设备宽度中设置一个合适的html标签的字体大小二:媒体查询原创 2020-11-22 20:18:17 · 185 阅读 · 1 评论 -
【移动Web开发 | 移动端常见布局】flex布局
思维导图一:传统布局与flex布局flex 是 flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 flex 布局。当我们为父盒子设为 flex 布局以后,子元素的 float、clear 和 vertical-align 属性将失效。伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 =flex布局PC端:用传统布局移动端:用flex布局❦给父盒子添加flex属性来控制子盒子的位置和排列方式二:flex布局父项常见属性原创 2020-11-19 20:42:52 · 322 阅读 · 0 评论 -
【移动Web开发 | 移动端常见布局】流式布局
流式布局(百分比布局)一:基本概念流式布局,就是百分比布局,也称非固定像素布局。通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。流式布局方式是移动web开发使用的比较常见的布局方式。max-width 最大宽度 (max-height 最大高度)min-width 最小宽度 (min-height 最小高度)关于宽度的百分比计算标准流的盒子宽度百分比是参考离其最近的行内块,块级标签的宽度固定定位的盒子得宽度百分比是参考浏览器窗口来计算的绝原创 2020-11-18 16:47:14 · 411 阅读 · 0 评论 -
【移动Web开发 | 基础知识】
思维导图一: 移动端基础1:常见的移动端浏览器❤ UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。总结:兼容移动端主流浏览器,处理Webkit内核浏览器即可。2:手机屏幕现状移动端设备屏幕尺寸非常多,碎片化严重。Android设备有多种分辨率:480x800, 480x854, 540x960, 720x1280,1080x1920等,还有传说中的2K,4k屏。近年来iPhone的碎片化也加剧了,其设备的原创 2020-11-18 15:31:07 · 415 阅读 · 2 评论 -
【web前端开发 | CSS3】3D转换
3D转换原创 2020-11-16 19:40:47 · 281 阅读 · 0 评论 -
【web前端开发 | CSS3】动画
动画 (经常使用)动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。1、定义动画:使用@keyframes定义动画 @keyframes 动画名称 { 0%{ } 100%{ } }2、使用动画:给当前标签设置一些样式来指定使用的动画描述属性指定动画的名称(必需)animation-name指定动画的时原创 2020-11-11 16:59:23 · 214 阅读 · 1 评论 -
【web前端开发 | CSS3】2D转换
思维导图转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、变形、缩放。1:移动 translate2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。 transform: translate(x, y); /*这两个可以单独写,但不可以两个同时出现,会层叠 */ transform: translateX(x); transform: translateY(y);原创 2020-11-11 14:52:48 · 245 阅读 · 0 评论 -
【web前端开发 | 综合】HTML5 和 CSS3 提高
思维导图H5C3的提高(均有兼容性问题,IE9+以上)HTML5 的新特性一:HTML5 新增的语义化标签<nav>导航栏标签</nav><header>头部标签</header><aside class="aside_left">左侧边栏</aside><aside class="aside_right">右侧边栏</aside><section>定义文档某个区域</se原创 2020-11-09 20:11:48 · 732 阅读 · 0 评论 -
【web前端开发 | CSS】CSS高级技巧
文章目录一:精灵图(sprites)1:基本概念2:案例二:字体图标(iconfont)1:基本概念(和精灵图区别)2:案例2.1 第一种 [lcoMoon App](https://icomoon.io/app/#/select)2.2:第二种 [iconfont-阿里巴巴矢量图标库](https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2)一:精灵图(sprites)1:基本概念核心原理:将网页中的一些小背景图像整合原创 2020-10-29 15:17:05 · 392 阅读 · 1 评论 -
【web前端开发 | CSS】页面布局之定位
思维导图一:定位属性定位static静态定位,默认定位方式,无定位,没有边偏移,很少使用relative相对定位,自恋型,不脱标,定位后原位置保留,子绝父相absolute绝对定位,拼爹型,脱标,不占有原来位置,子绝父相fixed...原创 2020-10-28 21:40:16 · 399 阅读 · 0 评论 -
【web前端开发 | CSS】页面布局之浮动
思维导图一:圆角边框border-radius:length;(50px 或50% 之类都可) 该属性是一个简写属性✿ 可以跟四个值,分别代表左上角、右上角、右下角、左下角✿ 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和 border-bottom-left-radius二:阴影1. 盒子阴影box-shadow: h-shadow v-shadow blur s原创 2020-10-24 13:19:42 · 1690 阅读 · 0 评论 -
【web前端开发 | CSS】页面布局之盒子模型
思维导图所谓 盒子模型:就是把 HTML 页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。CSS 盒子模型本质上是一个盒子,封装周围的 HTML 元素,它包括:边框、外边距、内边距、和 实际内容1:边框border:border-width | border-style | border-color; div { /* 实线 虚线 点线 */ border-style: solid;原创 2020-10-23 21:00:58 · 1191 阅读 · 0 评论 -
【web前端开发 | CSS】css的三大特性
思维导图一:层叠性针对于同一个选择器,并且设置同一个样式(样式冲突)采取 就近原则。同一个选择器,设置不同的样式(样式不冲突)都显示。二:继承性子标签会继承父标签的某些样式,类似,text- font- color ......❤ 行高的继承性,单位:可有可无❤ a链接有默认样式三:优先级①选择器相同,则层叠性②选择器不同,则依据权重来看是啥样式,权重叠加,但不会进位③继承的权重是0, 如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。 选择原创 2020-10-21 14:57:33 · 149 阅读 · 4 评论 -
【web前端开发 | CSS】css的背景
思维导图css背景1:背景颜色background-color: transparent;(背景透明)background-color: color;(背景改的颜色)2:背景图片background-image:none; background-image:url();(url带图片位置)【叽叽歪歪】对比img ,然后背景图片一般用于比较大的图或者比较小的logo3:背景平铺background-repeat: no-repeat; 属性描述repeat图原创 2020-10-21 11:34:02 · 227 阅读 · 2 评论 -
【web前端开发 | CSS】css元素的显示模式
思维导图一:元素显示模式分类*网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局我们的网页。*元素显示模式就是元素(标签)以什么方式进行显示,比如<div>自己占一行,比如一行可以放多个<span>1:块元素常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等,其中 <div> 标签是最典型的块元素。❤块级元原创 2020-10-20 19:57:26 · 377 阅读 · 1 评论 -
【web前端开发 | CSS】css样式
思维导图1 字体样式font-family原创 2020-10-17 15:24:37 · 366 阅读 · 0 评论 -
【web前端基础 | CSS】引入css样式的三种方式
思维导图<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 内部引入方式 --> <style> .way_01 { font-size原创 2020-10-17 13:41:37 · 290 阅读 · 1 评论 -
【web前端基础 | CSS】css选择器
思维导图选择器就是根据不同需求把不同的标签选出来这就是选择器的作用。 简单来说,就是选择标签用的。1 基础选择器1.1 标签选择器标签选择器是指用 HTML 标签名 称作为选择器,按标签名称分类,为页面中某一类标签指定统一的 CSS 样式 <!-- html部分 --> <div id="td_02"> <ul> <li>你好</li> <li原创 2020-10-17 11:50:40 · 203 阅读 · 0 评论 -
【web前端基础 | CSS】CSS简介
思维导图一:html的局限性很早的时候,世界上的网站虽然很多,但是他们都有一个共同的特点:丑。虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐……二:css的介绍CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称。有时我们也会称之为 CSS 样式表或级联样式表。 CSS 是也是一种标记语言CSS 主要用于设置 HTML 页面中的文本内容(字体、大小、对齐方式等)、图片的外形(宽高、边框样式、 边距等)以及版面的布局和外观显示样式。HTM原创 2020-10-16 21:19:55 · 320 阅读 · 0 评论 -
【web前端基础 | H5】HTML标签(下)表格,列表,表单
思维导图一:表格标签表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。组成 <table> <tr> <caption>表格标题</caption> </tr> <tr> <th&原创 2020-10-14 15:59:27 · 881 阅读 · 0 评论 -
【web前端基础 | H5】HTML标签(中)
思维导图一:排版标签标题标签为了使网页更具有语义化,我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题, 即<h1> - <h6><body> <h1>好好学习,天天向上</h1> <h2>好好学习,天天向上</h2> <h3>好好学习,天天向上</h3> <h4>好好学习,天天向上</h4> <原创 2020-10-13 19:32:31 · 362 阅读 · 2 评论 -
【web前端基础 | H5】HTML标签(上)
思维导图一:HTML语法规范1:基本语法概述HTML 标签是由尖括号包围的关键词,例如 <html>。HTML 标签通常是成对出现的,例如 <html> 和 </html> ,我们称为双标签。标签对中的第一个标签是开始标签,第二个标签是结束标签。有些特殊的标签必须是单个标签(极少情况),例如 <br />,我们称为单标签。【叽叽歪歪】编写页面时一定要将输入法切换至英文状态2:标签关系父子关系(包含关系)<head>原创 2020-10-13 11:22:12 · 285 阅读 · 0 评论