JS部分
Q:什么是闭包？
A:闭包是指有权访问另一个函数作用域中的变量的函数，创建闭包的常见方式，就是在一个函数内部创建另一个函数
(闭包就是能够读取其他函数内部变量的函数。)
Q:闭包的用途
A:可以读取函数内部的变量；让这些变量的值始终保持在内存中
Q:谈谈你对this的理解
A:this是js的一个关键字，随着函数使用场合不同,this的值会发生变化,但是又一个总原则，那就是this指的是调用函数的那个对象
Q:说说你对模块化的看法
A:模块化的优点 1.适合团队开发项目，比较好管理 2.利于代码复用 3.符合程序设计的理念 4.避免命名冲突
Q:事件委托是什么？
A:利用冒泡的原理，把事件加到父级上，触发执行效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<ul id="ul">
<li>aaaaaaaa</li>
<li>bbbbbbbb</li>
<li>cccccccc</li>
</ul>
<script>
window.onload = function(){
var oUl = document.getElementById("ul");
var aLi = oUl.getElementsByTagName("li");
/*
这里要用到事件源：event 对象，事件源，不管在哪个事件中，只要你操作的那个元素就是事件源。
ie：window.event.srcElement
标准下:event.target
nodeName:找到元素的标签名
*/
oUl.onmouseover = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "red";
}
}
oUl.onmouseout = function(ev){
var ev = ev || window.event;
var target = ev.target || ev.srcElement;
//alert(target.innerHTML);
if(target.nodeName.toLowerCase() == "li"){
target.style.background = "";
}
}
}
</script>
</body>
</html>
Q:JS中的typeof()返回哪些数据类型
A:object、null、string、number、underfind、function、boolean
Q：例举强制类型转换和隐式转换类型
A:强制(parseInt、parseFloat、number，Boolean，string) 隐式转换（== ===）
Q:split() join()的区别
A:split()是切割成数组的形式，后者是将数组转换成字符串
Q:数组方法pop() push() unshift() shift()
A:push()尾部添加 pop()尾部删除 unshift()头部添加 shift()头部删除
Q:IE和DOM事件流的区别
A:1.执行顺序不一样 2.参数不一样 3.事件加不加on 4.this指向问题
Q：IE和标准下有哪些兼容性的写法
A: var ev=ev||window.event;
document.documentElement.clientWidth || document.body.clientWidth
var target=ev.srcElement || ev.target;
Q:ajax请求的时候get和post方式的区别
A：一个在url后面 一个在虚拟载体里面 有大小限制 安全问题 应用不同，一个是论坛等只需要请求的，一个类似修改密码的
Q：call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
Q:ajax请求时，如何解释json数据
A:使用eval parse鉴于安全性考虑 使用parse靠谱
Q：如何阻止事件冒泡和默认事件
A:阻止事件冒泡 event.stopPropagation()和return false; 阻止默认事件e.preventDefault()
javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。
Q:添加 删除 替换 插入到某个节点的方法
A: //几种添加节点的方法
//$("p").append("<b>你好吗？</b>");//向p元素中追加《b》
//$("<b>你好吗？</b>").appendTo("p");//将《b》追加到p元素中
//$("p").prepend("<b>你好吗？</b>");//向p中前置《b》
//$("<b>你好吗？</b>").prependTo("p");//将《b》前置到p元素中
//$("p").after("<b>你好吗？</b>");//向p元素后插入《b》
//$("<b>你好吗？</b>").insertAfter("p");//将《b》插入到p元素后边
//$("p").before("<b>你好吗？</b>");//在p元素之前添加《b》
//$("<b>你好吗？</b>").insertBefore("p");//将《b》插入到p元素前面
//几种删除节点的方法
//var $li=$("ul li:eq(1)").remove();//删除ul节点中第2个元素节点
//$("ul").append($li);//把刚删除的元素节点从新添加到ul元素中去
//$("ul li").remove("li[title!=菠萝]");//将ul元素下title属性不等于"菠萝"的li元素删除
//$("ul li:eq(1)").empty();//清空ul节点下第2个li元素的内容
//复制节点
/* $("ul li").click(function(){
$(this).clone(true).appendTo("ul");//复制当前点击的节点，并将它追加到《ul》元素中，当添加参数时复制它的事件
});
*/
//替换节点
// $("p").replaceWith("<strong>你最不喜欢的水果是？</Strong>");
Q:==与===的区别
A:==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回flase
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
HTML面试题
Q:XHTML与HTML的区别
A:HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML元素必须被正确地嵌套
XHTML元素必须被关闭
标签名必须小写
XHTML文档必须拥有根元素
Q:前端页面由哪三层构成，分别是什么?作用是什么?
A:结构层HTML 表示层 CSS 行为层JS
Q:你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么?
A:IE(IE内核） 火狐(Gecko) 谷歌（webkit,Blink) opera(Presto) Safari(wbkit)
Q:什么是语义化的HTML?
A:直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
Q:Doctype作用？标准模式与兼容模式各有什么区别?
A:!DOCTYPE声明位于位于HTML文档中的第一行，处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。
标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
Q:HTML5 为什么只需要写 !DOCTYPE HTML？
A:HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；
而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。
Q:请描述一下cookies,sessionStorage和localStorage的区别?
A:cookie在浏览器和服务器间来回传递,sessionStorage和localStorage则不会
sessionStorage和localStorage的存储空间更大
sessionStorage和localStorage有更多丰富易用的接口
sessionStorage和localStorage有各自独立存储的空间
sessionStorage的数据在浏览器关闭后自动删除，而locakStorage长期存储数据，浏览器关闭后数据不丢失
Q:如何实现浏览器内多个标签页之间的通信?
A:调用sessionStorage,cookies等本地存储方式
-----------------------------------------------------------------------------CSS面试题------------------------------------------------------------------------------------------------
Q:简单说一下CSS元素的分类
A:块级元素：div,p,h1~h6,form,ul,li
行内元素:span,a,label,i,input,img,strong,em
Q:CSS隐藏元素的几种方法
A:opactiy:元素本身依然占据它自己的位置并对网页的布局起作用，它也将影响用户交互
visibility:与opacity完全不同的是它不会响应用户交互
display:none 元素完全不存在
positon:不会影响布局，能让元素保持可以操作
Q:CSS清除浮动的几种方法
A: 使用带clear属性的空元素
使用:after伪元素 .clear:after{ content: "20";display: block; clear: both;}
使用CSS的overflow属性
使用邻接元素处理
Q:CSS居中(包括水平居中和垂直居中)
A:内联元素居中方案
1.行内元素 设置text-align:center
2.Flex布局 设置display:flex;justify-content:center;
垂直居中设置
1.父元素高度确定的单行文本(内联元素) 设置line-height=height
2.父元素高度确定的多行文本(内联元素)
1）插入table，然后设置vertical-align:middle;
2)先设置display:table-cell 在设置vertical-align:middle;
块级元素居中方案
水平居中设置: 1.定宽度元素：设置左右margin:auto;
2.不定宽度块状元素 ：1）在元素外加入table标签,该元素写在td内，然后设置margin的值为auto
2) 给该元素设置display:inline方法
3) 给父级position:relative和left:50%,子元素设置position:relative和left:50%
垂直居中方案
1.使用position:absolute(fixed),设置left,top,margin-left,margin-top
2.使用positon:absolute(fixed),设置margin:auto
3.利用dislay:table-cell属性使内容垂直居中
4.使用css3的transform:translate(x,y)属性
Q: 写出IE6 BUG的解决办法
A:双边距BUG float引起 使用display;
3像素问题 使用float引起 使用display:inline -3px;
png透明 使用js代码改;
Min-height最小高度!important解决;
select在ie6下覆盖 使用iframe嵌套
为什么没有办法定义1px左右宽度的容器(ie6默认行高造成的,使用over:hidden,zoom:0.08;line-height:1px;
Q:页面导入样式时使用link和@import有什么区别?
A:link属于XHTML标签，除了加载CSS外，还能用于定义RSS，定义rel连接属性等作用;而@import是css提供的，只能用于加载CSS;
页面被加载时,link会被同时加载,而@import引用的css会等到页面被加载完在加载;
@import只能在IE5以上被识别，而link无兼容性问题
Q:CSS盒子模型
A:内容（content) 填充(padding) 边框(border) 外边距(margin)
Q:CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?css3新增的伪类有哪些
A:id选择器(#id) 类选择器(.class) 标签选择器(div,p) 相邻选择器(div+p) 子选择器(ul>li) 后代选择器(ul li) 通配符选择器(*) 属性选择器(input[type="text"]) 伪类选择器(a:hover li:nth-child)
可继承的样式:font-size font-family,color
优先级:!important>行内样式>id>class>标签
Q:CSS3有哪些新特性
A:CSS3实现圆角(border-radius:10px) 阴影（box-shadow text-shadow）
线性渐变(gradient) 旋转（transform:rotate(9deg) 缩放(transform:scale(0.5)) 位移(transform:translate(-5px)) 倾斜(transform:skew(-9deg,0deg)
增加了更多的CSS的选择器 多背景rgba
----------------------------------------------------------------------------------其他--------------------------------------------------------------------------------------------------
Q：你有哪些性能优化方法?
A:1）减少HTTP请求:CSS sprites(雪碧图)，js和css文件压缩合并，图片大小的控制，CDN托管,data缓存，图片服务器
2）前端模板js+数据,减少HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量，不用请求，减少请求次数
3）用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能
4）当需要设置的样式很多时设置className而不是直接操作style
5)少用全部变量、缓存DOM节点查找的结果,减少IO读取操作
6)图片预加载,将样式表放在顶部，脚本放在底部
Q:http的状态码有哪些？分别代表什么意思
A:100-199用于指定客户端相应的某些动作
200-299表示请求成功
300-399用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息
400-499用于支出客户端的错误。400 语义有误，当前请求无法被服务器理解 401当前请求需要用户验证 403服务器已经理解请求，但是拒绝执行 404页面不存在
500-599用于支持服务器错误 503 服务不可用