网页基础总结（4）

一.网页基础

1.选择器优先级关系

!important>ID>类>元素

内联样式表>嵌入>外部

2.css盒模型

两种模式 {

1.标准 content+padding(2)+margin(2)+border(2)

2.怪异 content(包括padding和border)+margin(2)

}

弹性盒模型{

弹性容器  弹性子元素

}

3.浮动作用/特点

清除浮动的三种方式

加标签 float

overflow：hidden

clearfix(给父元素加)

4.三种定位方式以及使用场景

absolute生成绝对定位元素，相对于static定位以外的第一个父元素进行定位

fixed生成绝对定位的元素，相对于浏览器窗口进行定位。

relative生成相对定位，相对于其正常位置进行定位。

5.常用的表单控件

①单行/多行文本框

②单选按钮

③文件域

④提交按钮

⑤复选框

⑥密码框

⑧下拉菜单

⑨重置按钮

6.新增的表单类型

tel  url  email search  number range color

7.pc端常用布局：定位  浮动  flex  media

移动端常用布局：rem  100%  flex  media

8.css3变形属性：transform-rotate  旋转

transform-scale  变形

transform-skew    倾斜

transform-translate  移动

9.css3动画

10.HTML5拖拽API：

源：ondragstart  拖拽前触发

ondrag        拖拽前联系触发

ondragend    拖拽结束触发

目标元素事件：ondragenter  移入目标元素时触发

ondragover    移入目标元素后连续触发

ondragleave  离开目标元素时触发

ondrop        在目标元素释放鼠标触发

11.移动端试口viewport初始化缩放比例1：1禁止用户手动缩放

12.PC端（>1200px）文字20px

@media(min-width>1200px){  }

移动端（<768px）文字12px

@media(min-width<768px){...}

13.locolstorage5个属性：setItem()  getItem()  removeItem()  clear()  key()

14.css的优先级

important>id>class>element>*

15.css3新的选择器

波浪线（~），:root  :only-child  :last-child  ::selection

16. css3新的属性

文字阴影  text-shadow

文本换行  word-wrap:normal（默认）/ break-word（长单词超出区域换行）

圆角边框  border-radius

边框阴影  box-shadow

服务端字体 font-face

字体图标  IcoMoon

过渡      transion

变形      transform

二.JavaScript基础

1.字符串/数组操作/数据类型/类型转换

字符串 string

数组操作 push() 可向数组末尾添加一个或多个元素,并返回新的长度

pop() 删除并返回数组的最后一个元素

join() 将数组中所有元素都转换为字符串并连接在一起 返回字符串

reverse() 将数组中元素的顺序颠倒 返回逆序的数组

sort() 将数组中的元素进行排序 返回排序后的数组

concat() 合并两个数组 返回合并后的新数组

slice() 返回指定数组的一个片段或子数组 他的两个参数分别为片段上的起始和结束位置

splice() 用于插入 删除 或替换数组的元素 并返回删除的部分数组

shift() 删除数组的第一个元素并返回

unshift() 在数组的头部添加一个或多个元素并返回数组的新长度

数据类型 string number undefined null NaN object function Boolean

类型转换  显示转换： 通过手动进行类型转换

Javascript提供了以下转型函数：

①转换为数值类型：Number(mix)、 parseInt(string,radix)、parseFloat(string)

这三个函数可以把非数值转换为数值。

②转换为字符串类型：toString(radix)、 String(mix)

③转换为布尔类型：Boolean(mix)

2.For循环使用

for/for in/for each/while/switch

理解回调函数

3.函数返回值 return 函数传参 形参/实参

4.预解析概念

定义

预解析：在当前作用域下,js运行之前，会把带有var和function关键字的事先声明，并在内存中安排好。然后再从上到下执行js语句。

预解析只会发生在通过var定义的变量和function上。

5.日期对象/了解正则常用符号/Math对象（5个）

①日期对象 date用于处理日期和时间

toSting把date转换为字符串并返回结果

