前端面试大全

前端面试大全HTML面试题1.XHTML和HTML有什么区别HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言最主要的不同：XHTML元素必须被正确地嵌套。XHTML元素必须被关闭。标签名必须用小写字母。XHTML文档必须拥有根元素2.前端页面有哪三层构成，分别是什么?作用是什么?结构层Html表示层CSS行为层js;3.你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?Ie(Ie内核)火狐（Gecko）谷歌（webkit,Blink）opera(Presto),Safari(wbkit)4.什么是语义化的HTML?直观的认识标签对于搜索引擎的抓取有好处，用正确的标签做正确的事情！html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO。使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。5.HTML5为什么只需要写!DOCTYPEHTML？HTML5不基于SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。6.Doctype作用？标准模式与兼容模式各有什么区别?!DOCTYPE声明位于位于HTML文档中的第一行，处于html标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。7.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移除的元素纯表现的元素：basefont，big，center，font,s，strike，tt，u；对可用性产生负面影响的元素：frame，frameset，noframes；支持HTML5新标签：IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式：8.请描述一下cookies，sessionStorage和localStorage的区别？cookie在浏览器和服务器间来回传递。sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大；sessionStorage和localStorage有更多丰富易用的接口；sessionStorage和localStorage各自独立的存储空间；9.如何实现浏览器内多个标签页之间的通信?调用localstorge、cookies等本地存储方式CSS面试题1.简要说一下CSS的元素分类块级元素：div,p,h1,form,ul,li;行内元素:span,a,label,input,img,strong,em;2.CSS隐藏元素的几种方法（至少说出三种）Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;Visibility:与opacity唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;Display:display设为none任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;Position:不会影响布局，能让元素保持可以操作;Clip-path:clip-path属性还没有在IE或者Edge下被完全支持。如果要在你的clip-path中使用外部的SVG文件，浏览器支持度还要低;3.CSS清楚浮动的几种方法（至少两种）使用带clear属性的空元素使用CSS的overflow属性；使用CSS的:after伪元素；使用邻接元素处理；4.CSS居中（包括水平居中和垂直居中）内联元素居中方案水平居中设置：1.行内元素设置text-align:center；2.Flex布局设置display:flex;justify-content:center;(灵活运用,支持Chroime，Firefox，IE9+)垂直居中设置：1.父元素高度确定的单行文本（内联元素）设置height=line-height；2.父元素高度确定的多行文本（内联元素）a:插入table（插入方法和水平居中一样），然后设置vertical-align:middle；b:先设置display:table-cell再设置vertical-align:middle；块级元素居中方案水平居中设置：1.定宽块状元素设置左右margin值为auto；2.不定宽块状元素a:在元素外加入table标签（完整的，包括table、tbody、tr、td），该元素写在td内，然后设置margin的值为auto；b:给该元素设置displa:inine方法；c:父元素设置position:relative和left:50%，子元素设置position:relative和left:50%；垂直居中设置：使用position:absolute（fixed）,设置left、top、margin-left、margin-top的属性;利用position:fixed（absolute）属性，margin:auto这个必须不要忘记了;利用display:table-cell属性使内容垂直居中;使用css3的新属性transform:translate(x,y)属性;使用:before元素;5.写出几种IE6BUG的解决方法双边距BUGfloat引起的使用display3像素问题使用float引起的使用dislpay:inline-3px超链接hover点击后失效使用正确的书写顺序linkvisitedhoveractiveIez-index问题给父级添加position:relativePng透明使用js代码改Min-height最小高度！Important解决’select在ie6下遮盖使用iframe嵌套为什么没有办法定义1px左右的宽度容器（IE6默认的行高造成的，使用over:hidden,zoom:0.08line-height:1px）6.对于SASS或是Less的了解程度？喜欢那个？语法介绍7.Bootstrap了解程度特点，排版，插件的使用;8.页面导入样式时，使用link和@import有什么区别？link属于XHTML标签，除了加载CSS外，还能用于定义RSS,定义rel连接属性等作用；而@import是CSS提供的，只能用于加载CSS;页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;import是CSS2.1提出的，只在IE5以上才能被识别，而link是XHTML标签，无兼容问题;9.介绍一下CSS的盒子模型？有两种，IE盒子模型、标准W3C盒子模型；IE的content部分包含了border和pading;盒模型：内容(content)、填充(padding)、边界(margin)、边框(border).10.CSS选择符有哪些？哪些属性可以继承？优先级算法如何计算？CSS3新增伪类有那些？id选择器（#myid）类选择器（.myclassname）标签选择器（div,h1,p）相邻选择器（h1+p）子选择器（ulli）后代选择器（lia）通配符选择器（*）属性选择器（a[rel=external]）伪类选择器（a:hover,li:nth-child）可继承的样式：font-sizefont-familycolor,ULLIDLDDDT;不可继承的样式：borderpaddingmarginwidthheight;优先级就近原则，同权重情况下样式定义最近者为准;优先级为:code!important>id>spanclass=spanclass=class/span>spanclass=tag/span/spanimportant比内联优先级高/code11.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选择器多背景rgbaJavaScript面试题1.javascript的typeof返回哪些数据类型Ｏbjectnumberfunctionbooleanunderfind;2.例举3种强制类型转换和2种隐式类型转换?强制（parseInt,parseFloat,number）隐式（==–===）；3.数组方法pop()push()unshift()shift()Push()尾部添加pop()尾部删除Unshift()头部添加shift()头部删除4.ajax请求的时候get和post方式的区别?一个在url后面一个放在虚拟载体里面有大小限制安全问题应用不同一个是论坛等只需要请求的，一个是类似修改密码的;5.call和apply的区别Object.call(this,obj1,obj2,obj3)Object.apply(this,arguments)6.ajax请求时，如何解释json数据使用evalparse,鉴于安全性考虑使用parse更靠谱;7.事件委托是什么让利用事件冒泡的原理，让自己的所触发的事件，让他的父元素代替执行！8.闭包是什么，有什么特性，对页面有什么影响?简要介绍你理解的闭包闭包就是能够读取其他函数内部变量的函数。9.添加删除替换插入到某个接点的方法obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild10.说一下什么是javascript的同源策略？一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合11.编写一个b继承a的方法;codespanclass=spanclass=function/spanspanclass=A/spanspanclass=(name)/span/span{spanclass=this/span.name=name;spanclass=this/span.sayHello=spanclass=spanclass=function/spanspanclass=()/span/span{alert(spanclass=this/span.name+”sayHello!”);};}spanclass=spanclass=function/spanspanc