02 2021 档案

摘要:1.简单类型与复杂类型 简单类型又叫做基本数据类型或者值类型,复杂类型又叫做引用类型。 值类型:简单数据类型/基本数据类型,在存储时变量中存储的是值本身,因此叫做值类型 string ,number,boolean,undefined,null 引用类型:复杂数据类型,在存储时变量中存储的仅仅是地址 阅读全文
posted @ 2021-02-26 00:32 琴时 阅读(90) 评论(0) 推荐(0)
摘要:1.内置对象 JavaScript中的对象分为3种:自定义对象、内置对象、浏览器对象 前面两种对象是JS基础内容,属于ECMAScript;第三个浏览器对象属于我们S独有的,我们JS API讲解 内置对象就是指JS语言自带的一些对象,这些对象供开发者使用,并提供了一些常用的或是最基本而必要的功能(属 阅读全文
posted @ 2021-02-26 00:30 琴时 阅读(109) 评论(0) 推荐(0)
摘要:1.对象 1.1什么是对象? 在JavaScript中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。 对象是由属性和方法组成的。 属性∶事物的特征,在对象中用属性来表示(常用名词) 方法︰事物的行为,在对象中用方法来表示(常用动词) 1.2为什么需要对象 阅读全文
posted @ 2021-02-26 00:28 琴时 阅读(108) 评论(0) 推荐(0)
摘要:1.预解析 JavaScript代码是由浏览器中的JavaScript解析器来执行的。JavaScript解析器在运行JavaScript代码的时候分为两步∶预解析和代码执行。 我们js引擎运行js 分为两步:预解析代码执行 预解析 js引擎会把js 里面所有的 var 还有 function 提升 阅读全文
posted @ 2021-02-26 00:27 琴时 阅读(79) 评论(0) 推荐(0)
摘要:1.作用域 1.1作用域概述 通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。 2.变量的作用域 2.1变量作用域的分类 在JavaScript中,根据作用域的不同 阅读全文
posted @ 2021-02-26 00:26 琴时 阅读(76) 评论(0) 推荐(0)
摘要:1. 函数的概念 在 JS 里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。 虽然 for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用 JS 中的函数。 函数:就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使 阅读全文
posted @ 2021-02-26 00:24 琴时 阅读(95) 评论(0) 推荐(0)
摘要:1.数组大概念 数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。 2.创建数组 2.1数组的创建方式 JS中创建数组有两种方式: 利用new创建数组 利用数组字面量创建数组 2.2利用new创建数组 var 数组名 阅读全文
posted @ 2021-02-26 00:10 琴时 阅读(82) 评论(0) 推荐(0)
摘要:1.标识符命名规范 变量、函数的命名必须要有意义 变量的名称一般用名词 函数的名称一般用动词 2.操作符规范 //操作符的左右两侧各保留一个空格for (var i = l; i <= 5; i++){if (i == 3) { break; //直接退出整个for循环,跳到整个for循环下面的语句 阅读全文
posted @ 2021-02-26 00:09 琴时 阅读(95) 评论(0) 推荐(0)
摘要:1.流程控制 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的。很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能。 简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行 流程控制主要有三种结构,分别是顺序结构、分支结构和循环结构,这三种结构代表三种代码执行的顺序 阅读全文
posted @ 2021-02-26 00:04 琴时 阅读(113) 评论(0) 推荐(0)
摘要:1.组成 ECMAScript:javascript语法 DOM:页面文件对象模型 BOM:浏览器对象模型 1.ECMAScript ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript, 阅读全文
posted @ 2021-02-26 00:02 琴时 阅读(86) 评论(0) 推荐(0)
摘要:1.响应式开发 1.1响应式开发原理 就是使用媒体查询针对不同宽度的设备进行布局和样式的设置,从而适配不同设备的目的。 设备划分尺寸区间 超小屏幕(手机) < 768px 小屏设备( 平板) 768px ~ 992px 中等屏幕(桌面显示器) 992px ~ 1200px 宽屏设备(大桌面显示器) 阅读全文
posted @ 2021-02-20 23:44 琴时 阅读(230) 评论(0) 推荐(0)
摘要:1.rem基础 rem单位 rem (root em)是一个相对单位,类似于em , em是父元素字体大小。. 不同的是rem的基准是相对于html元素的字体大小。 比如,根元素( html )设置font-size=12px;非根元素设置width:2rem;则换成px表示就是24px。 html 阅读全文
posted @ 2021-02-20 23:39 琴时 阅读(203) 评论(0) 推荐(0)
摘要:flex弹性布局 1.传统布局与flex布局 传统布局 兼容性好布局繁琐 局限性,不能再移动端很好的布局 局限性,不能再移动端很好的布局 flex弹性布局 操作方便,布局极为简单,移动端应用很广泛PC端浏览器支持情况较差 IE11或更低版本,不支持或仅部分支持 建议∶ 如果是PC端页面布局,我们还是 阅读全文
posted @ 2021-02-20 23:37 琴时 阅读(158) 评论(0) 推荐(0)
摘要:流式布局(百分比布局) 流式布局,就是百分比布局,也称非固定像素布局。 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩,不受固定像素的限制,内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式。 max-width最大宽度( max-height最大高度) min-width 阅读全文
posted @ 2021-02-20 23:33 琴时 阅读(127) 评论(0) 推荐(0)
摘要:6.移动端常见布局 移动端技术选型 移动端布局和以前我们学习的PC端有所区别: 单独制作移动端页面(主流) 流式布局(百分比布局) flex弹性布局(强烈推荐) less+rem+媒体查询布局 混合布局 响应式页面兼容移动端(其次) 媒体查询 bootstarp 阅读全文
posted @ 2021-02-20 23:27 琴时 阅读(84) 评论(0) 推荐(0)
摘要:5.移动端技术解决方案 5.1移动端浏览器 移动端浏览器基本以webkit内核为主,因此我们就考虑webkit兼容性问题。 我们可以放心使用H5标签和CSS3样式。 同时我们浏览器的私有前缀我们只需要考虑添加webkit即可 5.2 CSS初始化normalize.css 移动端CSS初始化推荐使用 阅读全文
posted @ 2021-02-20 23:26 琴时 阅读(102) 评论(0) 推荐(0)
摘要:4. 移动端开发选择 4.1 移动端主流方案 1.单独制作移动端页面(主流) 京东商城手机版 淘宝触屏版 苏宁易购手机版 … 2.响应式页面兼容移动端(其次) 三星手机官网 4.2 单独移动端页面(主流) 通常情况下,网址域名前面加m(mobile)可以打开移动端。通过判断设备,如果是移动设备打开, 阅读全文
posted @ 2021-02-20 23:24 琴时 阅读(120) 评论(0) 推荐(0)
摘要:3. 二倍图 3.1 物理像素&物理像素比 物理像素点指的是屏幕显示的最小颗粒,是物理真实存在的。这是厂商在出厂时就设置好了,比如苹果6\7\8是750*1334 我们开发时候的1px不是一定等于1个物理像素的 PC端页面,1个px等于1个物理像素的,但是移动端就不尽相同 一个px的能显示的物理像素 阅读全文
posted @ 2021-02-20 23:22 琴时 阅读(375) 评论(0) 推荐(0)
摘要:2. 视口 视口( viewport)就是浏览器显示页面内容的屏幕区域。视口可以分为布局视口、视觉视口和理想视口 2.1布局视口layout viewport 一般移动设备的浏览器都默认设置了一个布局视口,用于解决早期的PC端页面在手机上显示的问题。 iOS,Android基本都将这个视口分辨率设置 阅读全文
posted @ 2021-02-20 23:21 琴时 阅读(263) 评论(0) 推荐(0)
摘要:1. 移动端基础 1.1 浏览器现状 PC端常见浏览器 360浏览器、谷歌浏览器、火狐浏览器、QQ浏览器、百度浏览器、搜狗浏览器、IE浏览器。 移动端常见浏览器 UC浏览器,QQ浏览器,欧朋浏览器,百度手机浏览器,360安全浏览器,谷歌浏览器,搜狗手机浏览器,猎豹浏览器,以及其他杂牌浏览器。 国内的 阅读全文
posted @ 2021-02-20 23:19 琴时 阅读(113) 评论(0) 推荐(0)
摘要:3. 浏览器私有前缀 浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无须添加。 1.私有前缀 -moz-∶代表firefox浏览器私有属性 -ms-:代表ie浏览器私有属性 -webkit-:代表safari、chrome私有属性 -o-︰代表Opera私有属性 2.提倡的写法 -moz- 阅读全文
posted @ 2021-02-20 22:04 琴时 阅读(179) 评论(0) 推荐(0)
摘要:1.4 HTML5新增的表单属性 属性值说明 required required 表单拥有该属性表示其内容不能为空,必填 placeholder 提示文本 表单的提示信息,存在默认值将不显示(修改文字颜色input::placeholder{color:#fff}) autofocus autofo 阅读全文
posted @ 2021-02-20 22:02 琴时 阅读(136) 评论(0) 推荐(0)
摘要:1.3 HTML5新增的input类型 属性值说明 type="email" 限制用户输入必须为Email类型 <br/> type="url" 限制用户输入必须为URL类型 type="date" 限制用户输入必须为日期类型 type="time" 限制用户输入必须为时间类型 type="mont 阅读全文
posted @ 2021-02-20 22:01 琴时 阅读(151) 评论(0) 推荐(0)
摘要:1.2 HTML5新增的多媒体标签 新增的多媒体标签主要包含两个∶ 音频: <audio> 视频: <video> 使用它们可以很方便的在页面中嵌入音频和视频,而不再去使用flash和其他浏览器插件。 1.2.1 视频 <video> HTML5在不使用插件的情况下,也可以原生的支持视频格式文件的播 阅读全文
posted @ 2021-02-20 21:59 琴时 阅读(220) 评论(0) 推荐(0)
摘要:1.1 HTML5新增的语义化标签 语义化是指用HTML写出符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。 以前布局,我们基本用div来做。div对于搜索引擎来说,是没有语义的。 <div class="hea 阅读全文
posted @ 2021-02-20 21:57 琴时 阅读(233) 评论(0) 推荐(0)
摘要:HTML5的新特性 HTML5的新增特性主要是针对于以前的不足,增加了一些新的标签、新的表单和新的表单属性等。 这些新特性都有兼容性问题,基本是IE9+以上版本的浏览器才支持,如果不考虑兼容性问题,可以大量使用这些新特性。 声明︰ 1.新特性增加了很多,但是我们专注于开发常用的新特性。 ⒉基础班我们 阅读全文
posted @ 2021-02-20 21:55 琴时 阅读(82) 评论(0) 推荐(0)
摘要:「1. 什么是HTML5」 定义:HTML5定义了HTML标准的最新版本,是对HTML的第五次重大修改,号称下一代的HTML。 两个概念: 是一个新版本的HTML语言,定义了新的标签、特性和属性 拥有一个强大的技术集,这些技术集是指:HTML5、CSS3、JavaScript,这也是广义上的HTML 阅读全文
posted @ 2021-02-20 21:51 琴时 阅读(101) 评论(0) 推荐(0)
摘要:2.10 3D转换 2.10.1 三维坐标系 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。 x轴:水平向右―注意∶×右边是正值,左边是负值 y轴:垂直向下注意:y下面是正值,上面是负值 z轴:垂直屏幕注意:往外面是正值,往里面是负值 3D 转换知识要点 3D 位移:translate 阅读全文
posted @ 2021-02-20 00:00 琴时 阅读(98) 评论(0) 推荐(0)
摘要:2.9 动画(animation) 「动画」是CSS3中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。 2.9.1「动画的使用」 先定义动画 再调用定义好的动画 /*1. 定义动画*/@ 阅读全文
posted @ 2021-02-19 23:57 琴时 阅读(252) 评论(0) 推荐(0)
摘要:2.8 2D 转换 转换(transform )是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果 转换( transform )你可以简单理解为变形 2D转换:是改变标签在二维平面上的位置和形状 移动:translate 旋转:rotate 缩放:scale 2.8.1 二维坐 阅读全文
posted @ 2021-02-19 23:55 琴时 阅读(148) 评论(0) 推荐(0)
摘要:2.7 CSS3过渡(重点) 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画︰是从一个状态渐渐的过渡到另外一个状态 可以让我们页面更好看,更动感十足,虽然低版本 阅读全文
posted @ 2021-02-19 23:54 琴时 阅读(79) 评论(0) 推荐(0)
摘要:2.6 CSS3其他特性(了解) 2.6.1 CSS3滤镜filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。 filter:函数(); /*例如: filter: blur(5px); blur模糊处理数值越大越模糊*/ 2.6.2 CSS3 calc函数: calc() 阅读全文
posted @ 2021-02-19 23:52 琴时 阅读(51) 评论(0) 推荐(0)
摘要:2.5 CSS3盒子模型 CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。 可以分成两种情况︰ box-sizing:content-box盒子大小为width + padding + bo 阅读全文
posted @ 2021-02-19 23:50 琴时 阅读(76) 评论(0) 推荐(0)
摘要:2.4 伪元素选择器(重点) 伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。 选择符简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意︰ before和after创建一个元素,但是属于行内元素 新创建的这个 阅读全文
posted @ 2021-02-19 23:47 琴时 阅读(76) 评论(0) 推荐(0)
摘要:2.3 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 选择符简介 E:first-child 匹配父元素中的第一个子元素E E:last-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E E:first 阅读全文
posted @ 2021-02-19 23:45 琴时 阅读(210) 评论(0) 推荐(0)
摘要:2.2属性选择器 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。 选择符简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[attN="val"] 匹配具有att属性且值以val开头的E元素 阅读全文
posted @ 2021-02-19 23:42 琴时 阅读(75) 评论(0) 推荐(0)
摘要:2.1 CSS3的现状 新增的CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 不断改进中 应用相对广泛 现阶段主要学习∶新增选择器和盒子模型以及其他特性 CSS3新增选择器 CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。 属性选择器 结构伪类选择器 伪元素选择器 阅读全文
posted @ 2021-02-19 23:41 琴时 阅读(105) 评论(0) 推荐(0)
摘要:不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化 简单理解︰CSS初始化是指重设浏览器的样式。(也称为CSS reset )每个网页都必须首先进行CSS初始化。 这里我们以京东css初始化代码为例。 Unicode编码字体: 阅读全文
posted @ 2021-02-19 23:36 琴时 阅读(93) 评论(0) 推荐(0)
摘要:1.14.1 精灵图 1.14.1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。 因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵 阅读全文
posted @ 2021-02-19 23:32 琴时 阅读(89) 评论(0) 推荐(0)