前端常见的知识点（一）
各个浏览的内核和前缀
Chrome：webkit -webkit-
Safari： webkit -webkit-
Firefox：gecko -moz-
IE：trident -ms-
opera：presto -o-
所谓的浏览器内核就是浏览器所采用的渲染引擎，渲染引起决定了浏览器如何显示网页的内容及页面的格式信息
css
1.常见的空标签：
（css规范规定：每个元素都会有display属性，确定该元素的类型，每个元素都有默认值）
2.要想写出跨浏览的CSS，必须要知道浏览器解析CSS的两种模式：标准模式和怪异模式
标准模式：浏览器按照W3C的标准执行代码
怪异模式：浏览器按照自己的方式执行代码，不同的浏览器执行方式不一样
如何判断浏览器到底怎么解析文档，就是在网页中的DTD声明直接相关，DTD声明顶了标准文档的类型
3.display的属性值
list-item：此元素会作为列表显示
inlin-block：既具有block的宽高由具有inline的同行元素特性
flex：设置为flex后，子元素的float、clear和vertical-align属性将失效
4.未知div大小，实现垂直水平居中与浏览器中的实现方式
未知div大小，垂直水平居中
hello
hello word
hello everyone
hello
hello word
hello everyone
未知div大小，垂直水平居中
hello
hello
hello
hello
1）给父元素定义高度
2）clear：both
3）定义伪类after和zoom
4）父级定义overflow：hidden
6.盒模型
1）content+padding+margin+border
2）IE下：content包括padding+border
7.引入css文件有三种方式
1）行内式： 123
2）内嵌式：
3）外链式：
8.浏览器兼容性问题：
（1）每个浏览器默认的内外补丁都不同，所以在编写代码时，都要清除内外补丁 *{margin：0；padding：0；}
（2）几个img标签放在一起的时候，有些浏览器会有默认的间距，清除内外补丁也没有作用，img标签添加float属性，就可以解决了
（3）IE6认识的hack 是下划线_ 和星号 *
IE7 认识的hack 是星号 *
比如：height:300px;*height:200px;_height:100px;
IE6浏览器在读到height:300px的时候会认为高时300px；继续往下读，他也认识*heihgt， 所以当IE6读到*height:200px的时候会覆盖掉前一条的相冲突设置，认为高度是200px。继续往下读，IE6还认识_height,所以他又会覆盖掉200px高的设置，把高度设置为100px；最后识别的height：100px
9.DOCTyps作用：告知浏览器的解析器用什么文档标准解析这个文档
标准模式：排版和js运作都是以浏览器支持的最高标准在运行
兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为防止站点无法工作
HTML5
1.HTML5中form表单中新的输入控件
email：电子邮箱文本框，输入不是邮箱的时候，验证不能通过
tel：电话号码
url：网页的URL
number：只能包含数字的输入框
color：颜色选择器
datetime：显示完整的日期
time：显示时间，不含时区
date：显示日期
2.解决HTML5新标签的浏览器兼容问题：在IE6/7/8下，支持document.createElement（）方法产生的标签，可以根据这种方式创建出HTML的新标签，需要添加默认的样式
3.对语义化标签的理解：让页面内容简洁化，结构更清晰，便于浏览器搜索引擎解析，同时便于阅读代码的人对网站更容易的分块
js
1.如何减少HTTP请求，提高性能
1）CSS Scriptes（CSS精灵图）：每个图片的加载都会发送一个HTTP请求，把全网站的图标都放在一个图像文件中，用CSS的 background-iamge和background-position属性来定位像是其中的一小部分。
2）js和css文件都只存在一份：合并脚本和css文件，可以减少HTTP请求。
2.面向对象
面向对象中：对象下的变量叫属性，对象下的函数叫方法
js的封装：js只有私有和公有两个封装方式
js的继承：不是通过关键字extends，而是通过对象和原型链的方式来完成继承的
js的多态：它本身无态，无态就是多态的一种体现
原型链：实例对象与原型之间的链接，叫做原型链
原型链的最外层：object.prototype
原型：改写对象下的属性或者方法，让相同的属性或者方法在内存中只存在一份，好处就是可以提高性能
3.对作用域的理解：作用域链的作用就是保证执行环境里有权访问变量和函数是有序的，作用域链的变量只能向上访问，变量访问到window对象就终止，作用域链向下访问变量是不被允许的。
4.Ajax请求过程
1）创建一个XMLHTTPRequest对象，也就是创建一个异步调用对象
2）创建一个新的HTTP请求，同时指定该请求的方式，URL及验证信息
3）设置相应HTTP请求状态变化函数
4）发送HTTP请求
5）获取异步调用返回的数据
6）使用js和DOM来实现局部刷新
5.js跨域请求的方式
1）通过jsonp跨域
2）通过修改window.domain来跨子域
3）用PHP来请求数据，ajax请求PHP中的数据（数据代理）
6.前端性能优化的方式
1）减少DOM操作（DOM操作会重新渲染DOM树）
2）部署前，图片压缩，代码压缩
3）优化js代码，减少冗余代码
4）减少HTTP请求
7.常见的HTTP状态码
200：请求成功
400：发送了一个错误的请求
404：请求失败，未找到请求的资源
500：服务器遇到一个错误，使其无法为请求提供服务
8.js中常见的数据类型：String、Number、Boolean、null、undefined
9.js闭包：js在函数内部可以读取全局变量，在函数外部无法读取局部变量
10.事件委托：捕获、目标、冒泡（IE9不支持冒泡，解决办法就是为父元素添加事件监听，减少DOM的重排和重绘）
11.如何获取对象，对象元素
document.getElementById('id')document.getElementsByTagName('a')
12.Ajax请求数据时，get和post的区别
get：将获取的数据存放在url中，保密性不好，存储的数据有限，并且需要encodeURLComponent编码
post：将数据存放在natwork中，保密性好，可以存放大量数据，但是需要send（）方法
13.Ajax优点：（1）通过异步刷新，提升用户体验
（2）优化了浏览器和服务器之间的传输，减少了不必要的数据往返，减少宽带占用
（3）减少了大用户量下的服务器负载
（4）实现动态不刷新
Ajax缺点：（1）暴露了与服务器交互细节
（2）不容易调试
14.添加、移除、移动、复制、创建和查找节点
（1）创建新节点
document.createElement（‘标签名称’） // 创建一个具体元素
（2）添加、移除、替换、插入
appendChild() removeChild() replaceChild() insertBefore()
（3）查找
getElementsByTagName（） // 通过标签名称
getElementById（） // 通过元素Id，唯一属性
getElementsByName（） // 通过元素的Name属性值
15.js中的内置对象：
数据封装类对象：object、Array、Boolean、number、string
其他对象：function、arguments、match、date
16.this对象的理解：
（1）this总是指向函数的直接调用者
（2）如果有new关键字，this指向new出来的对象
（3）在事件中，this指向触发这个事件的对象，在IE中attachEvent中this总是指向window
17.数组去重
var arr = [1,4,7,1,4,7,2,5,8];
var arr2 = [];
for(var i=0;i
var arr = [1,[2,3,4],5,[6,7],8];
var arr2 = [];
for(var i=0;i移动端
1.移动端的默认样式：
默认字体设置：helvetica
清除点击的阴影：-webkit-tap-highlight-color
消除按钮圆角：-webkit-appearance （想要彻底的删除加上：border-radius:0）
禁止文字的缩放：-webkit-text-size-adjust:100%
选中文字设置：-webkit-user-select:none（不可以选中文字，有兼容性问题）
2..IOS10下设置meta禁止用户缩放是不可行的，可以用阻止PC事件document.addEventListenter（‘touchstart’，function（ev）{ev.preventDefault（）}）解决