HTML+CSS

1.行内元素有哪些？块级元素有哪些？他们各有什么特性 块级元素：div p h1 h2 h3 h4 form ul

行内元素: a b br i span input select

2.DIV的盒模型？

Content/padding/border/margin

3.class属性为width: 0; height: 0; border-bottom: 100px solid red; border-right: 100px solid transparent;的div将显示为什么形状？

直角三角形

4.请分别说出图一和图二的文字颜色？为什么？

5.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

6.写出5个HTML5标签

7.说出2种左边固定宽度右边自动适应宽度的2列布局方式？

8.写出几种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.解释css sprites，如何使用。

Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量

10.你如何对网站的文件和资源进行优化？期待的解决方案包括：

文件合并

文件最小化/文件压缩

使用CDN托管

缓存的使用

11.什么是语义化的HTML？ 直观的认识标签 对于搜索引擎的抓取有好处

12.对于网站上面大量的小ICON你知道有几种处理实现方式？分别说出优缺点。

13.说说你用过或了解的几个前端框架及他们的优缺点

14.说出几个CSS3的新特性及用途

Javascript 1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

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和标准下有哪些兼容性的写法

Var ev = 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的方法

13.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

14.闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

15.如何阻止事件冒泡和默认事件

canceBubble return false

16.添加 删除 替换 插入到某个接点的方法 obj.appendChidl()

obj.innersetBefore

obj.replaceChild

obj.removeChild

17.解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象

本地对象为array obj regexp等可以new实例化

内置对象为gload Math 等不可以实例化的

宿主为浏览器自带的document,window 等

19.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js Document.ready原生种没有这个方法，jquery中有 $().ready(function)

20.”==”和“===”的不同

前者会自动转换类型

后者不会

21.javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

第二篇：前端开发笔试题

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 br i span input select

5、盒子模型概述

Css盒模型: margin、border、padding、content

盒子模型分为了w3c盒子和ie盒子,两者的区别在于w3c盒子的

width和height仅指content部分，没有包含padding和border部分，但是ie盒子模型的width和height包含padding和border部分

5.CSS引入的方式有哪些? link和@import的区别是?

内联 内嵌 外链 导入

区别 ：同时加载

前者无兼容性，后者CSS2.1以下浏览器不支持

Link 支持使用javascript改变样式，后者不可

6.css选择符有哪些？哪些属性可以继承？优先级算法如何计算？内联和important哪个优先级高？

标签选择符、 类选择符、 id选择符

优先级顺序： Id>class>标签选择

后者优先级高

7、form中input是类型有哪些？

text:文本框

password:密框码

radio:单选按钮

checkbox:复选框

file:文件选择域

hidden:隐藏域

button:按钮

reset:重置按钮

submit:表单提交按钮

image:图片按钮,类似submit可以为按钮添加图片

8、form中的input的redonly和disable区别

Readonly和Disabled是用在表单中的两个属性，它们都能够做到使用户不能够更改表单域中的内容。但是它们之间有着微小的差别，总结如下：

Readonly只针对input(text / password)和textarea有效，而disabled对于所有的表单元素都有效，包括select, radio, checkbox, button等。但是表单元素在使用了disabled后，当我们将表单以POST

或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去(这种情况出现在我们将某个表单中的textarea元素设置为disabled或readonly，但是submit button却是可以使用的)

9、你做的页面在哪些流览器测试过？这些浏览器的内核分别是什么? Ie(Ie内核) 火狐（Gecko） 谷歌（webkit） opear(Presto)

10、写出几种IE6 BUG的解决方法

1.双边距BUG float引起的 使用display:inline

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）

11、<img>标签上title与alt属性的区别是什么？

Alt 当图片不显示是 用文字代表。

Title 为该属性提供信息

12、描述css reset的作用和用途。

Reset重置浏览器的css默认属性 浏览器的品种不同，样式不同，然后重置，让他们统一

13、解释css sprites，如何使用。

Css 精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求次数

14、你如何对网站的文件和资源进行优化？期待的解决方案包括： 文件合并、文件最小化/文件压缩、使用CDN托管、缓存的使用

15、什么是语义化的HTML？

直观的认识标签 对于搜索引擎的抓取有好处

16.清除浮动的几种方式，各自的优缺点

1.使用空标签清除浮动 clear:both（理论上能清楚任何标签，，，增加无意义的标签）

2.使用overflow:auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE）

3.是用afert伪元素清除浮动(用于非IE浏览器)

