1、html5为什么只需要写?
答：html5不是基于sgml（标准通用标记语言），不需要对dtd文件进行引用，但是需要doctype来规范浏览器的行为，
否则浏览器将开启怪异模式，而html4.01基于sgml，需要引入dtd，才能告知浏览器文档使用的文档类型
2、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？
行内元素有：a b span img input select strong（强调的语气）
块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
知名的空元素：
鲜为人知的是：
这段代码意思是等到整个文档加载完后，再加载外部文件”defer.js”。
使用此段代码的步骤：
1）.复制上面代码
2）.粘贴代码到HTML的标签前 (靠近HTML文件底部)
3）.修改”defer.js”为你的外部JS文件名
4）.确保你文件路径是正确的。例如：如果你仅输入”defer.js”，那么”defer.js”文件一定与HTML文件在同一文件夹下。
注意：这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件或其他东西)。这些需等到页面加载后再执行的JavaScript代码，应放在一个外部文件，然后再引进来。
30、同步和异步的区别？
同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去；异步是指进程不需要一直等下去，而是继续执行下面的操作，不管其他进程的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
举个浏览器例子：普通B/S模式（同步）AJAX技术（异步）
同步：提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理（这是浏览器仍然可以作其他事情）->处理完毕
再举个生活的例子：大家联系的时候如果使用手机通话，那么只能跟一个人联系，过程中做不了其他任何操作，如果使用短信或者聊天的方式，就可以同时跟很多人聊天，别人收到信息后会回复，在回复之前还可以跟另外的人进行聊天。
31、document.write和innerHTML的区别？
1.document.write是直接写入到页面的内容流，如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数，会导致页面被重写。
2.innerHTML则是DOM页面元素的一个属性，代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容，则需要修改document.documentElement.innerElement。
3.两者都可动态包含外部资源如JavaScript文件
通过document.write插入元素会自动执行其中的脚本；
大多数浏览器中，通过innerHTML插入元素并不会执行其中的脚本
innerHTML很多情况下都优于document.write，其原因在于其允许更精确的控制要刷新页面的那一个部分。
32、.call()和.apply()的含义和区别？
1、call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的，因为它们的作用一样，只是使用方式不同。
2、语法：foo.call(this, arg1,arg2,arg3) == foo.apply(this, arguments) == this.foo(arg1, arg2, arg3);
3、相同点：两个方法产生的作用是完全一样的。
4、不同点：方法传递的参数不同，单个单数传入，另一个可以以数组方式传入
33、JQ和JQUI有啥区别？
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是”write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery UI 是建立在 jQuery JavaScript 库上的一组用户界面交互、特效、小部件及主题。
34、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器的前进，后退时正确响应。给出你的技术实现方案？
用cookie或者localStorage来记录应用的状态即可，刷新页面时读取一下这个状态，然后发送相应ajax请求来改变页面即可
HTML5里引用了新的API，就是history.pushState和history.replaceState，就是通过这个接口做到无刷新改变页面URL的
虽然ajax可以无刷新改变页面内容，但无法改变页面URL
其次为了更好的可访问性，内容发生改变后，改变URL的hash。但是hash的方式不能很好的处理浏览器的前进、后退等问题
有的浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
再有，ajax的使用对搜索引擎很不友好，往往蜘蛛爬到的区域是空的
为了解决传统ajax带来的问题，HTML5里引入了新的API，即：history.pushState, history.replaceState
可以通过pushState和replaceState接口操作浏览器历史，并且改变当前页面的URL。
pushState是将指定的URL添加到浏览器历史里，replaceState是将指定的URL替换当前的URL。
如何调用
var state = { title: title, url: options.url, otherkey: othervalue};window.history.pushState(state, document.title, url);
state对象除了要title和url之外，也可以添加其他的数据，比如：还想将一些发送ajax的配置给保存起来。
replaceState和pushState是相似的，不需要多做解释。
如何响应浏览器的前进、后退操作
window对象上提供了onpopstate事件，上面传递的state对象会成为event的子对象，这样就可以拿到存储的title和URL了。
window.addEventListener(‘popstate’, function(e){ if (history.state){ var state = e.state; //do something(state.url, state.title); }}, false);
这样就可以结合ajax和pushState完美的进行无刷新浏览了。
35、js的数据类型都有哪些？
字符串、数字、布尔、数组、对象、Null、Undefined
36、已知ID的input输入框，希望获取这个输入框的输入值，怎么做？(不使用第三方框架)
document.getElementById(id).value;
37、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
document.getElementsByTagName(‘input’);
遍历循环
38、设置一个已知ID的div和html内容为xxx，字体颜色设置为黑色？(不使用第三方框架)
var div = document.getElementById(id);
div.innerHTML = ”;
div.style.color = ”;
39、当一个dom节点被点击时，我们需要能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：”
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
那么问题来了，Javascript的事件流模型都有什么？
“事件冒泡”：事件开始由最具体的元素接受，然后逐级向上传播
“事件捕捉”：事件由最不具体的节点先接收，然后逐级向下，一直到最具体的
“DOM事件流”：三个阶段：事件捕捉，目标阶段，事件冒泡
40、什么是Ajax和JSON，他们的优缺点？
Ajax是异步JavaScript和XML，用于在Web页面中实现异步数据交互。
优点：
可以使得页面不重载全部内容的情况下加载局部内容，降低数据传输量
避免用户不断刷新或者跳转页面，提高用户体验
缺点：
对搜索引擎不友好（
要实现ajax下的前后退功能成本较大
可能造成请求数的增加
跨域问题限制
JSON是一种轻量级的数据交换格式，ECMA的一个子集
优点：轻量级、易于人的阅读和编写，便于机器（JavaScript）解析，支持复合数据类型（数组、对象、字符串、数字）
41、请看下列代码输出什么？解释原因？
var a;
alert(typeof a); //undefined
alert(b); //报错
解释：Undefined是一个只有一个值的数据类型，这个值就是”undefined”，
在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。
注意未申明的变量和声明了未赋值的是不一样的。
ar a = null;
alert(typeof a); //object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回”object”
42、js的typeof返回哪些数据类型？
有如下6种返回值：
1）number；
2）string；
3）boolean；
4）object
5）function
6）undefined;
43、split() join()的区别？
join() 方法用于把数组中的所有元素放入一个字符串。
元素是通过指定的分隔符进行分隔的。
指定分隔符方法join(“#”);其中#可以是任意
与之相反的是split()方法：用于把一个字符串分割成字符串数组.
44、数组方法pop() push() unshift() shift()?
push和pop方法，这两个方法只会对数组从尾部进行压入或弹出，而且是在原数组进行操作，任何的改动都是会影响到操作的数组。push(args)可以每次压入多个元素，并返回更新后的数组长度。pop()函数每次只会弹出最后一个结尾的元素，并返回弹出的元素，如果是对空组数调用pop()则返回undefined。 如果参数是数组则是将整个数组当做一个元素压入到原来的数组当中。并不会产生类似concat合并数组时产生的”拆分现象”
unshift和shift这两个方法都是通过对数组的头部进行的操作，其他基本跟push和pop类似
shift:从集合中把第一个元素删除，并返回这个元素的值。
unshift: 在集合开头添加一个或更多元素，并返回新的长度
push:在集合中添加元素，并返回新的长度
pop:从集合中把最后一个元素删除，并返回这个元素的值
45、ajax请求时，如何解释json数据？
1.$.JSON(url,params,fun);
2.$.ajax({}); dataType:’json’
都可以使用$each();进行遍历
$.each(object,function(index,item){
});
46、js的本地对象，内置对象和宿主对象？
本地对象：
Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError官方定义好了的对象
内置对象： Global 和 Math，内置对象是本地对象的一种
宿主对象：所有的BOM和DOM对象都是宿主对象，是那些官方未定义，你自己构建的对象加上DOM和BOM对象组成的
47、列举所了解的前端框架并简述？
以下是常用的前端基础框架：
以下是常见的前端构建框架：
以下是场检的JS/CSS模块化开发的框架：
48、对web标准以及w3c的理解与认识？
（1）web标准规范要求，书写标签必须闭合、标签小写、不乱嵌套，可提高搜索机器人对网页内容的搜索几率。— SEO
（2）建议使用外链css和js脚本，从而达到结构与行为、结构与表现的分离，提高页面的渲染速度，能更快地显示页面的内容。
（3）样式与标签的分离，更合理的语义化标签，使内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件， 从而降低维护成本、改版更方便
（4）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性
遵循w3c制定的web标准，能够使用户浏览者更方便的阅读，使网页开发者之间更好的交流。
49、xhtml和html有什么区别？
XHTML是HTML 4.01和XML1.0的杂交，XHTML1.0是基于HTML4.01的
HTML是一种基于标准通用标记语言（SGML）的应用，而XHTML则基于可扩展标记语言（XML），HTML和XHTML其实是平行发展的两个标准。本质上说，XHTML是一个过渡技术，结合了部分XML的强大功能及大多数HTML的简单特性。建立XHTML的目的就是实现HTML向XML的过渡
1、XHTML要求正确嵌套
2、XHTML所有元素必须关闭
3、XHTML区分大小写
4、XHTML属性值要加引号
5、XHTML用id属性代替name属性
6、属性值不能简写
50、行内元素有哪些？块级元素有哪些？css和盒子模型？
盒子模型：内容、填充（padding）、边框（border）、外边界（margin）
box-sizing:border-box; box-sizing:content-box;
51、css选择器有哪些？哪些属性可以继承？优先级算法如何计算？内联和import哪个级别更高？
可继承的：font-size font-family color
不可继承的：border padding margin background-color width height
优先级：!important > [ id > class > tag ] important 比 内联优先级高
52、前端页面有哪三层构成，分别是什么？作用是什么？
结构层、表示层、行为层
结构层（structural layer）
由 HTML 或 XHTML之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：”这是一个文本段。”
表示层（presentation layer）
由 CSS 负责创建。 CSS对”如何显示有关内容”的问题做出了回答。
行为层（behaviorlayer）
负责回答”内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM主宰的领域
53、你如何对网站的文件和资源进行优化？期待的解决方法包括？
A、文件合并，减少http请求，合并JavaScript和CSS文件、CSS Sprites、图像映射 （Image Map）和使用Data URI来编码图片
B、文件最小化/文件压缩，减少文件下载的体积；常用的工具是YUI Compressor
C、使用 CDN 托管，尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定
D、缓存的使用（多个域名来提供缓存）
E、GZIP 压缩你的 JS 和 CSS 文件
54、看下列代码？输出什么？解释原因？
var a = null;
alert(typeof a);
答案：输出为object, JS类型值是存在32 BIT 单元里,32位有1-3位表示TYPE TAG,其它位表示真实值
而表示object的标记位正好是低三位都是0
000: object. The data is a reference to an object.
而js 里的Null 是机器码NULL空指针, (0x00 is most platforms).所以空指针引用 加上 对象标记还是0,最终体现的类型还是object..
这也就是为什么Number(null)===0吧…
The history of “typeof null”
2. 曾经有提案 typeof null === ‘null’.但提案被拒绝
harmony:typeof_null
55、看代码给答案？并进行解释？
var a = new Object();
a.value=1;
b = a;
b.value=2;
alert(a.value);
56、var numberArray = [3,6,2,4,1,5];
1) 实现对该数组的倒排，输出[5,1,4,2,6,3]
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3
numberArray.sort(function(a,b){ //6,5,4,3,2,1
return b-a;
})
57、你能描述一下渐进增强和优雅降级之间的不同吗?
如果提到了特性检测，可以加分。
检测浏览器，渐进增强就是让牛b的浏览器的效果更好，优雅降级就是让2b的浏览器在功能ok的情况下效果一般。
58、线程与进程的区别？
一个程序至少有一个进程,一个进程至少有一个线程.
线程的划分尺度小于进程，使得多线程程序的并发性高。
另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。
59、请解释一下什么是”语义化的 HTML”？
语义化的好处：
1：去掉或样式丢失的时候能让页面呈现清晰的结构：
html本身是没有表现的，我们看到例如
的HTML结构的优点，但是浏览器都有有默认样式，默认样式的目的也是为了更好的表达html的语义，可以说浏览器的默认样式和语义化的HTML结构是不可分割的。
2.屏幕阅读器（如果访客有视障）会完全根据你的标记来”读”你的网页.
3.PDA、手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对CSS的支持较弱）.
4.搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重.
5.你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记, 而只注重语义标记.
6.便于团队开发和维护
语义化的HTML就是：标题用h1-h6，文字段落用p，列表用ul li，大致如此
60、为什么利用多个域名来提供网站资源会更有效？
浏览器同一时间可以从一个域名下载多少资源？你的浏览器能同时保持对一个域名的多少连接？
三个最主流的原因:
1. CDN缓存更方便
2. 突破浏览器并发限制 (你随便挑一个 G家的 url: https://lh4.googleusercontent.com/- si4dh2myPWk/T81YkSi__AI/AAAAAAAAQ5o/LlwbBRpp58Q/w497-h373/IMG_20120603_163233.jpg, 把前面的 lh4换成 lh3,lh6 啥的，都照样能够访问，像地图之类的需要大量并发下载图片的站点，这个非常重要。)
3. Cookieless, 节省带宽，尤其是上行带宽 一般比下行要慢。。。
还有另外两个非常规原因:
4. 对于UGC的内容和主站隔离，防止不必要的安全问题( 上传js窃取主站cookie之类的) 。
正是这个原因要求用户内容的域名必须不是自己主站的子域名，而是一个完全独立的第三方域名。
5. 数据做了划分，甚至切到了不同的物理集群，通过子域名来分流比较省事. ^_^ 这个可能被用的不多。
PS: 关于Cookie的问题，带宽是次要的，安全隔离才是主要的。
关于多域名，也不是越多越好，虽然服务器端可以做泛解释，浏览器做dns解释也是耗时间的，而且太多域名，如果要走 https的话，还有要多买证书和部署的问题，^_^。
61、请说出三种减少页面加载时间的方法。（加载时间指感知的时间或者实际加载时间）
1.优化图片
2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）
3.优化CSS（压缩合并css，如margin-top,margin-left…)
4.网址后加斜杠（如www.campr.com/目录，会判断这个”目录是什么文件类型，或者是目录。）
5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。
当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）
6.减少http请求（合并文件，合并图片）。
62、如果你参与到一个项目中，发现他们使用 Tab 来缩进代码，但是你喜欢空格，你会怎么做？
1.建议这个项目使用像 EditorConfig (http://editorconfig.org/) 之类的规范
2.为了保持一致性，接受项目原有的风格
3.直接使用 VIM 的 retab 命令
63、请写一个简单的幻灯效果页面
如果不使用JS来完成，可以加分。（如：纯CSS实现的幻灯片效果）
可以采用CSS3的单选按钮radio来实现图片的切换
64、你都使用哪些工具来测试代码的性能？
Profiler, JSPerf（http://jsperf.com/nexttick-vs-setzerotimeout-vs-settimeout）, Dromaeo
65、如果今年你打算熟练掌握一项新技术，那会是什么？
nodejs，html5，css3，less
66、请谈一下你对网页标准和标准制定机构重要性的理解？
(google)w3c存在的意义就是让浏览器兼容性问题尽量小，首先是他们对浏览器开发者的约束，然后是对开发者的约束。
67、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？
FOUC – Flash Of Unstyled Content 文档样式闪烁
而引用CSS文件的@import就是造成这个问题的罪魁祸首。IE会先加载整个HTML文档的DOM，然后再去导入外部的CSS文件，因此，在页面DOM加载完成到CSS导入完成中间会有一段时间页面上的内容是没有样式的，这段时间的长短跟网速，电脑速度都有关系。
解决方法简单的出奇，只要在
之间加入一个或者元素就可以了。
68、doctype（文档类型）的作用是什么？你知道多少种文档类型？
此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。
该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。
XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。
Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks
（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。
69、浏览器标准模式和怪异模式之间的区别是什么？
W3C标准推出以后，浏览器都开始采纳新标准，但存在一个问题就是如何保证旧的网页还能继续浏览，在标准出来以前，很多页面都是根据旧的渲染方法编写的，如果用的标准来渲染，将导致页面显示异常。为保持浏览器渲染的兼容性，使以前的页面能够正常浏览，浏览器都保留了旧的渲染方法（如：微软的IE）。这样浏览器渲染上就产生了Quircks mode和Standars mode，两种渲染方法共存在一个浏览器上。
IE盒子模型和标准W3C盒子模型：ie的width包括：padding\border。 标准的width不包括：padding\border
在js中如何判断当前浏览器正在以何种方式解析？
document对象有个属性compatMode ,它有两个值：
BackCompat 对应quirks mode
CSS1Compat 对应strict mode
70、使用 XHTML 的局限有哪些？
xhtml要求严格，必须有head、body每个dom必须要闭合。
如果页面使用’application/xhtml+xml’会有什么问题吗？
一些老的浏览器并不兼容。
十六、如果网页内容需要支持多语言，你会怎么做？
编码UTF-8，空间域名需要支持多浏览地址。
在设计和开发多语言网站时，有哪些问题你必须要考虑？
1、应用字符集的选择 2、语言书写习惯&导航结构 3、数据库驱动型网站
71、data-属性的作用是什么？
data-为前端开发者提供自定义的属性，这些属性集可以通过对象的dataset属性获取，不支持该属性的浏览器可以通过 getAttribute方法获取
div.dataset.commentNum; // 10
需要注意的是，data-之后的以连字符分割的多个单词组成的属性，获取的时候使用驼峰风格。
并不是所有的浏览器都支持.dataset属性，测试的浏览器中只有Chrome和Opera支持。
72、如果把 HTML5 看作做一个开放平台，那它的构建模块有哪些？
73、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
sessionStorage 和 localStorage 是HTML5 Web Storage API 提供的，可以方便的在web请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。
sessionStorage、localStorage、cookie都是在浏览器端存储的数据，其中sessionStorage的概念很特别，引入了一个”浏览器窗口”的概念。sessionStorage是在同源的同窗口（或tab）中，始终存在的数据。也就是说只要这个浏览器窗口没有关闭，即使刷新页面或进入同源另一页面，数据仍然存在。关闭窗口后，sessionStorage即被销毁。同时”独立”打开的不同窗口，即使是同一页面，sessionStorage对象也是不同的
cookies会发送到服务器端。其余两个不会。
Microsoft指出InternetExplorer8增加cookie限制为每个域名50个，但IE7似乎也允许每个域名50个cookie。
Firefox每个域名cookie限制为50个。
Opera每个域名cookie限制为30个。
Firefox和Safari允许cookie多达4097个字节，包括名（name）、值（value）和等号。
Opera允许cookie多达4096个字节，包括：名（name）、值（value）和等号。
InternetExplorer允许cookie多达4095个字节，包括：名（name）、值（value）和等号。
74、描述下 “reset” CSS 文件的作用和使用它的好处。
因为浏览器的品种很多，每个浏览器的默认样式也是不同的，所以定义一个css reset可以使各浏览器的默认样式统一。
75、解释下浮动和它的工作原理？
浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留
76、列举不同的清除浮动的技巧，并指出它们各自适用的使用场景？
1.使用空标签清除浮动。
这种方法是在所有浮动标签后面添加一个空标签 定义css clear:both. 弊端就是增加了无意义标签。
2.使用overflow。
给包含浮动元素的父标签添加css属性 overflow:auto; zoom:1; zoom:1用于兼容IE6。
3.使用after伪对象清除浮动。
该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。一、该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素；二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为”.”，但我发现为空亦是可以的。
*{margin:0;padding:0;}
body{font:36px bold; color:#F00; text-align:center;}
#layout{background:#FF9;}
#layout:after{display:block;clear:both;content:””;visibility:hidden;height:0;}
#left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}
#right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}
77、解释下 CSS sprites，以及你要如何在页面或网站中使用它？
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”，”background- repeat”，”background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。
78、你最喜欢的图片替换方法是什么，你如何选择使用？
一般都是：alt，title，onerror
79、讨论CSS hacks，条件引用或者其他？
background-color:blue; 各个浏览器都认识，这里给firefox用；
background-color:red\9;\9所有的ie浏览器可识别；
background-color:yellow\0; \0 是留给ie8的
+background-color:pink; + ie7定了；
_background-color:orange; _专门留给神奇的ie6；
:root #test { background-color:purple\9; } :root是给ie9的，
@media all and (min-width:0px){ #test {background-color:black\0;} } 这个是老是跟ie抢着认\0的神奇的opera，必须加个\0,不然firefox，chrome，safari也都认识。。。
@media screen and (-webkit-min-device-pixel-ratio:0){ #test {background-color:gray;} }最后这个是浏览器新贵chrome和safari的。
80、如何为有功能限制的浏览器提供网页？你会使用哪些技术和处理方法？
百度 谷歌 SO SOGOU Bing
81、如何视觉隐藏网页内容，只让它们在屏幕阅读器中可用？
1.display:none;的缺陷
搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略
屏幕阅读器（是为视觉上有障碍的人设计的读取屏幕内容的程序）会忽略被隐藏的文字。
2. visibility: hidden ;的缺陷
这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间
3.overflow:hidden;一个比较合理的方法
.texthidden { display:block;/*统一转化为块级元素*/ overflow: hidden; width: 0; height: 0; }
就像上面的一段CSS所展示的方法，将宽度和高度设定为0，然后超过部分隐藏，就会弥补上述一、二方法中的缺陷，也达到了隐藏内容的目的。
82、你用过栅格系统吗？如果使用过，你最喜欢哪种？
比如：Bootstrap，流式栅格系统
83、你用过媒体查询，或针对移动端的布局/CSS 吗？
@media screen and (min-width: 400px) and (max-width: 700px) { … }
@media handheld and (min-width: 20em), screen and (min-width: 20em) {….}
媒体查询，就是响应式布局。
84、你熟悉 SVG 样式的书写吗？
85、如何优化网页的打印样式？
其中media指定的属性就是设备，显示器上就是screen，打印机则是print，电视是tv，投影仪是projection。
但打印样式表也应有些注意事项：
1、打印样式表中最好不要用背景图片，因为打印机不能打印CSS中的背景。如要显示图片，请使用html插入到页面中。
2、最好不要使用像素作为单位，因为打印样式表要打印出来的会是实物，所以建议使用pt和cm。
3、隐藏掉不必要的内容。（@print div{display:none;}）
4、打印样式表中最好少用浮动属性，因为它们会消失。
如果想要知道打印样式表的效果如何，直接在浏览器上选择打印预览就可以了。
86、在书写高效 CSS 时会有哪些问题需要考虑？
1.样式是：从右向左的解析一个选择器
2.ID最快，Universal最慢 有四种类型的key selector，解析速度由快到慢依次是：ID、class、tag和universal
3.不要tag-qualify （永远不要这样做 ul#main-navigation { } ID已经是唯一的，不需要Tag来标识，这样做会让选择器变慢。）
4.后代选择器最糟糕（换句话说，下面这个选择器是很低效的： html body ul li a { }）
5.想清楚你为什么这样写
6.CSS3的效率问题（CSS3选择器（比如 :nth-child）能够漂亮的定位我们想要的元素，又能保证我们的CSS整洁易读。但是这些神奇的选择器会浪费很多的浏览器资源。）
7.我们知道#ID速度是最快的，那么我们都用ID，是不是很快。但是我们不应该为了效率而牺牲可读性和可维护性
87、使用 CSS 预处理器的优缺点有哪些？
(SASS，Compass，Stylus，LESS)
描述下你曾经使用过的 CSS 预处理的优缺点
88、如果设计中使用了非标准的字体，你该如何去实现？
Webfonts (字体服务例如：Google Webfonts，Typekit 等等。)
89、解释下浏览器是如何判断元素是否匹配某个 CSS 选择器？
浏览器先产生一个元素集合，这个集合往往由最后一个部分的索引产生（如果没有索引就是所有元素的集合）。然后向上匹配，如果不符合上一个部分，就把元素从集合中删除，直到真个选择器都匹配完，还在集合中的元素就匹配这个选择器了。
举个例子，有选择器：
body.ready #wrapper > .lol233
先把所有 class 中有 lol233 的元素拿出来组成一个集合，然后上一层，对每一个集合中的元素，如果元素的 parent id 不为 #wrapper 则把元素从集合中删去。 再向上，从这个元素的父元素开始向上找，没有找到一个 tagName 为 body 且 class 中有 ready 的元素，就把原来的元素从集合中删去。
至此这个选择器匹配结束，所有还在集合中的元素满足。
大体就是这样，不过浏览器还会有一些奇怪的优化。
为什么从后往前匹配因为效率和文档流的解析方向。效率不必说，找元素的父亲和之前的兄弟比遍历所哟儿子快而且方便。关于文档流的解析方向，是因为现在的 CSS，一个元素只要确定了这个元素在文档流之前出现过的所有元素，就能确定他的匹配情况。应用在即使 html 没有载入完成，浏览器也能根据已经载入的这一部分信息完全确定出现过的元素的属性。
为什么是用集合主要也还是效率。基于 CSS Rule 数量远远小于元素数量的假设和索引的运用，遍历每一条 CSS Rule 通过集合筛选，比遍历每一个元素再遍历每一条 Rule 匹配要快得多。
90、解释一下你对盒模型的理解，以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
Margin(外边距) – 清除边框外的区域，外边距是透明的。
Border(边框) – 围绕在内边距和内容外的边框。
Padding(内边距) – 清除内容周围的区域，内边距是透明的。
Content(内容) – 盒子的内容，显示文本和图像。
91、解释下事件代理？
JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。
当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。
事件代理用到了两个在JavaSciprt事件中常被忽略的特性：事件冒泡以及目标元素。
function getEventTarget(e) {
e = e || window.event;
return e.target || e.srcElement;
}
92、解释下 JavaScript 中 this 是如何工作的？
this 永远指向函数运行时所在的对象，而不是函数被创建时所在的对象。匿名函数或不处于任何对象中的函数指向 window
1.如果是call，apply,with，指定的this是谁，就是谁
2.普通的函数调用，函数被谁调用，this就是谁
93、解释下原型继承的原理？
function getProperty(obj, prop) {
if (obj.hasOwnProperty(prop)) {
return obj[prop];
}else if (obj.__proto__ !== null) {
return getProperty(obj.__proto__, prop);
}else{
return undefined;
}
}
94、生成时间戳的两种方法？
JavaScript 获取当前时间戳：
第一种方法：
var timestamp = Date.parse(new Date());
结果：1280977330000
第二种方法：
var timestamp = (new Date()).valueOf();
结果：1280977330748
第三种方法：
var timestamp=new Date().getTime()；
结果：1280977330748
第一种：获取的时间戳是把毫秒改成000显示，
第二种和第三种是获取了当前毫秒的时间戳。
95、用原型链的方式给Array对象添加一个数组去重的方法？
Array.prototype.delRepeat=function() {
//tempRepeat保存重复数组项
var tempRepeat = [];
var obj = {}; //保存数组中每项，及其出现的次数
//遍历数组
for (var i = 0; i < this.length; i++) {
if (obj[this[i]]) {
if(obj[this[i]]==1) {
tempRepeat.push(this[i]);
obj[this[i]]++;
delete(this[i]);
}
}
else {
obj[this[i]] = 1;
}
}
this.filter(function(){ return true;});
return tempRepeat;
}
var a=[1,3,”eirkgm”,4,6,”eirkgm”,3,3,”eirkgm”,3,3,3,”eirkgm”,4];
alert(a.delRepeat());
96、定义一个方法，对所有传入的数字参数的第三位小数进行
四舍五入，使得返回值保留两位小数，不够的补0
97、定义一个方法，实现阶乘
function factorial(num) {
if(num <= 1) {
return 1;
} else {
return num * arguments.callee(num – 1);
}
}
98、定义一段代码，页面载入完成1分钟后非缓存模式刷新当前页面
window.οnlοad=function()
{
setTimeout(function(){
location.reload();//要执行刷新的代码
},60000);
}
99、document.getElementById(“HEAD”).οnclick=function(oEvent){
var A = oEvent.type.B = oEvent.target
}
A和B的值是什么？
100、阻止事件默认行为和事件冒泡的方法是什么
默认行为：event.preventDefault();
冒泡：event.stopPropregation();
event.cancelBubble();
101、把Object的实例化对象A、B、C合并 赋值给对象C
102、设置一个已知ID的DIV的html内容为xxx，字体颜色设置为黑色（不使用第三方框架）
103、当一个DOM节点被点击的时候，我们希望能够执行一个函数，应该怎么做？
直接在DOM里绑定事件：
在JS里通过onclick绑定：xxx.onclick = test
通过事件添加进行绑定：addEventListener(xxx, ‘click’, test)
104、什么是Ajax和JSON，他们的优缺点？
Ajax是一种异步提交数据的方法。
通常在html中，要想重新获取页面的数据。更新某一个地方的数据时。就必须得刷新整个页面，才能重新刷新数据。那么问题来了，当我们仅仅只需要更新某一个小地方的数据时。我们也来刷新整个页面的话，就显得有点麻烦了，于是Ajax就帮我们完成了这个功能，让我们单独开辟一条道路来进行获取数据，然后页面不需要刷新，用JS把AJAX请求的数据显示到该显示的地方。AJAX叫 无刷新获取技术
json 是一种数据的载体，可以把他想象成数组一样的东西，只不过，它有点牛，就是很多格式都可以自动支持。就差不多这样了。
105、看下列代码输出为何？解释原因？
var a;
alert(typeof a);//undefined
alert(b); //报错
106、看下列代码，输出什么？解释原因？
var a = null;
alert(typeof a); //object
107、看下列代码，输出什么？
1.var undefined;
2.undefined == null; //true
3.3==true; // true
4.2==true; //false
5.0==false; //true
6.0==”; //true
7.NaN == NaN; //false
8.[]==false; //true
9.[] == ![]; //true
108、看代码给答案？
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value); //2
109、输出今天的日期，以YYYY-MM-DD的方式，比如今天是2016年4月12日，则 输出2016-04-12
var d = new Date();
// 获取年，getFullYear()返回4位的数字 //今年：2016
var year = d.getFullYear();
// 获取月，月份比较特殊，0是1月，11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? ‘0’ + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? ‘0’ + day : day;
alert(year + ‘-‘ + month + ‘-‘ + day);
110、将字符串”{$id} ${name}
答案：”
111、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写出一个函数escapeHtml，将< , > & , ” 进行转义
String.prototype.escapeHTML = function
() {
return
this.replace(/&/g,’&’).replace(/>/g,’>’).replace(/
};
112、foo = foo || bar ,这行代码是什么意思？为什么要这样写？
foo和bar应该都是bool型变量，||是表示 或 的意思，只要foo或者bar有一个为真，那么这个表达式的值就为真，并把它赋给foo
113、看下列代码，将会输出什么?
var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
}
结果：undifined，2
var foo=1; 它的作用域是window；但是函数体内有同名局部变量，在执行函数时，第一句会寻找体内变量。
如果想调用该定义，需明确指定作用域，不指定则默认函数体本身。
console.log(window.foo); //1
114、用js实现随机选取10~100之间的10个数字，存入一个数组，并且排序
function sortNumber(a,b){
return a-b;//升序
//return b-a;//降序
}
//js实现随机选取10–100之间的10个数字，存入一个数组，并排序
var iArray =[];
function getRandom(iStart,iEnd){
var iChoice = iStart-iEnd+1;
return Math.abs(Math.floor(Math.random()*iChoice))+iStart;
}
for(var i=0;i<10;i++){
iArray.push(getRandom(10,100))
}
iArray.sort(sortNumber);
alert(iArray);
115、写一个function 清除字符串前后的空格（兼容所有浏览器）
第一种：循环替换
//供使用者调用
function trim(s){
return trimRight(trimLeft(s));
}
//去掉左边的空白
function trimLeft(s){
if(s == null) {
return “”;
}
var whitespace = new String(” \t\n\r”);
var str = new String(s);
if (whitespace.indexOf(str.charAt(0)) != -1) {
var j=0, i = str.length;
while (j < i && whitespace.indexOf(str.charAt(j)) != -1){
j++;
}
str = str.substring(j, i);
}
return str;
}
//去掉右边的空白 www.2cto.com
function trimRight(s){
if(s == null) return “”;
var whitespace = new String(” \t\n\r”);
var str = new String(s);
if (whitespace.indexOf(str.charAt(str.length-1)) != -1){
var i = str.length – 1;
while (i >= 0 && whitespace.indexOf(str.charAt(i)) != -1){
i–;
}
str = str.substring(0, i+1);
}
return str;
}
第二种：正则替换
//去左空格;
function ltrim(s){
return s.replace(/(^\s*)/g, “”);
}
//去右空格;
function rtrim(s){
return s.replace(/(\s*$)/g, “”);
}
//去左右空格;
function trim(s){
return s.replace(/(^\s*)|(\s*$)/g, “”);
}
第三种：使用jquery
$().trim();
jquery的内部实现为：
function trim(str){
return str.replace(/^(\s|\u00A0)+/,”).replace(/(\s|\u00A0)+$/,”);
}
第四种：使用motools
function trim(str){
return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, ”);
}
第五种：剪裁字符串方式
function trim(str){
str = str.replace(/^(\s|\u00A0)+/,”);
for(var i=str.length-1; i>=0; i–){
if(/\S/.test(str.charAt(i))){
str = str.substring(0, i+1);
break;
}
}
return str;
}
//———————————————————-
// 去掉字符串前后的空格
// 返回值：
// 去除空格后的字符串
//———————————————————-
function trim(param) {
if ((vRet = param) == ”) { return vRet; }
while (true) {
if (vRet.indexOf (‘ ‘) == 0) {
vRet = vRet.substring(1, parseInt(vRet.length));
} else if ((parseInt(vRet.length) != 0) && (vRet.lastIndexOf (‘ ‘) == parseInt(vRet.length) – 1)) {
vRet = vRet.substring(0, parseInt(vRet.length) – 1);
} else {
return vRet;
}
}
}