淘宝网前端开发面试题
第一部分：HTML & CSS面试题
1. Doctype? 严格模式不混杂模式-如何触发这两种模式，区分它们有何意义?
答：DOCTYPE就是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
HTML 和PUBLIC都有，没什么变化
第三部分就是DTD包
第四部分就是DTD包URL
ps: 三种DTD模式：Strict(严格版本)、Transitional（过渡版本） 以及 Frameset（基于框架）
严格模式和混杂模式：
标准模式和混杂模式（quirks mode）。在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
2. 行内元素有哪些？块级元素有哪些？CSS的盒模型？
答：行内元素与块级元素的区别：行内非替换元素设定width、height无效，宽度可以通过设定padding和margin拉宽，高度可以通过设定line-height定位行内框的高度。
常用行内元素：a img input textarea strong code
常用块级元素：div ul h123456 table form center p
盒模型是CSS的核心知识点之一，它指定元素如何显示以及如何相互交互。页面上的每个元素都被看成一个矩形框，这个框由元素的内容、内边距、边框和外边距组成。如下图所示：
内边距出现在内容区域的周围。如果在元素上添加背景，那么背景应用于元素的内容和内边距组成的区域。因此可以用内边距在内容周围创建一个隔离带，使内容不与背景混合在一起。添加边框会在内边距区域外边增加一条线。这些线可以有不同的样式和宽度，如实线、虚线、点画线。在边框外边的是外边距，外边距是透明的，一般使用它控制元素之间的间隔。
3. CSS引入的方式有哪些? link和@import的区别是?
答： 三种：1.<head></head>中的<link>方法 2.@import方法 3.行间加载
关于第二种方法例子：<head> <style type="text/css">@import url(http://www.dreamdu.com/style.css);</style></head>
区别：差别1：老祖宗的差别。link属于XHTML标签，而@import完全是CSS提供的一种方式。
link标签除了可以加载CSS外，还可以做很多其它的事情，比如定义RSS，定义rel连接属性等，@import就只能加载CSS了。
差别2：加载顺序的差别。当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的 CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式（就 是闪烁），网速慢的时候还挺明显（梦之都加载CSS的方式就是使用@import，我一边下载一边浏览梦之都网页时，就会出现上述问题）。
差别3：兼容性的差别。由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题。
差别4：使用dom控制样式时的差别。当使用javascript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的。
4. CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？
答：区分概念：内联样式：就是行间样式； 外联样式：就是link中写的； important：一种修饰符；p { font-style: italic ! important }
CSS选择符：类选择器(.) 、 标签名选择器(div)、 ID选择器(#) 、 后代选择器（派生选择器）(#ID li)、 群组选择器(*)
可以继承： 类选择器 、 标签名选择器、 后代选择器（派生选择器）、群组选择器。 除了ID的不能其他都能。
优先级算法：
标签内直接定义（内联）：1000
ID选择器：100
类选择器 ：10
标签名选择器：1
当然是important最高了，要不然加它干嘛。
5. 前端页面有哪三层构成，分别是什么？作用是什么？
答：结构层：主要指DOM节点，HTML/XHTML
样式层：主要是指页面渲染；CSS
脚本层：主要指页面动画效果；JS/AS
6. css的基本语句构成是？
答：选择符{属性：值}
7. 你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么?经常遇到的浏览器的兼容性有哪些？怎么会出现？解决方法是什么？
答：IEFFCHROMEsafariopera就够
Trident：Windows 下的 IE 浏览器使用的内核代号。除 IE 外，众多的 IE Shell（如 Maxthon ）都使用这个内核。
Gecko：Mozilla Firefox 浏览器使用的内核代号。
Presto：Opera 浏览器使用的内核代号，这是目前公认网页浏览速度最快的浏览器内核。
KHTML/WebCore： Konqueror/Safari 浏览器使用的内核代号。
经常遇到的浏览器兼容问题：
1.在有的浏览器中，默认字体大小为12px,所以在设字体大小的时候，最小设为12px，如果在做的过程中，发现字体小于12，可直接作为图片使用
2.a标签对里不能嵌套a标签对
3.若给a标签内的内容样式加上样式，需要设置display:block;（在IE中如果设置宽高会自动变成块，在FF中则不会），但如果设置了float属性，就不需要设置display:block。
4.ul，ol在FF默认情况下，有list-style-type样式和padding值，dl在IE和FF默认情况下，有padding值，所以应该事先声明ul,li,ol,dl,dd,dd{margin:0;padding:0}。
5.作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应
6.关于手形光标. cursor: pointer. 而hand 只适用于 IE.
7.css布局中的居中问题:在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“margin-right: auto;margin-left: auto; ”需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义margin-right: auto;margin-left: auto; 就可以了。
8.浮动ie产生的双倍距离#box{ float:left; 100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离，这时需要设置display:inline; //使浮动忽略
9.透明度：IE:filter:alpha(opacity=100) 非IE：opacity：1
10.XMLhttpRequest :IE6需要用ActiveXObject("Microsoft.XMLHTTP")
11.IE行间自定义属性有效，非IE无效。
12.待续。。。好好想想
8. 如何居中一个浮动元素?
答：啥叫浮动元素：加了float属性的元素。
如果想对浮动元素居中，需要控制该浮动元素的left，并且该浮动元素需要设置为相对定位或绝对定位。
9. 有没有关注HTML5和CSS3?如有请简单说一些您对它们的了解情况！
答：这个就需要因人而异了。
10. 如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？
答：将CSS文件与js文件分为三层：分别为base（基础层） common（普通层） application（应用层）三层，同时将图片优化压缩，将小图标用CSS SPRITE 技术合并。
11. 你对前端界面工程师这个职位是怎么样理解的？它的前景会怎么样？
答：因人而异喽。
第二部分：Javascript部分
1.js是什么，js和html 的开发如何结合？
答：js是一门解释型的脚本编程语言，主要应用于web。通过DOM把html分析为节点来进行相应的结合开发。
2. 怎样添加、移除、移动、复制、创建和查找节点？
答：appendChild来添加节点，cloneNode复制节点，removeChild删除节点，createElement创建元素，getElementById、getElementsByTagName、getElementsByName查找节点。
3. 怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别？
答：可以在行间写，也可以在JS中.onclick，还有绑定事件。
IE的事件模型：支持事件冒泡，不支持事件捕获。ele.attachEvent("onclick", doSomething2); 同时attachEvent 的this指向window
DOM事件模型：ele.addEventListener('click',doSomething2,true) 第三个参数：true=捕获 false=冒泡 addEventListener的this指向当前元素。
PS:事件冒泡：先子集后父级， 事件捕获：先父级后子集。
4.面向对象编程:b怎么继承a？
答： 首先看面相对象实现的方式：
1.传统json对象：只需要深度克隆父类即可
2.构造函数模式：需要 father.call(son); 的方式继承
3.组合模式：需要先call 再for in prototype
4.原型模式： for in prototype
5. 看看下面alert的结果是什么？
view sourceprint?1.function b(x, y, a) { .arguments[2] = 10; .alert(a); } b(1, 2, 3);
如果凼数体改成下面，结果又会是什么？
a = 10;
alert(arguments[2]);
答：（1）10 （2）10 没那么复杂，左右都是传值，改了就改了
6. 请编写一个JavaScript凼数 parseQueryString，它的用途是把URL参数解析为一个对象
答：思路：就是把url字符串中的 get传值的数据给摘出来。比如key是什么呀，value是什么呀。
参考答案：
function parseQueryString(url) { var pos; var obj = {}; if (pos = url.indexOf("?") != -1) { var urlstring = url.substring(pos + 1, url.lenght - 1); var urlArr = urlstring.split("&"); var keyValue = []; for (var i = 0; i < urlArr.lenght; i++) { keyValue = urlArr[i].split("="); obj[keyValue[0]] = keyValue[1]; } } return obj; } var objUrl = parseQueryString(url);
7.ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
答： ajax就是异步刷新技术。
交互模型：比如说 搜索框自动补全 等等特效
同步和异步的区别：同步：一件事从开头到结尾整个进程都等着线程按次序一个个的完成。异步：这个进程中，如果前面的线程没完事儿，后面的每个线程都做自己的事，不用等着它。
跨域：首先声明，跨域用纯JS脚本解决是不可能的。跨域方法的精髓就是用ajax请求一个包含服务器语言的页面，用服务器语言去获取跨域所请求信息，然后返回给请求数据页。
8.什么是闭包？下面这个ul，如何点击每一列的时候alert其index?
<ul id=”test”> <li>这是第一条</li><li>这是第二条</li><li>这是第三条</li> </ul>
答：思路：就是用循环一个个的加onclick事件呗，再给它们自定义个index的属性，用来输出。
function a() { var ul = document.getElementById("test"); var li = ul.getElementsByTagName("li"); for (var i = 0; i < li.length; i++) { (function (_i) { li[_i].onclick = function () { alert(_i); } })(i); } }
闭包就是子函数调用父函数中的参数。
剩下的三个题就是自己开放性回答了，略过不表。