17.简要说说关于Html5和css3的关注?

Html5:HTML5其实是关于图像，位置，存储，速度的优化和改进。一一列举HTML5的新特性，主要有下面一些：

[*]Canvas 图像、图形处理

[*]WebGL 网页3D游戏成为可能

[*]Geolocation API 地理位置定位

[*]Web Storage 本地存储，实现离线应用成为可能

[*]Web Workers 客户端多线程为应用提速

[*]Web Socket 套接字可实现客户端与服务器的持久连接

[*]Video 原生视频播放Audio 原生音频播放

[*]标签的改变：<header>,<footer>, <nav>,<dialog>, <aside>, <figure>, <section> 等 Css3

圆角:border-radius;5px;

盒子阴影：box-shadow

文字阴影：text-shadow

颜色渐变:

1、线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 #grad {

background: -webkit-linear-gradient(red, blue); /*Safari*/ background: -o-linear-gradient(red, blue); /* Opera*/

background: -moz-linear-gradient(red, blue); /* Firefox */ background: linear-gradient(red, blue); /* 标准的语法 */ }

2、径向渐变（Radial Gradients）- 由它们的中心定义 #grad { background: -webkit-radial-gradient(red, green, blue); /* Safari*/ background: -o-radial-gradient(red, green, blue); /* Opera */ background: -moz-radial-gradient(red, green, blue); /* Firefox */ background: radial-gradient(red, green, blue); /* 标准的语法 */ }

透明度:rgba(0,0,0,0.5)、opacity:0.5/filter:alpha(opacity=50)； 变换:transform

过度:transition

动画：animation

18.如何用CSS分别单独定义IE6、7、8的width属性。

height: 100px; /*所有浏览器通用*/

height: 100px !important; /*ie7和firefox共用*/

color:#090\9; /* ie6、ie7、ie8*/

+color:#f00; /*只针对ie7浏览器*/

*color:#f00; /* ie6、ie7*/

_color:#ff0; /* ie6*/

19、如何上下左右居中一个浮动元素?

设置容器的浮动方式为相对定位，然后确定容器的宽高，比如宽500 高 300 的层，然后设置层的外边距。

div{Width:500px;height:300px;Margin:-150px 0 0

-250px;position:relative;left:50%;top:50%;}

20、IE6不支持png图片格式的解决方法

一、图片替换

使用GIF或PNG8(索引透明)来代替PNG图片

.png{background:url(image.png); _background:url(image.gif);}

特别说明一下：IE6是支持PNG索引透明的（即要么全透明，要么不透明），但不支持png的 alpha 透明（即半透明）

缺点：GIF图片色彩差了很多，特别是渐变色，有白色虚边。对色彩度要求不高，纯白色可以考虑此方法。

二、CSS滤镜（filter）

