（1） 声明位于文档中的最前面，处于 标签之前。奉告浏览器的解析器，用什么文档类型 规范来解析这个文档。
（2）严格模式的排版和 JS 运作模式是 以该浏览器支持的最高标准运行。
（3）在殽杂模式中，页面以宽松的向后兼容的办法显示。仿照老式浏览器的行为以防止站点无法事情。
（4）DOCTYPE不存在或格式禁绝确会导致文档以殽杂模式呈现。
2、行内元素有哪些？块级元素有哪些？
（1）CSS规范规定，每个元素都有display属性，确定该元素的类型，每个元素都有默认的display值， 比如div默认display属性值为“block”，成为“块级”元素； span默认display属性值为“inline”，是“行内”元素。
（2）行内元素有：a b span img input select strong（强调的语气） 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
3、link 和@import 的差异是？
（1）link属于XHTML标签，而@import是CSS供应的;
（2）页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;
（3）import只在IE5以上才能识别，而link是XHTML标签，无兼容问题;
（4）link办法的样式的权重 高于@import的权重.
4、浏览器的内核分别是什么?
IE浏览器的内核Trident、Mozilla的Gecko、Chrome的Blink（WebKit的分支）、Opera内核原为Presto，现为Blink；
5、HTML5有哪些新特性？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，紧张是关于图像，位置，存储，多任务等功能的增加。
绘画 canvas 用于媒介回放的 video 和 audio 元素 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除 语意化更好的内容元素，比如 article、footer、header、nav、section 表单控件，calendar、date、time、email、url、search 新的技能webworker, websockt, Geolocation
6、对语义化如何理解？
用精确的标签做精确的事情！
HTML语义化便是让页面的内容构造化，便于对浏览器、搜索引擎解析；在没有样式CCS情形下也以一种文档格式显示，并且是随意马虎阅读的。搜索引擎的爬虫依赖于标记来确定高下文和各个关键字的权重，利于 SEO。使阅读源代码的人对网站更随意马虎将网站分块，便于阅读掩护理解。
7、HTML5的离线储存有几种办法？
localStorage长期存储数据，浏览器关闭后数据不丢失；sessionStorage 数据在浏览器关闭后自动删除。
8、iframe有那些缺陷？
iframe会壅塞主页面的Onload事宜；
iframe和主页面共享连接池，而浏览器对相同域的连接有限定，以是会影响页面的并行加载。利用iframe之前须要考虑这两个缺陷。如果须要利用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
9、请描述一下 cookies，sessionStorage 和 localStorage 的差异？
cookie在浏览器和做事器间来回通报。 sessionStorage和localStorage不会，sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；
10、CSS 选择符有哪些？哪些属性可以继续？优先级算法如何打算？ CSS3新增伪类有那些？
1.id选择器（ # myid） 2.类选择器（.myclassname）
3.标签选择器（div, h1, p） 4.相邻选择器（h1 + p）
5.子选择器（ul < li） 6.后代选择器（li a）
7.通配符选择器（ ） 8.属性选择器（a[rel = "external"]）
可继续的样式： font-size font-family color, UL LI DL DD DT;
不可继续的样式：border padding margin width height ;
优先级就近原则，同权重情形下样式定义最近者为准;
载入样式以末了载入的定位为准;
优先级为:
!important > id > class > tag important 比 内联优先级高
11、CSS3新增伪类举例：
p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的末了元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled :disabled 掌握表单控件的禁用态。
:checked单选框或复选框当选中。
12、如何居中div？如何居中一个浮动元素？
给div设置一个宽度，然后添加margin:0 auto属性
div{ width:200px; margin:0 auto; } 居中一个浮动元素
确定容器的宽高 宽500 高 300 底层 设置层的外边距 .div { Width:500px ; height:300px;//高度可以不设 Margin: -150px 0 0 -250px; position:relative;相对定位 background-color:pink;//方便看效果 left:50%; top:50%;}
列出display的值，解释他们的浸染。position的值， relative和absolute定位原点是？
1.block 象块类型元素一样显示。 none 缺省值。象行内元素类型一样显示。 inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。 list-item 象块类型元素一样显示，并添加样式列表标记。
2. absolute 天生绝对定位的元素，相对付 static 定位以外的第一个父元素进行定位。
fixed （老IE不支持） 天生绝对定位的元素，相对付浏览器窗口进行定位。
relative 天生相对定位的元素，相对付其正常位置进行定位。
static 默认值。没有定位，元素涌如今正常的流中 （忽略 top, bottom, left, right z-index 声明）。
inherit 规定从父元素继续 position 属性的值。
13、为什么要初始化CSS样式？
由于浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化每每会涌现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情形下初始化。最大略的初始化方法便是： {padding: 0; margin: 0;} （不建议）淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }body, button, input, select, textarea { font:12px/1.5tahoma, arial, /5b8b/4f53; }h1, h2, h3, h4, h5, h6{ font-size:100%; }address, cite, dfn, em, var { font-style:normal; }code, kbd, pre, samp { font-family:couriernew, courier, monospace; }small{ font-size:12px; }ul, ol { list-style:none; }a { text-decoration:none; }a:hover { text-decoration:underline; }sup { vertical-align:text-top; }sub{ vertical-align:text-bottom; }legend { color:#000; }fieldset, img { border:0; }button, input, select, textarea { font-size:100%; }table { border-collapse:collapse; border-spacing:0; }
14、css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：/权重为1/div{}/权重为10/.class1{}/权重为100/#id1{}/权重为100+1=101/#id1 div{}/权重为10+1=11/.class1 div{}/权重为10+10+1=21/.class1 .class2 div{} 如果权重相同，则末了定义的样式会起浸染，但是该当避免这种情形涌现
15、CSS3有哪些新特性？
CSS3实现圆角（border-radius:8px），阴影（box-shadow:10px）， 对笔墨加殊效（text-shadow、），线性渐变（gradient），旋转（transform） transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜 增加了更多的CSS选择器 多背景 rgba
16、先容一下CSS的盒子模型？
（1）有两种， IE 盒子模型、标准 W3C 盒子模型；IE的content部分包含了 border 和 pading;
（2）盒模型： 内容(content)、添补(padding)、边界(margin)、 边框(border).
17.对WEB标准以及W3C的理解与认识？
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、利用外链css和js脚本、构造行为表现的分离、文件下载与页面速率更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，随意马虎掩护、改版方便，不须要变动页面内容、供应打印版本而不须要复制内容、提高网站易用性;
18.XHTML和HTML有什么差异？
HTML是一种基本的WEB网页设计措辞，XHTML是一个基于XML的置标语言最紧张的不同：
XHTML 元素必须被精确地嵌套。
XHTML 元素必须被关闭。标署名必须用小写字母。
XHTML 文档必须拥有根元素。
19.Doctype? 严格模式与殽杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档利用那种规范(HTML/XHTML)一样平常为 严格 过度 基于框架的html文档
加入XMl声明可触发，解析办法变动为IE5.5 拥有IE5.5的bug
20.行内元素有哪些?块级元素有哪些?CSS的盒模型?
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
21.CSS引入的办法有哪些? link和@import的差异是?
内联 内嵌 外链 导入
差异 ：同时加载前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持利用javascript改变样式，后者不可
22.CSS选择符有哪些?哪些属性可以继续?优先级算法如何打算?内联和important哪个优先级高?
标签选择符 类选择符 id选择符
继续不如指定 Id>class>标签选择
后者优先级高
23.前端页面有哪三层构成，分别是什么?浸染是什么?
构造层 HTML 表示层 CSS 行为层 js
24.CSS的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
25.你做的页面在哪些浏览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
26.写出几种IE6 BUG的办理方法
双边距BUG float引起的 利用display3像素问题 利用float引起的 利用dislpay:inline -3px超链接hover 点击后失落效 利用精确的书写顺序 link visited hover activeIe z-index问题 给父级添加position:relativePng 透明 利用js代码 改Min-height 最小高度 !Important 办理’select 在ie6下遮盖 利用iframe嵌套为什么没有办法定义1px旁边的宽度容器(IE6默认的行高造成的，利用over:hidden,zoom:0.08 line-height:1px)ie 6 不支持!important27.img标签上title与alt属性的差异是什么?
Alt 当图片不显示是 用笔墨代表。
Title 为该属性供应信息
28.描述css reset的浸染和用场。
Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一
29.阐明css sprites，如何利用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻做事器对图片的要求数量
30.浏览器标准模式和怪异模式之间的差异是什么?
盒子模型 渲染模式的不同
利用 window.top.document.compatMode 可显示为什么模式
31.你如何对网站的文件和资源进行优化?期待的办理方案包括：
文件合并
文件最小化/文件压缩
利用CDN托管
缓存的利用
32.什么是语义化的HTML?
直不雅观的认识标签 对付搜索引擎的抓取有好处
33.打消浮动的几种办法，各自的优缺陷
1.利用空标签打消浮动 clear:both(理论上能打消任何标签，增加无意义的标签)2.利用overflow:auto(空标签元素打消浮动而不得不增加无意代码的弊端,,利用zoom:1用于兼容IE)3.利用afert伪元素打消浮动(用于非IE浏览器)
34.javascript的typeof返回哪些数据类型
Object number function boolean underfind35.例举3种逼迫类型转换和2种隐式类型转换?
逼迫（parseInt,parseFloat,number）
隐式（== – ===）36.split() join() 的差异
前者是切割成数组的形式，后者是将数组转换成字符串37.数组方法pop() push() unshift() shift()
Push()尾部添加 pop()尾部删除
Unshift()头部添加 shift()头部删除
39.IE和DOM事宜流的差异
1.实行顺序不一样、
2.参数不一样
3.事宜加不加on
4.this指向问题
40.IE和标准下有哪些兼容性的写法
Var target = ev.srcElement||ev.target41.ajax要求的时候get 和post办法的差异
一个在url后面 一个放在虚拟载体里面
有大小限定
安全问题
运用不同 一个是论坛等只须要要求的，一个是类似修正密码的42.call和apply的差异
Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)43.ajax要求时，如何阐明json数据
利用eval parse 鉴于安全性考虑 利用parse更靠谱44.闭包是什么，有什么特性，对页面有什么影响
闭包便是能够读取其他函数内部变量的函数。46.添加 删除 更换 插入到某个节点的方法
obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild47.阐明jsonp的事理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新要求数据操作
48.javascript确当地工具，内置工具和宿主工具
本地工具为array obj regexp等可以new实例化
内置工具为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等50.”==”和“===”的不同
前者会自动转换类型
后者不会51.javascript的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
54.CSS定位办法有哪些?position属性的值有哪些?他们之间的差异是什么?在CSS中关于定位的内容是：position:relative | absolute | static | fixedstatic 没有特殊的设定，遵照基本的定位规定，不能通过z-index进行层次分级。
relative 不分开文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级。
absolute 分开文档流，通过 top,bottom,left,right 定位。选其最近的父级定位元素，当父级 position 为 static 时，absolute元素将以body坐标原点进行定位，可以通过z-index进行层次分级。
fixed 固定定位，这里他所固定的工具是可视窗口而并非是body或是父级元素。可通过z-index进行层次分级。55.函数的几种定义方法？
function a(){},var a = function(){}56.工具的定义方法？
a = new Object(), a = {}57.类的定义方法（prototype）（继续）
Var a = function(){}a.prototype = {}new a();58.this 关键字的指向
obj.foo() == obj //方法调用模式,this指向objfoo() == window; //函数调用模式,this指向windownew obj.foo() == obj //布局器调用模式, this指向新建立工具
foo.call(obj) == obj;//APPLY调用模式,this指向obj59.异步ajax的优缺陷都有什么？
优点：
相对付同步ajax：不会造成UI卡去世，用户体验好。
相对付刷新页面，省流量
缺陷：
退却撤退按钮无效；
多个要求同时触发时，由于回调韶光不愿定，会造成混乱，避免这种混乱须要繁芜的判断机制。
搜索引擎不友好
数据安全60、先容js的基本数据类型。
number,string,boolean,object,undefined
61、Javascript如何实现继续？
通过原型和布局器
62、如何创建一个工具? （画出此工具的内存图）
function Person(name, age) { this.name = name; this.age = age; this.sing = function() { alert(this.name) } }
63、谈谈This工具的理解。
this是js的一个关键字，随着函数利用场合不同，this的值会发生变革。但是有一个总原则，那便是this指的是调用函数的那个工具。this一样平常情形下：是全局工具Global。 作为方法调用，那么this便是指这个工具
64、事宜是什么？IE与火狐的事宜机制有什么差异？ 如何阻挡冒泡？
（1） 我们在网页中的某个操作（有的操为难刁难应多个事宜）。例如：当我们点击一个按钮就会产生一个事宜。是可以被 JavaScript 侦测到的行为。
（2） 事宜处理机制：IE是事宜冒泡、火狐是 事宜捕获；
（3） ev.stopPropagation();
65、如何判断一个工具是否属于某个类？
利用instanceof （待完善） if(a instanceof Person){ alert('yes'); }
66、Javascript中，有一个函数，实行时工具查找时，永久不会去查找原型，这个函数是？
hasOwnProperty
67、对JSON 的理解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交流格式。它是基于JavaScript的一个子集。数据格式大略, 易于读写, 占用带宽小{'age':'12', 'name':'back'}
68、简述一下src与href的差异
href 是指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，用于超链接。
src是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在要求src资源时会将其指向的资源下载并运用到文档内，例如js脚本，img图片和frame等元素。当浏览器解析到该元素时，会停息其他资源的下载和处理，直到将该资源加载、编译、实行完毕，图片和框架等元素也如此，类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。
69、简述同步和异步的差异
同步是壅塞模式，异步是非壅塞模式。
同步便是指一个进程在实行某个要求的时候，若该要求须要一段韶光才能返复书息，那么这个进程将会一贯等待下去，直到收到返复书息才连续实行下去；
异步是指进程不须要一贯等下去，而是连续实行下面的操作，不管其他进程的状态。当有返回时系统会关照进程进行处理，这样可以提高实行的效率。
70、px和em的差异
px和em都是长度单位，差异是，px的值是固定的，指定是多少便是多少，打算比较随意马虎。em的值不是固定的，并且em会继续父级元素的字体大小。
浏览器的默认字体高都是16px。以是未经调度的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em
71、什么叫优雅降级和渐进增强？
渐进增强 progressive enhancement：
针对低版本浏览器进行构建页面，担保最基本的功能，然后再针对高等浏览器进行效果、交互等改进和追加功能达到更好的用户体验。
优雅降级 graceful degradation：
一开始就构建完全的功能，然后再针对低版本浏览器进行兼容。
差异：
a. 优雅降级是从繁芜的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常根本的，能够起浸染的版本开始，并不断扩充，以适应未来环境的须要
c. 降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时担保其根基处于安全地带
72、浏览器的内核分别是什么?
IE: trident内核
Firefox：gecko内核
Safari：webkit内核
Opera：以前是presto内核，Opera现已改用Google Chrome的Blink内核
Chrome：Blink(基于webkit，Google与Opera Software共同开拓)
73、如何肃清一个数组里面重复的元素？
var arr1 =[1,2,2,2,3,3,3,4,5,6],arr2 = [];for(var i = 0,len = arr1.length; i< len; i++){if(arr2.indexOf(arr1[i]) < 0){arr2.push(arr1[i]);}}document.write(arr2); // 1,2,3,4,5,6
74、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么分外的行为，但仍可以对真正数组遍历方法来遍历它们。范例的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList工具都属于伪数组。可以利用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array工具。
function log(){
var args = Array.prototype.slice.call(arguments);
//为了利用unshift数组方法，将argument转化为真正的数组
args.unshift('(app)');
console.log.apply(console, args);
};
75、Javascript中callee和caller的浸染？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被实行的function函数，也便是所指定的function工具的正文。
76、请描述一下cookies，sessionStorage和localStorage的差异
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化确当地存储，仅仅是会话级别的存储。而localStorage用于持久化确当地存储，除非主动删除数据，否则数据是永久不会过期的。
web storage和cookie的差异
Web Storage的观点和cookie相似，差异是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你要求一个新的页面的时候Cookie都会被发送过去，这样无形中摧残浪费蹂躏了带宽，其余cookie还须要指定浸染域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie须要前端开拓者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的浸染是与做事器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
77、手写数组快速排序
关于快排算法的详细解释，可以参考阮一峰老师的文章快速排序
“快速排序”的思想很大略，全体排序过程只须要三步：
（1）在数据集之中，选择一个元素作为”基准”（pivot）。
（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。
（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
78、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。
var str = "aaaabbbccccddfgh";
var obj = {};
for(var i=0;istr.length;i++){
var v = str.charAt(i);
if(obj[v] & obj[v].value == v){
obj[v].count = ++ obj[v].count;
}else{
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
}
}
for(key in obj){
document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1
}
79、一次完全的HTTP事务是若何的一个过程？
基本流程：
a. 域名解析
b. 发起TCP的3次握手
c. 建立TCP连接后发起http要求
d. 做事器端相应http要求，浏览器得到html代码
e. 浏览器解析html代码，并要求html代码中的资源
f. 浏览器对页面进行渲染呈现给用户
80、对前端工程师这个职位你是怎么样理解的？
a. 前端是最贴近用户的程序员，前真个能力便是能让产品从 90分进化到 100 分，乃至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px；
c. 与团队成员，UI设计，产品经理的沟通；
d. 做好的页面构造，页面重构和用户体验；
e. 处理hack，兼容、写出幽美的代码格式；
f. 针对做事器的优化、拥抱最新前端技能。
