HTML部分
1 、Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
（ 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 ulol li dl dtdd h1 h2 h3 h4 ⋯ｐ
3、link 和@import 的区别是？
（ 1 ）link 属于XHTML 标签，而@import 是CSS 提供的;
（ 2 ）页面被加载的时， link 会同时被加载，而@import 引用的CSS 会等到
页面被加载完再加载;
（3 ）import 只在IE5 以上才能识别，而link 是XHTML 标签，无兼容问题;
（ 4 ）link 方式的样式的权重高于@import 的权重
浏览器的内核分别是什么?
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 各自独立的存储空间；
CSS 部分
1 、CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3 新增
伪类有那些？
id 选择器（ # myid ）
2. 类选择器（ .myclassname ）
3. 标签选择器（ div, h1, p ）
4. 相邻选择器（ h1 + p ）
5. 子选择器（ ul< li ） 6. 后代选择器（ li a ）
7. 通配符选择器（ * ） 8. 属性选择器（ a[rel = "external"] ）
9. 伪类选择器（ a: hover, li: nth - child ）
可继承的样式： font-size font-family color, UL LI DL DD DT;
不可继承的样式： border padding margin width height ;
优先级就近原则，同权重情况下样式定义最近者为准;载入样式以最后载入的定位为准;
优先级为:!important > id > class > tag important 比内联优先级高
2 、CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个元素的每个元素。
p:last-of-type 选择属于其父元素的最后元素的每个元素。
p:only-of-type 选择属于其父元素唯一的元素的每个元素。
p:only-child 选择属于其父元素的唯一子元素的每个元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。
:enabled :disabled 控制表单控件的禁用态。
:checked 单选框或复选框被选中。
3 、如何居中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 不支持） 生成绝对定位的元素，相对于浏览器窗口进行定位。是不同的，如果没对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; }
5 、absolute 的containing block 计算方式跟正常流有什么不同？
6 、position 跟display 、margin collapse 、overflow 、float 这些特性相互叠加后会怎么样？
7 、对BFC 规范的理解？
（ W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位, 以
及与其他元素的关系和相互作用。）
8 、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{} 如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
9 、解释下浮动和它的工作原理？清除浮动的技巧
10 、用过媒体查询，针对移动端的布局吗？
11 、使用CSS 预处理器吗？喜欢那个？
12 、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
13 、经常遇到的CSS 的兼容性有哪些？原因，解决方法是什么？
14 、介绍一下CSS 的盒子模型？
（ 1 ）有两种， IE 盒子模型、标准W3C 盒子模型； IE 的content 部分包
含了border 和pading;
（ 2 ）盒模型：内容(content) 、填充(padding) 、边界(margin) 、边框(border).
1. 对WEB 标准以及W3C 的理解与认识？
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css 和js 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
2.XHTML 和HTML 有什么区别？
HTML 是一种基本的WEB 网页设计语言， XHTML 是一个基于XML 的置标语言最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
3.Doctype? 严格模式与混杂模式- 如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范(HTML/XHTML) 一般为严格过度基于框架的html文档
加入XMl 声明可触发，解析方式更改为IE5.5 拥有IE5.5 的bug
4. 行内元素有哪些? 块级元素有哪些?CSS 的盒模型?
块级元素： div p h1 h2 h3 h4 form ul
行内元素: a b bri span input select
Css 盒模型: 内容， border ,margin ， padding
5.CSS 引入的方式有哪些? link 和@import 的区别是?
内联内嵌外链导入
区别：同时加载
前者无兼容性，后者CSS2.1 以下浏览器不支持
Link 支持使用javascript 改变样式，后者不可
6.CSS 选择符有哪些? 哪些属性可以继承?优先级算法如何计算? 内联和important 哪个优先级高?
标签选择符类选择符id 选择符
继承不如指定Id>class> 标签选择
后者优先级高
7. 前端页面有哪三层构成，分别是什么? 作用是什么?
结构层HTML 表示层CSS 行为层js
8.CSS 的基本语句构成是?
选择器{ 属性1: 值1; 属性2: 值2; ⋯⋯｝
9. 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie 内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
10. 写出几种IE6 BUG 的解决方法
1. 双边距BUG float 引起的使用display
2.3 像素问题使用float 引起的使用dislpay:inline -3px
3. 超链接hover 点击后失效使用正确的书写顺序link visited hover active
4.Ie z-index 问题给父级添加position:relative
5.Png 透明使用js 代码改
6.Min-height 最小高度!Important 解决’
7.select 在ie6 下遮盖使用iframe 嵌套
8. 为什么没有办法定义1px 左右的宽度容器(IE6 默认的行高造成的，使用
over:hidden,zoom:0.08 line-height:1px)
9.ie 6 不支持!important
11.img 标签上title 与alt 属性的区别是什么?
Alt 当图片不显示是用文字代表。
Title 为该属性提供信息
12. 描述css reset 的作用和用途。
Reset 重置浏览器的css 默认属性浏览器的品种不同，样式不同，然后重置，让他们统一
13. 解释css sprites ，如何使用。
Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
14. 浏览器标准模式和怪异模式之间的区别是什么?
盒子模型渲染模式的不同
使用window.top.document.compatMode 可显示为什么模式
15. 你如何对网站的文件和资源进行优化? 期待的解决方案包括：
文件合并
文件最小化/ 文件压缩
使用CDN 托管
缓存的使用
16. 什么是语义化的HTML?
直观的认识标签对于搜索引擎的抓取有好处
17. 清除浮动的几种方式，各自的优缺点
1. 使用空标签清除浮动clear:both( 理论上能清楚任何标签，增加无意义的标签)
2. 使用overflow:auto( 空标签元素清除浮动而不得不增加无意代码的弊端,使用zoom:1 用于兼容IE)
3. 是用afert 伪元素清除浮动(用于非IE 浏览器)
18.css hack
_marging \\IE 6
+margin \\IE 7
Marging:0 auto \9 所有Ie
Margin \0 \\IE 8
Javascript 部分
1.javascript 的typeof 返回哪些数据类型
Object number function booleanunderfind
2. 例举3 种强制类型转换和2 种隐式类型转换?
强制（ parseInt,parseFloat,number ）
隐式（ == – === ）
3.split() join() 的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4. 数组方法pop() push() unshift() shift()
Push() 尾部添加pop() 尾部删除
Unshift() 头部添加shift() 头部删除
5. 事件绑定和普通事件有什么区别
6.IE 和DOM 事件流的区别
1. 执行顺序不一样、
2. 参数不一样
3. 事件加不加on
4.this 指向问题
7.IE 和标准下有哪些兼容性的写法
Varev = ev || window.event
document.documentElement.clientWidth ||
document.body.clientWidth
Var target = ev.srcElement||ev.target
8.ajax 请求的时候get 和post 方式的区别
一个在url 后面一个放在虚拟载体里面有大小限制安全问题应用不同一个是论坛等只需要请求的，一个是类似修改密码的
9.call 和apply 的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
10.ajax 请求时，如何解释json 数据
使用eval parse 鉴于安全性考虑使用parse 更靠谱
11.b 继承a 的方法
12.JavaScript this 指针、闭包、作用域
13. 事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
14. 闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
15. 如何阻止事件冒泡和默认事件
canceBubble return false
16. 添加删除替换插入到某个接点的方法
obj.appendChidl()
obj.innersetBefore
obj.replaceChild
obj.removeChild
17. 解释jsonp 的原理，以及为什么不是真正的ajax
动态创建script 标签，回调函数
Ajax 是页面无刷新请求数据操作
18.javascript 的本地对象，内置对象和宿主对象
本地对象为array objregexp 等可以new 实例化
内置对象为gload Math 等不可以实例化的
宿主为浏览器自带的document,window 等
19.document load 和document ready 的区别
Document.onload 是在结构和样式加载完才执行js
Document.ready 原生种没有这个方法， jquery 中有$().ready(function)
20. ” ==” 和“ ===” 的不同
前者会自动转换类型
后者不会
21.javascript 的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
22. 编写一个数组去重的方法
function oSort(arr)
{
var result ={};
varnewArr=[];
for(vari=0;i<arr.length;i++)
{
if(!result[arr])
{
newArr.push(arr)
result[arr]=1
}
}
return newArr
}
</arr.length;i++)
1. 自我评价一下HTML/CSS/JS 的掌握情况
2. 简述HTML 经常使用的标签和作用。
Div/a/p/span/li/ul/ol/table/tr/td
3. 你认为最常遇到的兼容Bug 有哪些? 有哪些问题是你认为解决起来最麻烦的?
IE6 PNG
IE6 Fixed
4. 块级元素和行内元素都有哪些? 行内元素有哪些特点?
5. 介绍所知道的CSS hack 技巧( 如： _ ， * ， + ， \9 ， !important 之类)
6.CSS 定位方式有哪些?position 属性的值有哪些? 他们之间的区别是什么?
在CSS 中关于定位的内容是： position:relative | absolute | static | fixed
static 没有特别的设定，遵循基本的定位规定，不能通过z-index 进行
层次分级。
relative 不脱离文档流，参考自身静态位置通过top,bottom,left,right
定位，并且可以通过z-index 进行层次分级。
absolute 脱离文档流，通过top,bottom,left,right 定位。选53D6 其最近的父级定位元素，当父级position 为static 时， absolute 元素将以body
坐标原点进行定位，可以通过z-index 进行层次分级。
fixed 固定定位， 这里他所固定的对像是可视窗口而并非是body 或是父级元素。可通过z-index 进行层次分级。
7. 函数的几种定义方法？
function a(){},
var a = function(){}
8. 对象的定义方法？
a = new Object(), a = {}
9. 类的定义方法（ prototype ）（继承）
Var a = function(){}
a.prototype = {}
new a();
10.this 关键字的指向
obj.foo() == obj // 方法调用模式,this 指向obj
foo() == window; // 函数调用模式,this 指向window
new obj.foo() == obj // 构造器调用模式, this 指向新建立对象
foo.call(obj) == obj;//APPLY 调用模式,this 指向obj
11. 什么是闭包，及其作用是什么？
12. 事件绑定的几种方法，事件冒泡？
13.Ajax/json/json0070 ？
14. 异步ajax 的优缺点都有什么？
优点：
相对于同步ajax ：不会造成UI 卡死，用户体验好。
相对于刷新页面，省流量
缺点：
后退按钮无效；
多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱
需要复杂的判断机制。
搜索引擎不友好
数据安全
15. 常用JS 框架都有什么？是否使用过jQuery ，以及jQuery 的优点是什么？
16.JS 用了多久，介绍一下自己做过的JS 项目？
17. 开发调试工具和方法都有什么（编辑器、浏览器）
18. 类、函数、对象（代码表达）
19. 闭包（ setTimeout ）（产生两个首尾相连的计时器）（使用for 循环产生
10 个计时器） ||
20.Jquery Mobile 相关
21.HTML5/CSS3 的掌握情况
22. 是否听说过和理解webapp ？
23. 个人擅长的语言，优缺点都是什么？
24. 介绍一下曾经参与过的项目经验，合作开发、独立开发
25. 编程的重要知识？
26. 开发过程中遇到困难，如何解决？
27. 有没有个人/ 开源项目
28. 前端开发（ HTML/CSS/ ）
HTML
一、Doctype 作用? 严格模式与混杂模式如何区分？它们有何意义?
（ 1）、<!DOCTYPE> 声明位于文档中的最前面， 处于<html> 标签之前。告知浏览器的解析器， 用什么文档类型规
范来解析这个文档。
（ 2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
（ 3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（ 4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
二、行内元素有哪些？块级元素有哪些？ 空(void) 元素有那些？
（ 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）知名的空元素： <br><hr><img><input><link><meta>
鲜为人知的是： <area><base><col><command><embed><keygen><param><source><track><wbr>
三、link 和@import 的区别是？
（ 1） link 属于XHTML 标签，而@import 是CSS 提供的;
（ 2）页面被加载的时， link 会同时被加载，而@import 引用的CSS 会等到页面被加载完再加载;
（ 3） import 只在IE5 以上才能识别，而link 是XHTML 标签，无兼容问题;
（ 4） link 方式的样式的权重高于@import 的权重.
四、浏览器的内核分别是什么?
* IE 浏览器的内核Trident 、Mozilla 的Gecko 、Chrome 的Blink （WebKit 的分支）、Opera 内核原为Presto ，现
为Blink ；内属性。(_这个符号只有ie6 会识别)
渐进识别的方式，从总体中逐渐排除局部。
首先，巧妙的使用“ 9”这一标记，将IE 游览器从所有情况中分离出来。
接着，再次使用“ +”IE将8 和 IE7、IE6 分离开来，这样 IE8 已经独立识别。
css
.bb{
background-color:#f1ee18;/* 所有识别*/
.background-color:#00deff\9; /*IE6 、7、8 识别*/
+background-color:#a200ff;/*IE6 、7 识别*/
_background-color:#1e0bd1;/*IE6 识别*/
}
* IE 下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute() 获取自定义属性;Firefox 下,只能使
用getAttribute() 获取自定义属性. 解决方法:统一通过getAttribute() 获取自定义属性.
* IE 下,even 对象有x,y 属性,但是没有pageX,pageY 属性;
Firefox 下,event 对象有pageX,pageY 属性,但是没有x,y 属性.
* 解决方法：（条件注释）缺点是在IE 浏览器下可能会增加额外的HTTP 请求数。
* Chrome 中文界面下默认会将小于12px 的文本强制按照12px 显示, 可通过加入CSS 属性
-webkit-text-size-adjust: none; 解决.
超链接访问过后hover 样式就不出现了被点击访问过的超链接样式不在具有hover 和active 了解决方法是改变CSS
属性的排列顺序:L-V-H-A : a:link {} a:visited {} a:hover {} a:active {}
支持HTML5 新标签：
* IE8/IE7/IE6 支持通过document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持HTML5 新
标签，浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim 框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
八、如何区分： DOCTYPE 声明新增的结构元素功能元素，语义化的理解？
用正确的标签做正确的事情！
html 语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS 情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
九、HTML5 的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
十、(写)描述一段语义的html 代码吧。
（HTML5 中新增加的很多标签（如： <article> 、<nav> 、<header> 和<footer> 等）就是基于语义化设计原则）
< div id="header">
< h1> 标题< /h1>
< h2> 专注Web 前端技术< /h2>
< /div>
十一、iframe 有那些缺点？
*iframe 会阻塞主页面的Onload 事件；
*iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe 之前需要考虑这两个缺点。如果需要使用iframe ，最好是通过javascript
动态给iframe 添加src 属性值，这样可以可以绕开以上两个问题。
十二、请描述一下cookies ，sessionStorage 和localStorage 的区别？
cookie 在浏览器和服务器间来回传递。sessionStorage 和localStorage 不会
sessionStorage 和localStorage 的存储空间更大；
sessionStorage 和localStorage 有更多丰富易用的接口；
sessionStorage 和localStorage 各自独立的存储空间；
十三、如何实现浏览器内多个标签页之间的通信? (阿里)
调用localstorge 、cookies 等本地存储方式
十四、webSocket 如何兼容低浏览器？ (阿里)
Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基于multipart 编码发送XHR 、基于长轮询的XHR
CSS
一、介绍一下CSS的盒子模型？
（ 1）有两种， IE 盒子模型、标准W3C 盒子模型； IE 的content 部分包含了border 和pading;
（ 2）盒模型： 内容(content) 、填充(padding) 、边界(margin) 、边框(border).
二、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"] ）
9.伪类选择器（ a: hover, li: nth - child ）
* 可继承的样式： font-size font-family color, UL LI DL DD DT;
* 不可继承的样式： border padding margin width height ;
* 优先级就近原则，同权重情况下样式定义最近者为准;
* 载入样式以最后载入的定位为准
优先级为:
!important > id > class > tag
important 比内联优先级高
三、CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个<p> 元素的每个<p> 元素。
p:last-of-type 选择属于其父元素的最后<p> 元素的每个<p> 元素。
p:only-of-type 选择属于其父元素唯一的<p> 元素的每个<p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个<p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked 单选框或复选框被选中。
四、如何居中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 属性的值。
七、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
八、一个满屏品字布局如何设计?
九、经常遇到的CSS 的兼容性有哪些？原因，解决方法是什么？
十、为什么要初始化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; }
十一、absolute 的containing block 计算方式跟正常流有什么不同？
十二、position 跟display 、margin collapse 、overflow 、float 这些特性相互叠加后会
怎么样？
十三、对BFC 规范的理解？
（ W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。）
十四、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{}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
十五、解释下浮动和它的工作原理？清除浮动的技巧
十六、用过媒体查询，针对移动端的布局吗？
十七、使用CSS 预处理器吗？喜欢那个？
SASS
十八、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz ，即1 秒刷新60 次，所以理论上最小间隔为1/60 ＊1000ms ＝ 16.7ms
十九、display:inline-block 什么时候会显示间隙？ (携程)
移除空格、使用margin 负值、使用font-size:0 、letter-spacing 、word-spacing
JavaScript
一、JavaScript 原型，原型链? 有什么特点？
二、eval 是做什么的？
它的功能是把对应的字符串解析成JS 代码并运行；应该避免使用eval ，不安全，非常耗性能（ 2 次，一次解析成js 语句，一次执行）。
三、null ，undefined 的区别？
四、写一个通用的事件侦听器函数。
// event( 事件)工具集，来源： github.com/markyun
markyun.Event = {
// 页面加载完成后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE 方式来绑定事件
// 参数： 操作的元素,事件名称,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
// 事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
因为IE 不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 获取event 对象的引用，取到事件的所有信息，确保随时能使用event ；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
Node.js 的适用场景？
高并发、聊天、实时消息推送
六、介绍js 的基本数据类型。
number,string,boolean,object,undefined
七、Javascript 如何实现继承？
通过原型和构造器
八、["1", "2", "3"].map(parseInt) 答案是多少？
[1, NaN, NaN] 因为parseInt 需要两个参数(val, radix) ，其中radix 表示解析时用的基数。map 传了3 个
(element, index, array) ，对应的radix 不合法导致解析失败。
九、如何创建一个对象? （画出此对象的内存图）
function Person(name, age) {
this.name = name;
this.age = age;
this.sing = function() { alert(this.name) }
}
十、谈谈This 对象的理解。
this 是js 的一个关键字，随着函数使用场合不同， this 的值会发生变化。但是有一个总原则，那就是this 指的是调用
函数的那个对象。this 一般情况下：是全局对象Global 。作为方法调用，那么this 就是指这个对象
十一、事件是？ IE 与火狐的事件机制有什么区别？ 如何阻止冒泡？
1. 我们在网页中的某个操作（有的操作对应多个事件）。例如：当我们点击一个按钮就会产生一个事件。是可以被
JavaScript 侦测到的行为。
事件处理机制： IE 是事件冒泡、火狐是事件捕获；
ev.stopPropagation();
十二、什么是闭包（ closure ），为什么要用它？
执行say667() 后,say667() 闭包内部变量会存在,而闭包内部函数的内部变量不会存在.使得Javascript 的垃圾回收机制
GC 不会收回say667() 所占用的资源，因为say667() 的内部函数的执行需要依赖say667() 中的变量。这是对闭包作用
的非常直白的描述.
function say667() {
// Local variable that ends up within closure
var num = 666;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say667();
sayAlert()// 执行结果应该弹出的667
十三、"use strict"; 是什么意思? 使用它的好处和坏处分别是什么？
十四、如何判断一个对象是否属于某个类？
使用instanceof （待完善）
if(a instanceof Person){
alert('yes');
}
new 操作符具体干了什么呢?
1、创建一个空对象，并且this 变量引用该对象，同时还继承了该函数的原型。
2、属性和方法被加入到this 引用的对象中。
3、新创建的对象由this 所引用，并且最后隐式的返回this 。
var obj = {};
obj.__proto__ = Base.prototype;
Base.call(obj);
十六、Javascript 中，有一个函数， 执行时对象查找时， 永远不会去查找原型， 这个函数是？
hasOwnProperty
十七、JSON 的了解？
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript 的一个子集。数据格式简单, 易于读写, 占用带宽小{'age':'12', 'name':'back'}
十八、js 延迟加载的方式有哪些？
defer 和async 、动态创建DOM 方式（用得最多）、按需异步载入js
十九、ajax 是什么?
二十、同步和异步的区别?
二十一、如何解决跨域问题?
jsonp 、iframe 、window.name 、window.postMessage 、服务器上设置代理页面
二十二、模块化怎么做？立即执行函数,不暴露私有成员
var module1 = (function(){
var _count = 0;
var m1 = function(){
//...
};
var m2 = function(){
//...
};
return {
m1 : m1,
m2 : m2
};
})();
二十三、AMD （Modules/Asynchronous-Definition ）、CMD （Common Module
Definition ）规范区别？
AMD 是RequireJS 在推广过程中对模块定义的规范化产出。
CMD 是SeaJS 在推广过程中对模块定义的规范化产出。
对于依赖的模块， AMD 是提前执行， CMD 是延迟执行。不过RequireJS 从2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇as lazy as possible.
CMD 推崇依赖就近， AMD 推崇依赖前置
二十四、异步加载的方式有哪些？
(1) defer ，只支持IE
(2) async ：
(3) 创建script ，插入到DOM 中，加载完毕后callBack
二十五、documen.write 和innerHTML 的区别
document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分
二十六、.call() 和 .apply() 的区别？
例子中用add 来替换sub ， add.call(sub,3,1) == add(3,1) ，所以运行结果为： alert(4);
注意： js 中的函数其实是对象，函数名是对Function 对象的引用。
function add(a,b)
{
alert(a+b);
}
function sub(a,b)
{
alert(a-b);
}
add.call(sub,3,1);
二十七、Jquery 与jQuery UI 有啥区别？
*jQuery 是一个js 库，主要提供的功能是选择器，属性修改和事件绑定等等。
*jQuery UI 则是在jQuery 的基础上，利用jQuery 的扩展性，设计的插件。
提供了一些常用的界面元素，诸如对话框、拖动行为、改变大小行为等等
二十八、JQuery 的源码看过吗？能不能简单说一下它的实现原理？
二十九、jquery 中如何将数组转化为json 字符串，然后再转化回来？
jQuery 中没有提供这个功能，所以你需要先编写两个jQuery 的扩展：
$.fn.stringifyArray = function(array) {
return JSON.stringify(array)
}
$.fn.parseArray = function(array) {
return JSON.parse(array)
}
然后调用：
$("").stringifyArray(array)
三十、针对jQuery 的优化方法？
*基于Class 的选择性的性能相对于Id 选择器开销很大，因为需遍历所有DOM 元素。
*频繁操作的DOM ，先缓存起来再操作。用Jquery 的链式调用更好。
比如： var str=$("a").attr("href");
*for (var i = size; i < arr.length; i++) {}
for 循环每一次循环都查找了数组(arr) 的.length 属性， 在开始循环的时候设置一个变量来存储这个数字， 可以让循
环跑得更快：
for (var i = size, length = arr.length; i < length; i++) {}
三十一、JavaScript 中的作用域与变量声明提升？
三十二、如何编写高性能的Javascript ？
三十三、那些操作会造成内存泄漏？
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为0（没有其他对象引
用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）
三十四、JQuery 一个对象可以同时绑定多个事件，这是如何实现的？
三十五、如何判断当前脚本运行在浏览器还是node 环境中？（阿里）
通过判断Global 对象是否为window ，如果不为window ，当前脚本没有运行在浏览器中
三十六、对Node 的优点和缺点提出了自己的看法？
*（优点）因为Node 是基于事件驱动和无阻塞的，所以非常适合处理并发请求，
因此构建在Node 上的代理服务器相比其他技术实现（如Ruby ）的服务器表现要好得多。
此外，与Node 代理服务器交互的客户端代码是由javascript 语言编写的，
因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。
*（缺点） Node 是一个相对新的开源项目，所以不太稳定，它总是一直在变，
而且缺少足够多的第三方库支持。看起来，就像是Ruby/Rails 当年的样子。
其它问题
（看雅虎14 条性能优化原则）。
（1） 减少http 请求次数： CSS Sprites, JS 、CSS源码压缩、图片大小控制合适；网页Gzip ，CDN 托管， data 缓存，
图片服务器。
（2） 前端模板JS+数据，减少由于HTML 标签导致的带宽浪费，前端用变量保存AJAX 请求结果，每次操作本地变量，
不用请求，减少请求次数
（3） 用innerHTML 代替DOM 操作，减少DOM 操作次数，优化javascript 性能。
（4） 当需要设置的样式很多时设置className 而不是直接操作style 。
（5） 少用全局变量、缓存DOM 节点查找的结果。减少IO 读取操作。
（6） 避免使用CSS Expression （ css 表达式) 又称Dynamic properties( 动态属性) 。
（7） 图片预加载，将样式表放在顶部，将脚本放在底部加上时间戳。
（8） 避免在页面的主体布局中使用table ， table 要等其中的内容完全下载之后才会显示出来，显示比div+css 布局慢。
二、http 状态码有那些？分别代表是什么意思？
100-199 用于指定客户端应相应的某些动作。
200-299 用于表示请求成功。
300-399 用于已经移动的文件并且常被包含在定位头信息中指定新的地址信息。
400-499 用于指出客户端的错误。
400 语义有误，当前请求无法被服务器理解。
401 当前请求需要用户验证
403 服务器已经理解请求，但是拒绝执行它。
500-599 用于支持服务器错误。
503 – 服务不可用
一个页面从输入URL 到页面加载显示完成，这个过程中都发生了什么？
（流程说的越详细越好）
查找浏览器缓存
DNS 解析、查找该域名对应的IP 地址、重定向（ 301 ）、发出第二个GET 请求
进行HTTP 协议会话
客户端发送报头( 请求报头)
服务器回馈报头( 响应报头)
html 文档开始下载
文档树建立，根据标记请求所需指定MIME 类型的文件
文件显示
[
浏览器这边做的工作大致分为以下几步：
加载：根据请求的URL 进行域名解析，向服务器发起请求，接收文件（ HTML 、JS、CSS、图象等）。
解析： 对加载到的资源（HTML 、JS、CSS 等）进行语法解析， 建议相应的内部数据结构（比如HTML 的DOM 树，
JS 的（对象）属性表， CSS 的样式规则等等）
}
四、平时如何管理你的项目？
先期团队必须确定好全局样式（ globe.css ），编码模式(utf-8) 等；
编写习惯必须一致（例如都是采用继承式的写法，单样式都写成一行）；
标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；
页面进行标注（例如页面模块开始和结束）；
CSS 跟HTML 分文件夹并行存放，命名都得统一（例如style.css ）；
JS 分文件夹存放命名以该JS 功能为准的英文翻译。
图片采用整合的images.png png8 格式文件使用尽量整合在一起使用方便将来的管理
五、说说最近最流行的一些东西吧？常去哪些网站？
Node.js 、Mongodb 、npm 、MVVM 、MEAN 、three.js
六、移动端（ Android IOS ）怎么做好用户体验?
清晰的视觉纵线、信息的分组、极致的减法、
利用选择代替输入、标签及文字的排布方式、
依靠明文确认密码、合理的键盘利用、
七、想问公司的问题？
目前关注哪些最新的Web 前端技术（未来的发展方向）？
前端团队如何工作的（实现一个产品的流程）？
公司的薪资结构是什么样子的？
八、优质网站推荐
极客标签： http://www.gbtags.com/
码农周刊： http://weekly.manong.io/issues/
前端周刊： http://www.feweekly.com/issues
极客头条： http://geek.csdn.net/
Startup News ：http://news.dbanotes.net/
Hacker News ： https://news.ycombinator.com/news
InfoQ ： http://www.infoq.com/
w3cplus ： http://www.w3cplus.com/
Stack Overflow ： http://stackoverflow.com/
Atp ： http://atp-posts.b0.upaiyun.com/posts/
2017年面试题
HTML/CSS 部分
1、什么是盒子模型?
在网页中，一个元素占有空间的大小由几个部分构成， 其中包括元素的内容
(content) ，元素的内边距(padding) ，元素的边框(border) ，元素的外边距(margin)
四个部分。这四个部分占有的空间中， 有的部分可以显示相应的内容， 而有的部
分只用来分隔相邻的区域或区域。4 个部分一起构成了css 中元素的盒模型。
2、行内元素有哪些?块级元素有哪些? 空(void) 元素有那些?
行内元素： a、b、span 、img、input 、strong 、select 、label 、em、button 、
textarea
块级元素： div、ul、li、dl、dt、dd、p、h1-h6 、blockquote
空元素：即系没有内容的HTML 元素，例如： br、meta 、hr、link、input 、
img
3、简述一下src 与href 的区别
href 是指向网络资源所在位置，建立和当前元素(锚点)或当前文档(链接)之
间的链接，用于超链接。
src 是指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位
置;在请求src 资源时会将其指向的资源下载并应用到文档内， 例如js 脚本，img
图片和frame 等元素。当浏览器解析到该元素时， 会暂停其他资源的下载和处理，
直到将该资源加载、编译、执行完毕，图片和框架等元素也如此，类似于将所指
向资源嵌入当前标签内。这也是为什么将js 脚本放在底部而不是头部。
4、简述同步和异步的区别
同步是阻塞模式，异步是非阻塞模式。
同步就是指一个进程在执行某个请求的时候， 若该请求需要一段时间才能返
回信息，那么这个进程将会一直等待下去，直到收到返回信息才继续执行下去;
异步是指进程不需要一直等下去， 而是继续执行下面的操作， 不管其他进程
的状态。当有消息返回时系统会通知进程进行处理，这样可以提高执行的效率。
5、px 和em 的区别
px 和em 都是长度单位， 区别是，px 的值是固定的， 指定是多少就是多少，计算比较容易。em 得值不是固定的，并且em 会继承父级元素的字体大小。浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px 。那么12px=0.75em, 10px=0.625em
6、什么叫优雅降级和渐进增强?
渐进增强progressive enhancement ：
针对低版本浏览器进行构建页面， 保证最基本的功能， 然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。优雅降级graceful degradation ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。
区别：
a. 优雅降级是从复杂的现状开始，并试图减少用户体验的供给
b. 渐进增强则是从一个非常基础的， 能够起作用的版本开始， 并不断扩充，
以适应未来环境的需要
c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看，同时保证其
根基处于安全地带
7、浏览器的内核分别是什么?
IE: trident 内核
Firefox ：gecko 内核
Safari ：webkit 内核
Opera ：以前是presto 内核， Opera 现已改用Google Chrome 的Blink 内
核
Chrome ：Blink( 基于webkit ，Google 与Opera Software 共同开发)
JavaScript 部分
1、怎样添加、移除、移动、复制、创建和查找节点?
1)创建新节点
createDocumentFragment() // 创建一个DOM 片段
createElement() // 创建一个具体的元素
createTextNode() // 创建一个文本节点
2)添加、移除、替换、插入
appendChild() // 添加
removeChild() // 移除
www.tedu.cn 美国上市公司
亿元级外企IT 培训企业
replaceChild() // 替换
insertBefore() // 插入
3)查找
getElementsByTagName() // 通过标签名称
getElementsByName() // 通过元素的Name 属性的值
getElementById() // 通过元素Id，唯一性
2、Javascript 中callee 和caller 的作用?
caller 是返回一个对函数的引用，该函数调用了当前函数;
callee 是返回正在被执行的function 函数，也就是所指定的function 对象的
正文。
3、请描述一下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 仅仅是为了在本地“存储”数据而生。
4、手写数组快速排序
关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
“快速排序”的思想很简单，整个排序过程只需要三步：
(1)在数据集之中，选择一个元素作为”基准” (pivot) 。
(2)所有小于”基准”的元素，都移到”基准”的左边;所有大于”基准”的元素，都
移到”基准”的右边。
www.tedu.cn 美国上市公司
亿元级外企IT 培训企业
(3)对”基准”左边和右边的两个子集，不断重复第一步和第二步， 直到所有子
集只剩下一个元素为止。
其他
1、一次完整的HTTP 事务是怎样的一个过程?
基本流程：
a. 域名解析
b. 发起TCP 的3 次握手
c. 建立TCP 连接后发起http 请求
d. 服务器端响应http 请求，浏览器得到html 代码
e. 浏览器解析html 代码，并请求html 代码中的资源
f. 浏览器对页面进行渲染呈现给用户
2、对前端工程师这个职位你是怎么样理解的?
a. 前端是最贴近用户的程序员，前端的能力就是能让产品从90 分进化到
100 分，甚至更好
b. 参与项目，快速高质量完成实现效果图，精确到1px;
c. 与团队成员， UI 设计，产品经理的沟通;
d. 做好的页面结构，页面重构和用户体验;
e. 处理hack，兼容、写出优美的代码格式;
f. 针对服务器的优化、拥抱最新前端技术。
2016年面试题
1) 下列哪个样式定义后, 内联( 非块状) 元素可以定义宽度和高度
a. display:inline
b. display:none
c. display:block
d. display:inherit
2) css 属性overflow 属性定义溢出元素内容区的内容会如何处理。如果值为 scroll ，不论是否需要，用户代理都会提供一种滚动机制。
True
False
3) 新窗口打开网页，用到以下哪个值（）。
a. _self
b. _blank
c. _top
d. _parent
4) 下面有关jquery 事件的响应，描述错误的是？
a. onclick 鼠标点击某个对象
b. onfocus 元素失去焦点
c. onload 是某个页面的css js html 文档结构和图像被完成加载
d. onmousedown 某个鼠标按键被按下
5) 元素的alt 和title 有什么异同，选出正确的说法？不同的浏览器，表现一样
a. alt 和title 同时设置的时候， alt 作为图片的替代文字出现， title 是图片的解释文字
b. alt 和title 同时设置的时候， title 作为图片的替代文字出现， alt 是图片的解释文字
c. 以上说法都不正确
6) 下列js 可以让一个input 的背景颜色变成红色的是？
A. inputElement.style.backgroundColor = 'red';
b. inputElement.backgroundColor = 'red';
c. inputElement.style.backgroundColor = '#0000';
d. inputElement.backgroundColor = '#0000';
6) 下列js 可以让一个input 的背景颜色变成红色的是？
A. inputElement.style.backgroundColor = 'red';
b. inputElement.backgroundColor = 'red';
c. inputElement.style.backgroundColor = '#0000';
d. inputElement.backgroundColor = '#0000';
7) 下面有关html5 标签说法错误的有？
a. <audio> 标签定义声音，比如音乐或其他音频流
b. <canvas> 比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦
或是来自其他外部源内容
c. <menu> 标签定义菜单列表。当希望列出表单控件时使用该标签
d. <command> 标签定义命令按钮，比如单选按钮、复选框或按钮
8) 下述有关css 属性position 的属性值的描述，说法错误的是？
a. static ：没有定位，元素出现在正常的流中
b. fixed ：生成绝对定位的元素，相对于父元素进行定位
c. relative ：生成相对定位的元素，相对于元素本身正常位置进行定位。
d. absolute ：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定位。
9) 下面符合一个有效的javascript 变量定义规则的是？
a. _$te$t2
b. with
c. a bc
d. 2a
10) 下面有关JavaScript 中 call 和apply 的描述，错误的是？
a. call 与aplly 都属于Function.prototype 的一个方法，所以每个function 实例都有call 、apply 属性
b. 两者传递的参数不同， call 函数第一个参数都是要传入给当前对象的对象， apply 不是
c. apply 传入的是一个参数数组，也就是将多个参数组合成为一个数组传入
d. call 传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由thisObj 指定的新对
象。
11) 什么会被打印在控制台上？ b 是局部变量还是全局变量
( function () {
var a = b = 5;
})();
console.log(b);
12) 执行这段代码，输出什么结果。
function test() {
console.log(a);
console.log(foo());
var a = 1;
function foo() {
return 2;
}
}
test();
13) 执行这段代码，输出什么结果。
var fullname = 'John Doe';
var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function () {
return this .fullname;
}
}
};
console.log(obj.prop.getFullname()); var test = obj.prop.getFullname;
console.log(test());
14) 下面这个JS程序的输出是什么：
function Foo() {
var i = 0;
return function() {
console.log(i++);
}
}
var f1 = Foo(),
f2 = Foo();
f1();
f1();
f2();
15) 下面这个JS程序的输出是什么：
<SCRIPT LANGUAGE="JavaScript">
var bb = 1;
function aa(bb) {
bb = 2;
alert(bb);
};
aa(bb);
alert(bb);
</SCRIPT>
16) Doctype 作用? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
17) CSS 选择符有哪些？哪些属性可以继承？优先级算法如何计算？ CSS3新增伪类有那些？
18) 谈谈This 对象的理解。
19 ）请用js 实现全选和取消全选的功能，只需要写出js 代码（可以使用 jquery 框架）
<input type= ”checkbox” id= ”checkall ” /> 全选
<div class= ”list ”>
<input type= ”checkbox” name=” type ” value= ”1” /> 这是1
<input type= ”checkbox” name=”type ” value= ”2” /> 这是2
</div>
面试官问你有没有女/ 男朋友?
答案
1:C。内联元素加上display ：block; 后被块级化。块级元素一般是其他元素的容器， 可容纳内联元素和其他块状元素，
块状元素排斥其他元素与其位于同一行，宽度(width) 高度(height) 起作用。因此，可以定义其宽度和高度。
2 :TRUE。参数是scroll 时候，必会出现滚动条。
参数是auto 时候，子元素内容大于父元素时出现滚动条。
参数是visible 时候，溢出的内容出现在父元素之外。
参数是hidden 时候，溢出隐藏。
3:选B。在html 中通过<a> 标签打开一个链接，通过 <a> 标签的 target 属性规定在何处打开链接文档。
如果在标签<a> 中写入target 属性，则浏览器会根据target 的属性值去打开与其命名或名称相符的框架<frame> 或者窗口.
在target 中还存在四个保留的属性值如下，
属性值 值描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
4:选b。onfocus 获得焦点 onblur 失去焦点
5:A
这两个属性是有些重复了。在不同浏览器里面表现有些不同。在alt 和title 同时设置的时候， alt 作为图片的替
代文字出现， title 是图片的解释文字。
6:A
#0000 是不正确的写法，至少要为六位，应该是#FF0000
A 写法是正确的，有两种写法：
document.getElementById("input").style.backgroundColor = "red";
inputElement.style.backgroundColor = "#FF0000";
7:B
这里考察HTML 标签的使用：
<audio> 标签定义声音，比如音乐或其他音频流。 A 正确。
<canvas> 标签定义图形， 比如图表和其他图像。<canvas> 标签只是图形容器， 您必须使用脚本来绘制图形。 B 错误，
<article> 标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来
自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 C 正确
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当
command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。 D
正确。
8:B
static 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将 position 设置为 absolute ，不过其包含块是视窗本身。
9:
A 正确;
B 是关键字；
C 有空格；
D 开头为数字；
第一个字符必须是一个 ASCII 字母（大小写均可），或一个下划线(_) 。注意第一个字符不能是数字。
后续的字符必须是字母、数字或下划线。
变量名称一定不能是保留字。
10:B；
call （） 方法和apply （） 方法的作用相同， 他们的区别在于接收参数的方式不同。对于call （），第一个参数是this值没有变化，变化的是其余参数都直接传递给函数。（在使用call （）方法时，传递给函数的参数必须逐个列举出来。使用apply （）时，传递给函数的是参数数组）如下代码做出解释：
function add(c, d){
return this.a + this.b + c + d;
}
var o = {a:1, b:3};
add.call(o, 5, 7); // 1 + 3 + 5 + 7 = 16
add.apply(o, [10, 20]); // 1 + 3 + 10 + 20 = 34
十一: 5 b 是全局变量。
十二: undefined 和2 。
十三:答案是Aurelio De Rosa 和John Doe
十四: 0 1 0
十五:2 1
十六
（ 1 ）、<!DOCTYP> 声明位于文档中的最前面，处于<html> 标签之前。告知浏览器的解析器，用什么文档类型规范来
解析这个文档。
（ 2）、严格模式的排版和JS 运作模式是以该浏览器支持的最高标准运行。
（ 3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
（ 4）、DOCTYPE 不存在或格式不正确会导致文档以混杂模式呈现。
十七
* 1.id 选择器（ # myid ）
2.类选择器（ .myclassname ）
3.标签选择器（ div, h1, p ）
4.相邻选择器（ h1 + p ）
5.子选择器（ ul < li ）
6.后代选择器（ li a ）
7.通配符选择器（ * ）
8.属性选择器（ a[rel = "external"] ）
9.伪类选择器（ a: hover, li: nth - child ）
* 可继承： font-size font-family color, UL LI DL DD DT;
* 不可继承： border padding margin width height ;
* 优先级就近原则，样式定义最近者为准;
* 载入样式以最后载入的定位为准;
优先级为:
!important > id > class > tag
important 比内联优先级高
CSS3 新增伪类举例：
p:first-of-type 选择属于其父元素的首个<p> 元素的每个<p> 元素。
p:last-of-type 选择属于其父元素的最后<p> 元素的每个<p> 元素。
p:only-of-type 选择属于其父元素唯一的<p> 元素的每个<p> 元素。
p:only-child 选择属于其父元素的唯一子元素的每个<p> 元素。
p:nth-child(2) 选择属于其父元素的第二个子元素的每个<p> 元素。
:enabled :disabled 控制表单控件的禁用状态。
:checked:单选框或复选框被选中。
十八
this 是js 的一个关键字，随着函数使用场合不同， this 的值会发生变化。
但是总有一个原则，那就是this 指的是调用函数的那个对象。
this 一般情况下：是全局对象Global 。作为方法调用，那么this 就是指这个对象
十九
$(function(){
$("#checkall").click(function(){
if($(this).attr("checked")){
$("div.list input").attr("checked",true); // 全选
}else{
$("div.list input").attr("checked",false); // 全不选
}
});
二十：
考虑到你工作的稳定性。几种情况;
1、没女朋友，如果年纪不较大了，家里可能会有安排，如果是外地人，不太稳定；
2、有女朋友，在外地。异地恋很折磨人的，要么一方将就一方，要么分手，这对工作的稳定性有影响；
3、有女朋友且在本地，这种是面试官最喜欢见到的情况。
4、考察的反应能力、是否诚实
作业：了解自己感兴趣的公司