1、前端面试大全前端面试大全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?直观的认识
2、标签 对于搜索引擎的抓取有好处,用正确的标签做正确的事情!html语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。5.HTML5 为什么只需要写 !DOCTYPE HTML?HTML5 不基于 SGML,因此不需要对DTD进行引用,但是需要doctype来规范浏览器的行为(让浏览器按照它们应该的方式来运行);而HTML4.01基于SGML,所以需要对DTD进行引用,才能告知浏览器文档所使用的文档类
3、型。6.Doctype作用?标准模式与兼容模式各有什么区别?!DOCTYPE声明位于位于HTML文档中的第一行,处于html 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。7.html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和HTML5?HTML5 现在已经不是 SGML 的子集,主要是关于图像,位置,存储,多任务等功能的增加
4、。绘画 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,fra
5、meset,noframes;支持HTML5新标签:IE8/IE7/IE6支持通过document.createElement方法产生的标签,可以利用这一特性让这些浏览器支持HTML5新标签,浏览器支持新标签后,还需要添加标签默认的样式:8.请描述一下 cookies,sessionStorage 和 localStorage 的区别?cookie在浏览器和服务器间来回传递。 sessionStorage和localStorage不会sessionStorage和localStorage的存储空间更大;sessionStorage和localStorage有更多丰富易用的接口;sessionS
6、torage和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
7、 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外,读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;Position:不会影响布局,能让元素保持可以操作;Clip-path:clip-path 属性还没有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件,浏览器支持度还要低;3.CSS清楚浮动的几种方法(至少两种)使用带clear属性的空元素使用CSS的overflow属性;使用CSS的:after伪元素;使用邻接元素处理;4.CSS居中(包括水平居中和垂直居中)内联元素居中方案水平居中设置:1.行内元素设置
8、 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.定宽块状元素设置 左右 mar
9、gin 值为 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
10、:auto这个必须不要忘记了;利用display:table-cell属性使内容垂直居中;使用css3的新属性transform:translate(x,y)属性;使用:before元素;5.写出几种IE6 BUG的解决方法双边距BUG float引起的 使用display3像素问题 使用float引起的 使用dislpay:inline -3px超链接hover 点击后失效 使用正确的书写顺序 link visited hover activeIe z-index问题 给父级添加position:relativePng 透明 使用js代码 改Min-height 最小高度 !Importan
11、t 解决select 在ie6下遮盖 使用iframe嵌套为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的,使用over:hidden,zoom:0.08 line-height:1px)6.对于SASS或是Less的了解程度?喜欢那个?语法介绍7.Bootstrap了解程度特点,排版,插件的使用;8.页面导入样式时,使用link和import有什么区别?link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而import是CSS提供的,只能用于加载CSS;页面被加载的时,link会同时被加载,而import引用的CSS会等到页面被加载完再
12、加载;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)子选择器(ul li)后代选
13、择器(li a)通配符选择器( * )属性选择器(arel = external)伪类选择器(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 比 内联优先级高11.CSS3有哪些新特性?CSS3实现圆角(border-radius:8px),阴影
14、(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返回哪些数据类型bject number function boolean underfind;2.例举3种强制类型转换和2种隐式类型转换?强制(parseInt,parseFl
15、oat,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数据使用eval parse,鉴于安全性考虑 使
16、用parse更靠谱;7.事件委托是什么让利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!8.闭包是什么,有什么特性,对页面有什么影响?简要介绍你理解的闭包闭包就是能够读取其他函数内部变量的函数。9.添加 删除 替换 插入到某个接点的方法obj.appendChidl()obj.innersetBeforeobj.replaceChildobj.removeChild10.说一下什么是javascript的同源策略?一段脚本只能读取来自于同一来源的窗口和文档的属性,这里的同一来源指的是主机名、协议和端口号的组合11.编写一个b继承a的方法;function A(name) thi
17、s.name = name; this.sayHello = function()alert(this.name+” say Hello!”); function B(name,id) this.temp = A; this.temp(name); /相当于new A(); delete this.temp; this.id = id; this.checkId = function(ID)alert(this.id=ID); 12.如何阻止事件冒泡和默认事件function stopBubble(e) if (e && e.stopPropagation) e.stopPro
18、pagation() else window.event.cancelBubble=truereturn false13.下面程序执行后弹出什么样的结果?function fn() this.a = 0; this.b = function() alert(this.a) fn.prototype = b: function() this.a = 20; alert(this.a); , c: function() this.a = 30; alert(this.a); var myfn = new fn(); myfn.b(); myfn.c();14.谈谈This对象的理解。this是js
19、的一个关键字,随着函数使用场合不同,this的值会发生变化。但是有一个总原则,那就是this指的是调用函数的那个对象。this一般情况下:是全局对象Global。 作为方法调用,那么this就是指这个对象15.下面程序的结果function fun(n,o) console.log(o) return fun:function(m) return fun(m,n); ; var a = fun(0); a.fun(1); a.fun(2); a.fun(3);var b = fun(0).fun(1).fun(2).fun(3);var c = fun(0).fun(1); c.fun(2);
20、 c.fun(3);/答案:/a: undefined,0,0,0/b: undefined,0,1,2/c: undefined,0,1,116.下面程序的输出结果var name = World!; (function () if (typeof name = undefined) var name = Jack; console.log(Goodbye + name); else console.log(Hello + name); )();17.了解Node么?Node的使用场景都有哪些?高并发、聊天、实时消息推送18.介绍下你最常用的一款框架jquery,rn,angular等;19
21、.对于前端自动化构建工具有了解吗?简单介绍一下Gulp,Grunt等;20.介绍一下你了解的后端语言以及掌握程度其它1.对Node的优点和缺点提出了自己的看法?(优点) 因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求, 因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。 此外,与Node代理服务器交互的客户端代码是由javascript语言编写的, 因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。(缺点) Node是一个相对新的开源项目,所以不太稳定,它总是一直在变, 而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails
22、当年的样子。 2.你有哪些性能优化的方法?(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 Expr
23、ession(css表达式)又称Dynamic properties(动态属 性)。(7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。(8) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示div+css布局慢。对普通的网站有一个统一的思路, 就是尽量向前端优化、减少数据库操作、减少磁盘IO。向前端优化指的是,在不影响功能和体验的情况下,能在浏览器执行的不要在服务端执行,能在缓存服务器 上直接返回的不要到应用服务器,程序能直接取得的结果不要到外部取得,本机内能取得的数据不要到远程取,内存能取到的不要到磁盘取,缓存中有的不要去数据 库查询。减少数据库操作指减少更新次数、缓存结果减少查询次数、将数据库执行的操作尽可能的让你的
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1