全栈工程师也可以叫web 前端 H5主要是网站 app 小程序 公众号这一块 HTML篇 html(超文本标记语言,标记通用标记语言下的一个应用.) “超文本”就是指页面内可以包含图片.链接,甚至音乐.程序等非文字元素. 超文本标记语言的结构包括“头”部分(英语:Head).和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的具体内容. 测试浏览器为chrome(谷歌)浏览器 当然其他浏览器也可以 不过最好用谷歌 开发工具有记事本  Sublime  drea…
起名方式与CSS 一.起名方式(起名方式也叫选择器) 起名的目的是为了给标签添加属性 常见的3种选择器有 标签选择器   id选择器(使用的时候加#)    class选择器(使用的时候加.) 样式的要求是由选择器的权重来决定的 标签的权重为1  class的权重是10 id的权重是100 权重是可以叠加的. 比如 注意给一个标签起两个名字的时候千万不要这样起: 要在一个class或者id属性里面直接写两个名字的属性值 在两个名字之间加一个空格来区分两个名字: 之前咱们说了选择器有标签名 id…
知识点补充 一.浏览器的兼容问题(关于浏览器的兼容问题 有很多大佬已经解释的很清楚了 这个得自己百度去多花点时间去了解 这里咱们只说一下前面的漏点) 浏览器兼容性问题又被称为网页兼容性或网站兼容性问题,指网页在各种浏览器上的显示效果可能不一致而产生浏览器和网页间的兼容问题. 在网站的设计和制作中,做好浏览器兼容,才能够让网站在不同的浏览器下都正常显示.而对于浏览器软件的开发和设计,浏览器对标准的 更好兼容能够给用户更好的使用体验. 二.background-position ,雪碧图 为什么使用…
position定位与表单 一.position 1.Position细说 Position:relative; Left:100px; Top:100px; Position:absolute; Left:100px; Top:100px; Position:relative:如果设置值了,相对原来的位置进行调整 二者区别 absolute会脱离标准流,relative不会,relative虽然给值了,但是依然占有着原来的位置. Relative存在”形影分离”,所以一般情况下不建议添加值了,…
列表与边距探讨和行块 一.列表 1.无序列表(UL) 1)内部必须有子标签<li></li>2)天生自带内外边距 p也是自带 大家会发现用UL的时候内容前面会出现一个像这样的一个实心圆 可以用属性list-style 去掉也可以更换(list-style:none;)circle空心圆 disc实心圆 square正方形 none空 2.有序列表(OL) 1)内部必须有子标签<li></li> 2)天生自带内外边距 属性type(是标签属性只能写在行间) 有…
背景与边框 一.背景(backgound) 1.背景颜色:background-color:red;(简写:background:color;) 备注:ie9以下给body设置background-color可能不起作用 需要用到bgcolor(<body bgcolor=" ">) 2.背景图片:background-image:url();(简写:background:url();) 3.背景图片的平铺 1).平铺:浏览器默认平铺 2).只平铺横向和纵向:backgro…
文本.字体css样式与前期英语单词汇总 一.文本样式(text) 1.颜色:color:red; 2.文本对齐方式:text-align:left/center/right/justify; left:左对齐 center:居中对齐 reght:右对齐 justify:两端对齐 3.文本修饰:text-decoration:none/overline/underline/line-through; none:空 overline:上划线 underline:下划线 line-through:删除…
解决乱码: header("Content-Type: text/html;charset=utf-8"); 单词 局部的: local 全局的: global 静态的: static 参数: parameter 工具: implements 关键字 定义常量: const 类的创建: class 对象的创建: new 公开的: public 受保护的: protected 私有的: private 继承类: extends 拒绝重载: final 访问父级的常量.方法.静态属性: p…
浮动与伪类选择器 一.浮动(float) 1.标准文档流 标准文档流是一种默认的状态 浏览器的排版是根据元素的特征(块和行级) 从上往下 从左往右排版 这就是标准文档流 2.浮动(float)float:left/right; 因为标准文档流会使页面的状态固定 元素会自动从左往右,从上往下的流式排列 所以我们要给元素加一个浮动 使它脱离标准文档流的控制 效果:元素都加浮动,后面的元素会紧跟这前面的元素并排排列. 只要加了float,这个元素就会脱离标准文档流. 第一个加了float,离了标准文档…
JS开篇 一.js介绍 全称 javascript 但不是java 他是一门前台语言 而java是后台语言js作者 布兰登·艾奇 前台语言:运行在客户端的后台语言:跟数据库有关的 能干什么?    页面特效 开发网页游戏 后台开发等等 二.js和ECMAscript的关系 es不是语言 是js的标准 我们学习js得按es的标准学习 三.前端的三个层次 HTML  结构层 CSS  表现层 JS  行为层 四.js写在哪里 因为js和pho都是脚本语言 js写在script这个标签里 php写在<…
JS数据类型具体分析与数据的三大存储格式 1. 字符串 string2. 数字 number3. 布尔 boolean4. null 空5. undefined 未定义↑↑↑叫基本数据类型 基本数据类型就是简单的赋值 6. 对象 object array数组 function函数 json 日期 数字对象等 都属于对象 “.”运算符 点 运算符  xxx.sss   xxx 是对像    sss是属性和方法. 任何数据类型都是拥有属性和方法的 一.字符串 字符串的定义 var s=”haha”;…
underscore 是js封装的一个js库 库和框架是有区别的 mvc框架就是backbone就是依赖这个库underscore就是定义了一个_( 下划线对象 ); 函数库的所有的方法都归属于这个对象 大致有五类分别是:集合collection 数组array 函数function 对象object 工具utility ( 这里介绍一些简单的方法 ) 框架和库的区别库:就是js大量方法的集合框架:是一种开发模式 如:mvc mvp mvm等 简称mv* 一.集合 集合就是伪数组 不存在数组的那…
数据类型与全局属性 js的本质就是处理数据 数据来自于后台的数据库所以变量就起到一个临时存储数据的这作用ECMAscirpt 制定了js的数据类型 一.数据类型 1.基本数据类型 基本数据类型就是简单的赋值 Var s=”hello”; var s=12; var s=true; var s=null; var s=undefined; 1)基本数据类型就是简单的赋值 字符串 string数字 number布尔 booleannull 空undefined 未定义 2)对象 object arr…
面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式.它使用先前建立的范例,包括模块化,多态和封装几种技术.今天,许多流行的编程语言(如Java,JavaScript,C#,C+ +,Python,PHP,Ruby和Objective-C)都支持面向对象编程(OOP). 相对于 “一个程序只是一些函数的集合,或简单的计算机指令列表.”的传统软件设计观念而言,面向对象编程可以看作是使用一系列对象相互协作的软件设计. 在 OOP 中,每个对象能够接收消息,处理数据和发送消息给其他…
闭包是js中的一大特色,也是一大难点.简单来说,所谓闭包就是说,一个函数能够访问其函数外部作用域中的变量. 闭包的三大特点为: 1.函数嵌套函数 2.内部函数可以访问外部函数的变量 3.参数和变量不会被回收. 闭包散知识点: 一.变量销毁 1.人为销毁:var a = 12; a = null; 2.自然销毁:函数调用完成之后浏览器会自动销毁函数内的变量 二.闭包的种类 1.函数式 2.对象式 举例来说 function test(){ var a = 123; return function…
js中的异步 Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推). 这种模式的好处是实现起来比较简单,执行环境相对单纯:坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行.常见的浏览器无响应(假死), 往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行.为了解决这个问题,…
一.事件对象 1.常用的事件2.每个元素身上的事件都是天生存在的 不需要我们去定义 只需要我们给这个事件绑定一个方法 当事件触发的时候就会执行这个方法 3.事件绑定的写法 ①div.onclick=function (dom 0级)②addEventListener( ) 或 attachEvent( ) (dom 2级事件绑定)③二者的区别:onclick是这个元素私有的属性 天生自带的 而addEventlistener是公有的属性 从EventTarget(事件源)对象上继承来的④ie低版…
一.复习 面向对象 1)单例模式 2)工厂模式 3)构造函数 ①类js天生自带的类 基类object function array number math boolean date regexp string 二.事件    浏览器客户端上客户触发的行为都称为事件 所有的事件都是天生自带的 不需要人为绑定 只需要我们去触发通过obj.事件名=function(){} 我们给元素的事件绑定了一个方法 事件名:onmouseover onmouseout onmousedown onmousemov…
js操作css样式 div.style.width=“200px” 在div标签内我们添加了一个style属性 并设定了width值 这种写法会给标签带来了大量的style属性 跟实际项目是不符的 我们没有让css和html分离 所以如果只是为了获取css样式 window.getComputedStyle() 获取经过计算机计算的所有属性 就是只要渲染出来的都是经过计算的. 1.window.getComputedStyle() (只读) 写法:window.getComputedStyle(…
一.表单 Form input select textarea type=”radio/checkbox/password/button/text/submit/reset/” 表单的事件 onchange  当表单内容被修改时触发的事件 onfocus  获取焦点事件 onblur  失去焦点事件 表单里的内容用.value 那div中内容用innerHTML switch语句 补充条件语句 1.if  else 2.switch 二.计时器 js的同步和异步同步:代码从上到下执行js本身就是…
面向对象 Js一开始就是写网页特效,面向过程的,作者发现这样写不好,代码重复利用率太高,计算机内存消耗太大,网页性能很差. 所以作者就收到java和c的影响,往面向对象靠齐.Js天生有一个Object,但他没有面向对象的特征(封装,继承,多态). 最后研究出了构造函数. 构造函数最终目的是生成对象 我们把封装的那个函数叫 类类里面的属性是私有的类原型上的属性是公有的 可以继承1)首先类身上天生自带一个prototype的属性 属性值是对象2)prototype 对象天生有一个constructo…
对象与构造函数 一.js数据类型 基本数据类型:string   undefined   null  boolean  number 引用数据类型  Object  array  function 二者的区别 基本数据类型就是简单的操作值,引用数据类型,把引用地址赋值给变量 引用数据类型会开辟一个新的内存空间把内存空间的地址赋值给变量 基本数据类型↓↓↓ 堆内存 就是存放代码块的,存放形式有两种,一种是对象以键值对的形式存放 另一种就是函数  以字符串的形式存放 案例: 引用数据类型↓↓↓ 案例…
this 一.this是js的一个关键字 指定一个对象然后去替代他    只研究函数内的this 分两种 函数内的this和函数外的this1)函数内的this指向行为发生的主体2)函数外的this都指向window ←←←没有意义 二.函数内的this和函数在什么环境下定义没有关系 而只和自己的主体有关. 三.主体怎么找?? 就看这个函数(方法) 带不带“.”如果函数和方法执行了带“.”那么this 就指向“.”前面的对象如果不带“.”就指向window 四.自执行函数里面的this都指向wi…
DOM(document object model) DOM主要研究htmll中的节点(也就是标签) 对节点进行操作    可以改变标签  改变标签属性  改变css样式  添加事件 一.操作流程 1.选择你要操作的节点 1)document.getElementById(“id名字”)通过id获取元素 2)document.getElementByTagName(“div”)获取整个哇昂也中所有div构成的一个数组集合 3)document.getElementsByClassName(“na…
函数 Var 是js的关键字,用于声明变量,声明在内存模块完成,定义(=)是在执行模块完成. Var可以在内存模块提前(js代码执行前)完成所以有变量提升这个功能. 因为a没有带var,所以不存在变量提升,浏览器会把他当成window的属性. Function也是js的关键字,用于声明和定义函数的,声明和定义都在内存模块完成了. Function 也是内存模块提前完成,所以有函数提升这个功能. 变量提升和函数提升 都叫预解释.都是浏览器的. 1.函数的定义 函数是通过function定义的,fu…
条件语句与循环语句 变量提升: 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域叫window ,window分两个模块,一个叫内存模块,一个叫运行模块,内存模块找到当前作用域下的所有带var和function的关键字, 执行模块执行js代码,从上到下执行,遇到变量就会通过内存地址去查找这个变量,有和没有这个变量.有这个变量就会看赋值没赋值, 如果赋值就是后面的值,如果没有赋值就是undefined,如果没有找到就说这个变量 is not defined 一.条件语句…
Cookie是由服务器端生成,发送给User-Agent,浏览器会将Cookie的key/value保存到某个目录下的文本文件内,下次请求同一网站时就发送该Cookie给服务器,对cookie知识感兴趣的朋友一起学习吧 cookie就是一个存放数据的东西 存储量很小 4kb 存放在客户端上和应用设备上应用场景:用户注册 用户登录 购物车 场景1:今天登录了一个账号 过几天之后 重新打开这个页面 发现账号还在登录状态上 这个就是存在客户端 场景2:我在北京用京东扔了一件衣服在购物车 我爸妈在老家用…
正则 就是一条规则 用来检验字符串的格式 目标就是字符串 只要是通过表单提交的数据 都是字符串1.正则定义var reg = new RegExp( )var reg = /格式/ <--简写 2.正则的方法两大功能:一个是匹配 匹配成功就是true 第二个是捕获 如果有就拿出来test( ) 用于匹配 exec( ) 用于捕获 直接返回捕获的对象 没捕获到就是null 3.正则修饰符 如何去匹配①区不区分大小写 “i”代表忽略大小写②全局 “g”代表全局匹配③“m”代表多行匹配 4.修饰符使用…
作用域 // 1. fn() function fn () { console.log(12) } var as = function () { console.log(45) } // 2. var a = 12; function fn () { console.log(a) var a = 45; console.log(a) } fn() //3. var a = 12; function fn () { console.log(a) a = 45; console.log(a) } f…
一.BOM 浏览器对象模型 1.window.open(url,ways) url 是打开的网页地址ways 打开的方式 _self 2.window.close() 关闭当前页面 3.window.navigator() .userAgent 浏览器用户信息 <--后期靠他解决浏览器的兼容性 4.window.location() 浏览器地址信息 5.window.history 返回上一页 window.history .back() 返回 widnow.history.forward()前…