toLocaleString() 根据本地时间把date对象转换为字符串并返回结果

getTime() 返回距1970年1月1日之间的毫秒数

setTime() 以毫秒设置Date对象

getFullYear() 方法可返回一个表示年份的 4 位数字

setFullYear() 用于设置年份

getMonth() 返回表示月份的数字

setMonth() 用于设置月份

②正则常用符号

+  匹配任何至少包含一个前导字符串

*  包含零个或者多个前导字符串

？ 匹配任何包含零个或者一个前导字符串

. 匹配任意字符串

{x} 匹配任何包含x个前导字符串

{x,y} 匹配任何包含x-y个前导字符串

$  匹配字符串的行尾

^  匹配字符串的行首

|  匹配字符串的左边或右边

()  包围一个字符分组或者定义个反引用 可以使用/1/2 提取

③Math对象

Math.random() 可返回介于0~1之间的一个随机数

Max(x,y) 返回x和y中的最高值

Min(x,y) 返回x和y中的最低值

Math.ceil(x) ceil()方法可对一个数进行上舍入

Math.floor() floor()方法可对一个数进行下舍入

Math.round() round()方法可以把一个数字舍入为最接近的整数

三.JavaScript高级

1.定时器的使用方式和使用场景

①一次性计时器：在指定时间触发一次  setTimeout(进行触发的事件,指定时间间隔)

取消计时器  clearTimeout()

②间隔性计时器：每隔一段时间便触发  setInterval()

取消计时器  clearInterval()

2.理解闭包的概念

对于闭包，我这这样理解的，在js中，分为全局变量和局部变量。全局变量实在任何场景下都可以调用，可是局部变量就不一样了，在默认情况下是访问不到的。这个时候就用到了闭包，在函数中再申明一个匿名函数也可以称为二重函数，这样父元素可以调用子元素的方法，子元素也可以调用父元素的属性和方法，在什么情况下会用到闭包呢？一般在写一些插件或者是其他的一些东西时用到。在js面向对象中封装方法的时候也会用到闭包。一般情况下很少使用闭包，因为闭包占用资源，降低了代码的安全性。

3.谈谈对this的理解。

this是js的一个关键字，随着场合的不同，this所指的不一样。但是无论如何，this都指的是被调用的那个对象。

地理定位 Geolocation

方法：getCurrentPosition() 当前的地理位置

cookies基础

cookie也叫HTTP Cookie，要求服务器对任意HTTP请求发送Set-Cookie，因此，Cookie的处理原则上需要在服务器环境下进行。

格式 属性=属性值  cookie不会覆盖  cookie有过期时间 如果不设置 过期时间为浏览器关闭

1.同源：协议相同（http  https[HTTP+SSL/TLS]  htp），端口相同，域名相同

定时器：setTimeOut(function(){},time);

setInterval(function(){},time)

cookie、localstorag、seccionstorage

cookie:会在请求时发送给服务端，服务端可以修改

有效期：在设置的时间内有效

可以同源共享，但要符合规则

不超过4KB，单个服务器不超过20个，单个浏览器不超过300个

localstorage：可以同源共享

有效期：不删除永远不会过期

seccionstorage：不可以同源共享

有效期：浏览器关闭就失效了

var students=["张三","李四","王五"];

students.forEach(function (eachName, index) {

console.log(index+1+":"+eachName)

}); //1:张三

//2:李四

//3:王五

js预解析（只发生在当前作用域下）：先解析变量、方法、参数，在预解析时会忽略所有的判断

DOM：

BOM：核心window，浏览器解

变量：可以变化的量，在预解析时提前声明，不会同时定义

常量： 在预解析时提前声明，同时定义

作用域链：一个函数执行的时候形成一个私有的作用域，如果有形参的话，先给形参赋值，然后再进行私有作用域的预解析

在全局作用域下不用var会报错

ES6之前是没有块级作用域的概念的

回调函数的使用场景：

资源加载、ajax、DOM事件、定时器、node.js