Web前端面试题目汇总精要Word下载.docx
《Web前端面试题目汇总精要Word下载.docx》由会员分享，可在线阅读，更多相关《Web前端面试题目汇总精要Word下载.docx（21页珍藏版）》请在冰豆网上搜索。
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新增伪类有那些？
选择器（#myid）
2.类选择器（.myclassname）
3.标签选择器（div,h1,p）
4.相邻选择器（h1+p）
5.子选择器（ul<
li）
6.后代选择器（lia）
7.通配符选择器（*）
8.属性选择器（a[rel="
external"
]）
9.伪类选择器（a:
hover,li:
nth-child）
可继承的样式：
font-sizefont-familycolor,ULLIDLDDDT;
不可继承的样式：
borderpaddingmarginwidthheight;
优先级就近原则，同权重情况下样式定义最近者为准;
载入样式以最后载入的定位为准;
优先级为:
!
important>
id>
class>
tag
important比内联优先级高
2、CSS3新增伪类举例：
p:
first-of-type选择属于其父元素的首个元素的每个元素。
last-of-type
选择属于其父元素的最后元素的每个元素。
only-of-type
选择属于其父元素唯一的元素的每个元素。
only-child
选择属于其父元素的唯一子元素的每个元素。
nth-child
（2）
选择属于其父元素的第二个子元素的每个元素。
:
enabled
:
disabled控制表单控件的禁用态。
checked单选框或复选框被选中。
3、如何居中div？
如何居中一个浮动元素？
给div设置一个宽度，然后添加margin:
0auto属性
div{
width:
200px;
margin:
0auto;
}
居中一个浮动元素
确定容器的宽高宽500高300的层
设置层的外边距.div{
Width:
500px;
height:
300px;
absolute 生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。
fixed（老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
relative 生成相对定位的元素，相对于其正常位置进行定位。
static
默认值。
没有定位，元素出现在正常的流中
*（忽略top,bottom,left,rightz-index声明）。
inherit规定从父元素继承position属性的值。
4、为什么要初始化CSS样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
最简单的初始化方法就是：
*{padding:
0;
margin:
}（不建议）淘宝的样式初始化：
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:
}body,button,input,select,textarea{font:
12px/,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:
}a:
hover{text-decoration:
underline;
}sup{vertical-align:
text-top;
}sub{vertical-align:
text-bottom;
}legend{color:
#000;
}fieldset,img{border:
}button,input,select,textarea{font-size:
}table{border-collapse:
collapse;
border-spacing:
5、absolute的containingblock计算方式跟正常流有什么不同？
6、position跟display、margincollapse、overflow、float这些特性相互叠加后会怎么样？
7、对BFC规范的理解？
（W3CCSS规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。
）
8、css定义的权重
以下是权重的规则：
标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/div{}/*权重为10*/.class1{}/*权重为100*/#id1{}/*权重为100+1=101*/#id1div{}/*权重为10+1=11*/.class1div{}/*权重为10+10+1=21*/.class1.class2div{}如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
9、解释下浮动和它的工作原理？
清除浮动的技巧
10、用过媒体查询，针对移动端的布局吗？
11、使用CSS预处理器吗？
喜欢那个？
12、CSS3有哪些新特性？
CSS3实现圆角（border-radius:
8px），阴影（box-shadow:
10px），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:
rotate（9deg）scale,translate（0px,-30px）skew（-9deg,0deg）;
1.对WEB标准以及W3C的理解与认识？
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;
和HTML有什么区别？
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML元素必须被正确地嵌套。
XHTML元素必须被关闭。
标签名必须用小写字母。
XHTML文档必须拥有根元素。
?
严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范（HTML/XHTML）一般为严格过度基于框架的html文档
加入XMl声明可触发，解析方式更改为拥有的bug
4.行内元素有哪些?
块级元素有哪些?
CSS的盒模型?
块级元素：
divph1h2h3h4formul
行内元素:
abbrispaninputselect
Css盒模型:
内容，border,margin，padding
引入的方式有哪些?
link和@import的区别是?
内联内嵌外链导入
区别：
同时加载
前者无兼容性，后者以下浏览器不支持
Link支持使用javascript改变样式，后者不可
选择符有哪些?
哪些属性可以继承?
优先级算法如何计算?
内联和important哪个优先级高?
标签选择符类选择符id选择符
继承不如指定Id>
class>
标签选择
后者优先级高
7.前端页面有哪三层构成，分别是什么?
作用是什么?
结构层HTML表示层CSS行为层js
的基本语句构成是?
选择器{属性1:
值1;
属性2:
值2;
……}
9.你做的页面在哪些流览器测试过?
这些浏览器的内核分别是什么?
Ie（Ie内核）火狐（Gecko）谷歌（webkit）opear（Presto）
10.写出几种IE6BUG的解决方法
1.双边距BUGfloat引起的使用display
像素问题使用float引起的使用dislpay:
inline-3px
3.超链接hover点击后失效使用正确的书写顺序linkvisitedhoveractive
z-index问题给父级添加position:
relative
透明使用js代码改
最小高度!
Important解决’
在ie6下遮盖使用iframe嵌套
8.为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:
hidden,zoom:
line-height:
1px）
6不支持!
important
标签上title与alt属性的区别是什么?
Alt当图片不显示是用文字代表。
Title为该属性提供信息
12.描述cssreset的作用和用途。
Reset重置浏览器的css默认属性浏览器的品种不同，样式不同，然后重置，让他们统一
13.解释csssprites，如何使用。
Css精灵把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量
14.浏览器标准模式和怪异模式之间的区别是什么?
盒子模型渲染模式的不同
使用可显示为什么模式
15.你如何对网站的文件和资源进行优化?
期待的解决方案包括：
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
16.什么是语义化的HTML?
直观的认识标签对于搜索引擎的抓取有好处
17.清除浮动的几种方式，各自的优缺点
1.使用空标签清除浮动clear:
both（理论上能清楚任何标签，增加无意义的标签）
2.使用overflow:
auto（空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:
1用于兼容IE）
3.是用afert伪元素清除浮动（用于非IE浏览器）
hack
_marging\\IE6
+margin\\IE7
Marging:
0auto\9所有Ie
Margin\0\\IE8
Javascript部分
的typeof返回哪些数据类型
Objectnumberfunctionbooleanunderfind
2.例举3种强制类型转换和2种隐式类型转换?
强制（parseInt,parseFloat,number）
隐式（==–===）
（）join（）的区别
前者是切割成数组的形式，后者是将数组转换成字符串
4.数组方法pop（）push（）unshift（）shift（）
Push（）尾部添加pop（）尾部删除
Unshift（）头部添加shift（）头部删除
5.事件绑定和普通事件有什么区别
和DOM事件流的区别
1.执行顺序不一样、
2.参数不一样
3.事件加不加on
指向问题
和标准下有哪些兼容性的写法
Varev=ev||
||
Vartarget=||
请求的时候get和post方式的区别
一个在url后面一个放在虚拟载体里面
有大小限制
安全问题
应用不同一个是论坛等只需要请求的，一个是类似修改密码的
和apply的区别
（this,obj1,obj2,obj3）
（this,arguments）
请求时，如何解释json数据
使用evalparse鉴于安全性考虑使用parse更靠谱
继承a的方法
this指针、闭包、作用域
13.事件委托是什么
让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！
14.闭包是什么，有什么特性，对页面有什么影响
闭包就是能够读取其他函数内部变量的函数。
15.如何阻止事件冒泡和默认事件
canceBubblereturnfalse
16.添加删除替换插入到某个接点的方法
（）
17.解释jsonp的原理，以及为什么不是真正的ajax
动态创建script标签，回调函数
Ajax是页面无刷新请求数据操作
的本地对象，内置对象和宿主对象
本地对象为arrayobjregexp等可以new实例化
内置对象为gloadMath等不可以实例化的
宿主为浏览器自带的document,window等
load和documentready的区别
是在结构和样式加载完才执行js
原生种没有这个方法，jquery中有$（）.ready（function）
20.”==”和“===”的不同
前者会自动转换类型
后者不会
的同源策略
一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合
22.编写一个数组去重的方法
functionoSort（arr）
{
varresult={};
varnewArr=[];
for（vari=0;
i<
;
i++）
if（!
result[arr]）
（arr）
result[arr]=1
}
returnnewArr
<
/;
1.自我评价一下HTML/CSS/JS的掌握情况
2.简述HTML经常使用的标签和作用。
Div/a/p/span/li/ul/ol/table/tr/td
3.你认为最常遇到的兼容Bug有哪些?
有哪些问题是你认为解决起来最麻烦的?
IE6PNG
IE6Fixed
4.块级元素和行内元素都有哪些?
行内元素有哪些特点?
5.介绍所知道的CSShack技巧（如：
_，*，+，\9，!
important之类）
定位方式有哪些?
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.函数的几种定义方法？
functiona（）{},
vara=function（）{}
8.对象的定义方法？
a=newObject（）,a={}
9.类的定义方法（prototype）（继承）
Vara=function（）{}
={}
newa（）;
关键字的指向
（）==obj
么是闭包，及其作用是什么？
12.事件绑定的几种方法，事件冒泡？
json/json0070？
14.异步ajax的优缺点都有什么？
优点：
相对于同步ajax：
不会造成UI卡死，用户体验好。
相对于刷新页面，省流量
缺点：
后退按钮无效；
多个请求同时触发时，由于回调时间不确定，会造成混乱，避免这种混乱需要复杂的判断机制。
搜索引擎不友好
数据安全
15.常用JS框架都有什么？
是否使用过jQuery，以及jQuery的优点是什么？
用了多久，介绍一下自己做过的JS项目？
17.开发调试工具和方法都有什么（编辑器、浏览器）
18.类、函数、对象（代码表达）
19.闭包（setTimeout）（产生两个首尾相连的计时器）（使用for循环产生10个计时器）||
Mobile相关
CSS3的掌握情况
22.是否听说过和理解webapp？
23.个人擅长的语言，优缺点都是什么？
24.介绍一下曾经参与过的项目经验，合作开发、独立开发
25.编程的重要知识？
26.开发过程中遇到困难，如何解决？
2
升级会员 