使用AlphaImageLoader加载PNG图片 .png{background:url(image.png) repeat-x 0 0; _background:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png' , sizingMethod='scale' ); }

缺点：IE6下背景无法平铺，性能差。而且页面使用filter 滤镜以后会出现这样那样的怪问题。页面中次数不是很多的时候该办法还是可行的。

21、你对前端界面工程师这个职位是怎么样理解的？

它其实好比就是一座桥梁，是链接 UI设计和程序开发的中间环节，这个环节直接关系到psd效果图正确高效稳定的还原，同时也为程序开发做好载体。

22、如果让你来制作一个访问量很高的大型网站，你会如何来管理所有CSS文件、JS与图片？

回答：涉及到人手、分工、同步；

1、先期团队必须确定好全局样式（globe.css），编码模式(utf-8)以及编写习惯必须一致

2、标注样式编写人，各模块都及时标注（标注关键样式调用的地方）；

3、页面进行标注（例如页面模块开始和结束）；

4、CSS跟HTML 分文件夹并行存放，命名都得统一（例如style.css）

5、JS 分文件夹存放命民以该JS 功能为准英文翻译；

6、图片采用整合的 images.pngpng8 格式文件使用尽量整合在一起使用方便将来的管理

23、前端页面有哪三层构成，分别是什么？作用是什么？ 网页分成三个层次，即：结构层、表示层、行为层。

网页的结构层（structurallayer）由HTML 或XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P标签表达了这样一种语义：“这是一个文本段。” 网页的表示层（presentationlayer）由CSS 负责创建。CSS 对“如何显示有关内容”的问题做出了回答。

网页的行为层（behaviorlayer）负责回答“内容应该如何对事件做出反应”这一问题。这是Javascript 语言和DOM 主宰的领域。

25、执行力问题回答方案

第一点、首先谈谈我对执行力的理解：我所理解的执行力就是要能够把该做的事情落实到行动上，看到具体的效果，而不是说该怎么做，事情是做出来的，而不是嘴上说出来的； 第二点、我觉得单独的去讨论一个人是否有执行力没有太多的意义，我更加看重的是公司应该营造一种这样的文化氛围，个人的执行力才能发挥作用，也就是说公司有没有这样强的执行力文化氛围，靠一个人的执行力是不够的，要看整个公司的企业文化建设如何。执行力最后的体现在结果上。

1.javascript的typeof返回哪些数据类型

Object number function boolean underfind

2、javascript中的对话框有哪几种

Alert()警告框、prompt()输入对话框、confirm()确认对话框

2、javascript中setTimeout和setinterval的区别是？ setTimeout是计时的功能，到点之后就触发后面的代码，只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即

结束。如果运行的代码中再次运行同样的setTimeout命令，则可循环运行。

setinterval是循环运行的，即每到设定时间间隔就触发指定代码。这是真正的定时器。

setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒……

2、例举3种强制类型转换和2种隐式类型转换？

强制（parseInt,parseFloat,number）

隐式（== – ===）

3、split() join() 的区别

前者是切割成数组的形式，后者是将数组转换成字符串

4、数组方法pop() push() unshift() shift()

Push()尾部添加 pop()尾部删除

Unshift()头部添加 shift()头部删除

6、IE和DOM事件流的区别

1.执行顺序不一样、

2.参数不一样

3.事件加不加on

4.this指向问题

8、ajax请求的时候get 和post方式的区别

简单的来说就是两个方面：有大小限制和安全问题。

Get方式不适合传递数据量较大的数据,同时的话请求的历史信息会保存在浏览器的缓存当中，有一定的风险；而已post方式向服务器发送数据请求，则不存在这两个方面的不足.

9、Ajax实现页面的异步调用和与服务器交互数据

(1)传统的javascript xmlHttpRequest的方式

(2)使用Jquery中的load方法

(3)使用Jquery中的getJson、getScript全局方法

(4)使用最底层的$ajax方法

9、call和apply的区别

Object.call(this,obj1,obj2,obj3)

Object.apply(this,arguments)

10.ajax请求时，如何解释json数据

使用eval parse 鉴于安全性考虑 使用parse更靠谱

13.事件委托是什么

让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！

/?p=78 例子可见此链接

14、闭包是什么，有什么特性，对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。

/gaoshanwudi/article/details/7355794 此链接可查看（问这个问题的不是一个公司）

15.如何阻止事件冒泡和默认事件

canceBubble return false

16、添加 删除 替换 插入到某个接点的方法

obj.appendChidl()

obj.insertBefore()

obj.replaceChild()

obj.removeChild()

17、解释jsonp的原理，以及为什么不是真正的ajax

动态创建script标签，回调函数

Ajax是页面无刷新请求数据操作

18.javascript的本地对象，内置对象和宿主对象 本地对象为array obj regexp等可以new实例化 内置对象为gload Math 等不可以实例化的 宿主为浏览器自带的document,window 等

19.document load 和document ready的区别

Document.onload 是在结构和样式加载完才执行js Document.ready原生种没有这个方法，jquery中有 $().ready(function)

23.DOM操作

1、访问指定节点

(1)getElementsByTagName()

(2)getElementsByName()

(3)getElementById()

2、创建新节点

最常用到的几个方法是

createDocumentFragment()－－创建文档碎片节点

createElement(tagname)－－创建标签名为tagname的元素

createTextNode(text)－－创建包含文本text的文本节点

3、属性操作

getAttribute(name) 获取属性值

setAttribute(name,newvalue) 设置属性值

removeAttribute(name) 删除属性值

4、遍历DOM

NodeIterator，TreeWalker

六、有使用过css sprite技术吗？请简述其原理及优缺点 CSS Sprites原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

CSS Sprites优点

利用CSS Sprites能很好地减少了网页的http请求，从而大大的提高了页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

CSS Sprites缺点

在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内不会出现不必要的背景；

在高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

八、怎么添加，移除，移动，复制创建和查找DOM节点

（1）创建新节点

createDocumentFragment() //创建一个DOM片段

createElement() //创建一个具体的元素

createTextNode() //创建一个文本节点

（2）添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore()

（3）查找

getElementsByTagName() //通过标签名称

getElementsByName() //通过元素的Name属性的值 getElementById() //通过元素Id，唯一性

九、利用正则表达式进行邮箱、url验证

答：

邮箱验证:

Var myreg =

/^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;

url

var tomatch= /http:\/\/[A-Za-z0-9\.-]{3,}\.[A-Za-z]{3}/

十、以下代码执行的结果？

var a = 10 ;

sayHi();

function sayHi()

{

a=a+10;

alert(a);

return a;

}

alert(a);

alert(sayHi()+10);

答：20 20 30 40

十一、将此数组根据冒泡排序重新排列:var myArray = new array(1,3,5,2,7,4);

答：

//new 一个数组

var myArray = new Array(1,3,5,2,7,4);

//冒泡排序

if(myArray.length>0){

for(var i=0; i //在这要注意myArray.length-i-1，意思是第一次从数组第一个值开始，第二次从第二个值开始….. for(var j=0; j str_j){

var tmp = myArray[j];

myArray[j] = myArray[j+1];

myArray[j+1] = tmp;

}

}

}

}

