- 1. 怎么学习前端开发？求推荐学习路线？
http://www.zhihu.com/question/30180100
http://www.zhihu.com/question/22951927
学习网站：w3cschool的教程 或者 慕课网前端视频教程 ，Learn to code
书籍： HTML5+CSS3：
《HTML5高级程序设计》
《CSS权威指南》
《HTML之路：XHTML和CSS最佳实践指南》
JavaScript：《JavaScript 高级程序设计》
《面向对象的Javascript》（Object-Oriented JavaScript）
jQuery ：《锋利jQuery》
一些大牛博客
- 2. 前端相关面试题目
html 中常用的标签和相应属性知识点需要熟悉掌握
1）Doctype作用? 严格模式与混杂模式如何区分？它们有何意义
<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。
严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
2）xhtml和html有什么区别？
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3）CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外联 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
4）css中 的选择器有哪些？
常用的有元素选择器，类选择器，id选择器，属性选择器
高级： 后代选择器，子元素选择器，相邻兄弟选择器，伪类，伪元素
5）前端页面有哪三层构成，分别是什么?作用是什么?
结构层 Html ：由 HTML 或 XHTML 之类的标记语言搭建文档的结构，标签对网页内容的语义含义做出了描述
表示层 CSS ：处理网页内容的布局显示问题，设置文档的呈现效果
行为层 js：通过JavaScript 和Dom 对网页内容的事件做出响应，实现文档的行为。
6）常用的浏览器有哪些？它们的内核是什么？
IE（IE内核/Trident内核） 火狐（Gecko） 谷歌（webkit） opera(Presto), Safari(webkit)
7) 描述css reset的作用和用途。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
8) 清除浮动的几种方式，各自的优缺点（http://www.jb51.net/css/173023.html）
1.使用空标签清除浮动 clear:both（理论上能清除任何标签的浮动，但增加了无意义的标签）
2. 父级div定义 伪类:after 和 zoom （效果好，但难理解）
3．对父级设置适合的css（设置的高度固定不可变）
4.使用overflow：hidden（可以清除父级内使用float产生浮动，必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度 ，不能和position配合使用，因为超出的尺寸的会被隐藏）
9）什么是盒子模型？
在网页中，一个元素占有空间的大小由几个部分构成，其中包括元素的内容（content），元素的内边距（padding），元素的边框（border），元素的外边距（margin）四个部分。这四个部分占有的空间中，有的部分可以显示相应的内容，而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。
10）简述一下src与href的区别
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等元素也如此
11)常遇到的浏览器兼容问题有哪些？如何解决？（https://www.douban.com/group/topic/4629864/）
1.不同的浏览器的标签默认的内边距和外边距不同
解决方案：CSS里 *{margin:0;padding:0;}
2. 块属性标签float后，又有横行的margin情况下，在IE6显示margin比设置的大
解决方案：在float的标签样式控制中加入 display:inline;将其转化为行内属性
3.图片默认有间距 解决方案：使用float属性为img布局
4. 手形光标. cursor: pointer. 而hand 只适用于 IE
等等
12）div+css的布局较table布局有什么优点？
改版的时候更方便 只要改css文件。
页面加载速度更快、结构化清晰、页面显示简洁。
表现与结构相分离。
易于优化（seo）搜索引擎更友好，排名更容易靠前。
13）.a：img的alt与title有何异同？b：strong与em的异同？
答案：
a:
alt(alt text):为不能显示图像、窗体或applets的用户代理（UA），alt属性用来指定替换文字。替换文字的语言由lang属性指定。(在IE浏览器下会在没有title时把alt当成 tool tip显示)
title(tool tip):该属性为设置该属性的元素提供建议性的信息。
b:
strong:粗体强调标签，强调，表示内容的重要性
em:斜体强调标签，更强烈强调，表示内容的强调点
14)css 选择器的优先级
派生选择器<类选择器<id选择器
id 选择器的优先级低于内联样式
15）行内元素和块级元素的具体区别是什么？行内元素的padding和margin可设置吗？常见的块级元素和行内元素？
块级元素(block)特性：
总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变（也就是padding和margin的left和right是可以设置的），就是里面文字或图片的大小。
块级元素(block element)
div -最常用的块级元素 dl - 和dt dd搭配使用的块级元素
form - 交互表单 h1 - 大标题
hr - 水平分隔线 ol - 排序表单
p - 段落 ul - 非排序列表
内联元素(inline element)
a - 锚点 b - 粗体(不推荐) br - 换行
em - 强 i - 斜体 img - 图片
input - 输入框 label - 表格标签
select - 项目选择 small - 小字体文本
span - 常用内联容器，定义文本内区块 strike - 中划线
strong - 粗体强调 sub - 下标
sup - 上标 textarea - 多行文本输入框
tt - 电传文本 u - 下划线
16）浏览器还有默认的天生inline-block元素（拥有内在尺寸，可设置高宽，但不会自动换行），有哪些？
17）外边距重叠时的计算规则：
折叠结果遵循下列计算规则：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。
答案：<input> 、<img> 、<button> 、<texterea> 、<label>。
18）rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，
而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
19）.px和em的区别。
px和em都是长度单位，区别是，px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
20）你如何对网站的文件和资源进行优化？期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
21）css hack
<!--[if IE 6]--><![end if]-->
_marging \IE 6
+margin \IE 7
Marging:0 auto 9 所有Ie
Margin \IE 8
22）常见HTTP协议的状态消息都有哪些?
100：continue（继续）初始的请求已经接受，客户应当继续发送请求的其余部分
200：Ok 请求成功 get和post请求的请求应答文档跟在后面
304：not modified 自从上次请求后请求网页的内容未被修改过
400：错误请求，请求出现语法错误
401：未授权 用户试图未经授权访问受密码保护的页面
403：forbidden 资源不可用 服务器理解客户的请求但是拒绝处理
404：Not Found 无法找到指定位置的资源
408：request time out （请求超时）
500：服务器内部出错，无法完成请求
502：网关错误
503：服务器不可用，服务器由于维护或者负载过重未能应答
504：网关超时
505：http 版本不支持请求中使用的http 协议的版本
23）css样式是什么？
分别是内联样式（<a style="">）,内部样式(<style></style>),
外部样式（写在css文件中的样式），浏览器用户自定义样式，浏览器默认样式；
按照其来源优先级为内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
按照选择器优先级为id >class>元素选择器
如果有important,important优先级最高。
元素的最终样式是累加的结果，其中属性如果有冲突则以优先级高的为准
js:
1）ajax请求的方法有哪些？简要描述它们的区别？
Query对Ajax操作进行了封装，在jQuery中$.ajax()方法属于最底层的方法，
第2层是load(),$.get()和$.post()方法 第三层是$.getScript()和$.getJSON()
方法。
load（）方法是jquery中最为简单和常用的Ajax方法 能载入远程的HTML代码并插入DOM中 结构，它的回调函数无论成功或者失败都会被调用，$.get()方法和$.post()方法在response的状态为成功时 ，才能调用回调函数
2）.javascript的本地对象，内置对象和宿主对象
本地对象为array obj regexp等可以new实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
3）怎样添加、移除、移动、复制、创建和查找节点？
1．创建新节点
createDocumentFragment()//创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2．添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3.查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
4）JavaScript中的5种主要的数据类型？
Number、String、Object、Array、Boolean
5）sessionstorage，localstorage和cookie之间的区别
共同点：都是保存在浏览器端，且同源的。
区别：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下。存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。
6）如何获取字符串长度，截取字符串？
获取字符串长度：string.length
截取字符串：
substring(start,end)
开始和结束的位置，从零开始的索引，返回值：一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。
substr(start [, length ]) start 必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。length 可选。在返回的子字符串中应包括的字符个数。
7）body中的onload()函数和jQuery中的document.ready()有什么区别？
回答：onload()和document.ready()的区别有以下两点：
1、我们可以在页面中使用多个document.ready()，但只能使用一次onload()。
2、document.ready()函数在页面DOM元素加载完以后就会被调用，而onload()函数则要在所有的关联资源（包括图像、音频）加载完毕后才会调用
8）请使用jQuery将页面上的所有元素边框设置为2px宽的虚线？
回答：这正是jQuery选择器上场的时候了，代码如下：
<script language="javascript" type="text/javascript">
$("*").css("border", "2px dotted red");
</script>
9） 变量作用域与闭包：
a) 作用域：就是变量能够起作用的范围；
b) 局部变量：定义在一个函数里，只能在这个函数里用；
c) 全局变量： 不定义在任何一个函数里，可以在任何地方去用；
d) 闭包：是另一种作用域；子函数可以使用父函数的局部变量；
10）=== 与 ==区别
=== 是严格相等，不会进行类型转换，而 == 是不严格相等，会进行类型转换。有些js的书中，建议开发人员永远不要用 == 或者 != 。
但是jquery源码中，有用到“==”或者“!=”的情况 —— 判断 undefined 和 null 的时候。
11）检测obj是否为window对象（http://www.jb51.net/article/61640.htm）
复制代码 代码如下:
//null == window.null为true
function isWindow(obj){
return obj != null && obj == window.obj;
}
12）字符串拼接方法？
第一种方法 用连接符“+”把要连接的字符串连起来：
str="a";
str+="b";
第二种方法 将两个或多个字符串，并返回一个新的单字符串。
语法
string.concat(string2, string3[, ..., stringN]);
第三种方法
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join("."))
</script>
输出：
George.John.Thomas
13）js 函数的调用（http://www.cnblogs.com/mq0036/p/3934867.html）
S函数调用的四种方法：方法调用模式，函数调用模式，构造器调用模式，apply,call调用模式
方法调用模式：
先定义一个对象，然后在对象的属性中定义方法，通过myobject.property来执行方法，this即指当前的myobject
对象。
函数调用模式
定义一个函数，设置一个变量名保存函数，这时this指向到window对象。
构造器调用模式
定义一个函数对象，在对象中定义属性，在其原型对象中定义方法。在使用prototype的方法时，必须实例化该对象才能调用其方法。
apply,call调用模式
调用一个对象的一个方法，以另一个对象替换当前对象。
var myobject={};
var sum = function(a,b){
return a+b;
};
var sum2 = sum.call(myobject,10,30); //var sum2
= sum.apply(myobject,[10,30]);
alert(sum2);
14）对Js中this 的理解？（http://www.jb51.net/article/41656.htm）http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
1．纯粹的函数调用（this代表全局对象Global）
2. 作为对象方法的调用
15）什么是 AJAX ？同步和异步的区别？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
同步：脚本会停留并等待服务器发送回复然后再继续
异步：脚本允许页面继续其进程并处理可能的回复
16)使用ajax 请求时 为什么会出现跨域问题？如何处理？
因为js 同源策略的限制，同源策略是客户端脚本的重要安全度量标准，同源指的是同协 议，同域名，同端口号
1.通过修改document.domain和隐藏的IFrame来实现跨域请求。这种方案可能是最简单的一种跨域请求的方案，但是它同样是一种限制最大的方 案。首先，它只能实现在同一个顶级域名下的跨域请求；另外，当在一个页面中还包含有其它的IFrame时，可能还会产生安全性异常，拒绝访问。
2.通过请求当前域 的代理，由服务器 代理去访问另一个域的资源。XMLHttpRequest通过请求本域内的一个服务器资源 ，将要访问的目标资源提供给服务器，交由服务器 去代理访问目标资源。这种方案，可以实现完全的跨域访问，但是开发，请求过程的消费会比较大。
3. 通过HTML中可以请求跨域资源的标签引用来达到目的，比如Image,Script,LINK这些标签。在这些标签中，Script无疑是最合适的。在 请求每一个脚本资源时，浏览器都会去解析并运行脚本文件内定义的函数，或需要马上执行的JavaScript代码，我们可以通过服务器返回一段脚本或 JSON对象，在浏览器解析执行，从而达到跨域请求的目的。使用script标签来实现跨域请求，只能使用get方法请求服务器资源。
4. 通过jsonp JSONP就是在客户端将要用来处理请求结果的函数名作为参数传递给服务器端，然服务器端将请求结果数据作为参数包装在这个函数中 并返回给客户端执行
17) js 封装的理解？（http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html）
js 是基于对象的语言，但不是真正的面向对象的编程语言，因为js 的语法中没有类的概念，封装是指现实世界的一切事物都是对象，由属性和方法组成
js 实现封装的办法
- 1. 生成实例对象的原始模式，直接创建对象
- 2. 原始模式的改进，写一个函数，解决代码重复的问题
- 3. 构造函数模式，其实就是一个普通函数，但是内部使用了this变量。对构造函数使用new运算符，就能生成实例，并且this变量会绑定在实例对象上。
- 4. Prototype模式
Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。
这意味着，我们可以把那些不变的属性和方法，直接定义在prototype对象上。
18）js继承的两种形式 http://blog.csdn.net/unicode/article/details/5075606
对象冒充(call,apply)原型方式
类继承：在函数内部定义自身的属性的方法，子类继续时，用call或apply实现对象冒充，把类型定义的东西都复制过来，这样的继承子类与父类并没有多少关联，不互相影响，有利于保护自身的一些私有属性
<script type="text/javascript">
function A()
{
this.name='a';
}
function B()
{
}
B.prototype=new A();
var obj=new B();
alert(obj.name);
</script>
原型链：每个函数都有自己的原型（prototype）属性，这个属性其实是隐藏对象，通过对这个对象的操作，子类可以同样持有这个对象的引用，间隔实现继承，这个的好处是大大节省了空间，因为下面的子类不用重新去实例化父类定义的属性和方法，而直接引用原型链上的属性与方法
<script type="text/javascript">
function A()
{
this.name='a';
}
function B()
{
A.call(this);
}
var obj=new B();
alert(obj.name);
</script>