web前端面试题目汇总.docx

上传人:b****7 文档编号:9187265 上传时间:2023-02-03 格式:DOCX 页数:38 大小:33.29KB
下载 相关 举报
web前端面试题目汇总.docx_第1页
第1页 / 共38页
web前端面试题目汇总.docx_第2页
第2页 / 共38页
web前端面试题目汇总.docx_第3页
第3页 / 共38页
web前端面试题目汇总.docx_第4页
第4页 / 共38页
web前端面试题目汇总.docx_第5页
第5页 / 共38页
点击查看更多>>
下载资源
资源描述

web前端面试题目汇总.docx

《web前端面试题目汇总.docx》由会员分享,可在线阅读,更多相关《web前端面试题目汇总.docx(38页珍藏版)》请在冰豆网上搜索。

web前端面试题目汇总.docx

web前端面试题目汇总

最新前端开发工程师面试题——HTML部分

  1、Doctype作用?

严格形式与混杂形式如何区分?

它们有何意义?

  〔1〕、声明位于文档中的最前面,处于标签之前。

告知阅读器的解析器,用什么文档类型标准来解析这个文档。

 

  〔2〕、严格形式的排版和JS运作形式是  以该阅读器支持的最高标准运行。

  〔3〕、在混杂形式中,页面以宽松的向后兼容的方式显示。

模拟老式阅读器的行为以防止站点无法工作。

  〔4〕、DOCTYPE不存在或格式不正确会导致文档以混杂形式呈现。

  2、行内元素有哪些?

块级元素有哪些?

 

  〔1〕CSS标准规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,  比方div默认display属性值为“block〞,成为“块级〞元素;  span默认display属性值为“inline〞,是“行内〞元素。

  

  〔2〕行内元素有:

abspanimginputselectstrong〔强调的语气〕  块级元素有:

divulollidldtddh1h2h3h4…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各自独立的存储空间;

 

最新前端开发工程师面试题——CSS部分

1、CSS选择符有哪些?

哪些属性可以继承?

优先级算法如何计算?

CSS3新增伪类有那些?

  选择器〔#myid〕      2.类选择器〔.myclassname〕  

  3.标签选择器〔div,h1,p〕   4.相邻选择器〔h1+p〕  

  5.子选择器〔ul

  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选择属于其父元素的首个元素的每个元素。

  p:

last-of-type  选择属于其父元素的最后元素的每个元素。

  p:

only-of-type  选择属于其父元素唯一的元素的每个元素。

  p:

only-child    选择属于其父元素的唯一子元素的每个元素。

  p:

nth-child

(2)  选择属于其父元素的第二个子元素的每个元素。

  :

enabled  :

disabled控制表单控件的禁用态。

  :

checked单项选择框或复选框被选中。

  3、如何居中div?

如何居中一个浮动元素?

  给div设置一个宽度,然后添加margin:

0auto属性

  div{    width:

200px;    margin:

0auto;}  

  居中一个浮动元素

  确定容器的宽高宽500高300的层  设置层的外边距.div{  Width:

500px;height:

300px;//高度可以不设  Margin:

-150px00-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,rightz-index声明〕。

  inherit规定从父元素继承position属性的值。

4、为什么要初始化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;} 

  5、absolute的containingblock计算方式跟正常流有什么不同?

  6、position跟display、margincollapse、overflow、float这些特性互相叠加后会怎么样?

  7、对BFC标准的理解?

  〔W3CCSS2.1标准中的一个概念,它决定了元素如何对其内容进展定位,以及与其他元素的关系和互相作用。

  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(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脚本、构造行为表现的别离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、进步网站易用性;

  和HTML有什么区别?

  HTML是一种根本的WEB网页设计语言,XHTML是一个基于XML的置标语言

  最主要的不同:

  XHTML元素必须被正确地嵌套。

  XHTML元素必须被关闭。

  标签名必须用小写字母。

  XHTML文档必须拥有根元素。

  3.Doctype?

严格形式与混杂形式-如何触发这两种形式,区分它们有何意义?

  用于声明文档使用那种标准(HTML/XHTML)一般为严格过度基于框架的html文档

  参加XMl声明可触发,解析方式更改为IE5.5拥有的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

  4.Iez-index问题给父级添加position:

relative

  5.Png透明使用js代码改

  6.Min-height最小高度!

Important解决’

  7.select在ie6下遮盖使用iframe嵌套

  8.为什么没有方法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:

hidden,zoom:

0.08line-height:

1px)

  9.ie6不支持!

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阅读器)

  18.csshack

  

  _marging\\IE6

  +margin\\IE7

  Marging:

0auto\9所有Ie

  Margin\0\\IE8

  Javascript部分

  的typeof返回哪些数据类型

  Objectnumberfunctionbooleanunderfind

  2.例举3种强迫类型转换和2种隐式类型转换?

  强迫〔parseInt,parseFloat,number〕

  隐式〔==–===〕

  3.split()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的方法

  12.JavaScriptthis指针、闭包、作用域

  13.事件委托是什么

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

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

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

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

  canceBubblereturnfalse

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

  ()

  

  

  

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

  动态创立script标签,回调函数

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

  的本地对象,内置对象和宿主对象

  本地对象为arrayobjregexp等可以new实例化

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

  宿主为阅读器自带的document,window等

  19.documentload和documentready的区别

  是在构造和款式加载完才执行js

  原生种没有这个方法,jquery中有$().ready(function)

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

  前者会自动转换类型

  后者不会

  的同源策略

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

  22.编写一个数组去重的方法

  functionoSort(arr)

  {

  varresult={};

  varnewArr=[];

  for(vari=0;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固定定位,这里他所

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 解决方案 > 工作计划

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1