十二、jQuery插件开发的基本格式（选填）

(function ($) {

$.extend($.fn, {

}) })(jQuery)

12、正则表达式

13、前端优化知识

JavaScript和css部分

(1)、GZIP 压缩你的 JS 和 CSS 文件：

（2)把你的 .js 库文件地址替换成 Google CDN的地址：

/ajax/libs/jquery/1.4.4/jquery.min.js，其意义在于当一个用户访问过使用 google api 的网站之后，再次访问其他调用了该api地址的网站就不需要再次加载该文件了。从而达到提速的目的。 （3）把脚本放到底部

当一个脚本在下载的时候，浏览器干不了其它的事儿(串行了) ，把脚本放到尽可能底部的地方，一个原因是让页面逐渐渲染，另一个是实现更好的并行下载。对于脚本，脚本以下的内容被阻止逐渐加载了，因为只有当下载完脚本以后才会下载下面的内容， 当脚本正在下载的时候，浏览器不会开始下载任何东西。

(4)把样式表放到顶部

这一条其实和用户访问期望有关。CSS 放到最顶部，浏览器能够有针对性的对 HTML 页面从顶到下进行解析和渲染。没有人喜欢等待，而浏览器已经考虑到了这一点。

图片处理部分

(1)、使用css sprites合并图片;

一个网站经常使用小图标和小图片进行美化，但是很遗憾这些小图片占用了大量的HTTP请求，因此可以采用sprites的方式把所有的图片合并成一张图片 ，可以通过相关工具在线合并，也可以在ps中合并。

(2)、优化你网站图片：

大量使用的图片和图标虽然可以给网站带来美轮美奂的效果，图文混编更是一种非常绚丽的博文展现方法。可图片的体积确实不是很给力，jpg是一种有损压缩格式，而png虽然是无损的，但缺憾是体积颇大。为了减少图片体积达到最快的下载速度，每一张图片上传前应该优化一下体积。

14、Jquery性能优化

（1）优先使用id和标记选择器

（2）使用JQuery缓存对象

（3）更多的使用链式的写法

（4）减少对dom元素的直接操作

（5）正确引用jQuery；

1.尽量在body结束前才引入jQuery，而不是在head中。

2.借助第三方提供的CDN来引入jQuery，同时注意当使用第三方CDN出现问题时，要引入本地的jQuery文件。

15、 简述下cookie的操作，还有cookie的属性都知道哪些

16、js中this关键字的使用场合和用法

17、HTTP协议的状态消息都有哪些?

18、 AJAX是什么? AJAX的交互模型(流程)? AJAX跨域的解决办法?

通过xmlHttpRequest对象，以一种异步的方式，像服务器发送数据请求，并通过该对象接受请求返回的数据，从而完成人机交互的数据操作；

19、JavaScript继承有哪两种形式形式，进行描述

20、简述JavaScript封装

21、Jquery冒泡原理

22、Ajax跨域问题

23、页面的加载方式

html解析过程是从开头到下一行一行的执行。如果遇到CSS的加载以及JS的加载的话，就先让css和js加载完或者是等js执行完毕之后再继续加载；所以页面中如果js全放在头部并且开始就执行的话，如果网速跟不上，可能出现短暂的空白！所以js一般放在页面末尾,然后的话css放在头部！加载完毕后，会进行页面的外观渲染！