web前端面试题及答案

1、1.WEB 标准以及 W3C 标准是什么？标签闭合、标签小写、不乱嵌套、使用外链css 和js、结构行为表现的分离。1.1div中img怎么水平和垂直居中？Divwidth:200px;height:200px;text-align:center;font-size:0;overflow:hidden;line-height:200px; _line-height:178px;/*兼容IE6*/ Img vertical-align:middle;1.2 HTML中没有单位的属性是？z-index:1; zoom:1; font-weight:200;1.3 form 表单中 input 标签

2、的 readonly和 disabled 属性有何区别？readonly=“ readonly”是只读，不可以修改， disabled=“ disabled”是禁用，整个文本框是显示灰色状态form 中 method 是数据传递的方式，action 是与后台数据库提交的2.xhtml 和 html 有什么区别XHTML元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素。3.行内元素有哪些？块级元素有哪些？行内元素 : a b imgem br i span input select块级元素： div p h1-h6 form ul dl ol table4.行内元素和块级元素有什么区别

3、？行内元素不可以设置宽高，不独占一行;块级元素可以设置宽高，独占一行。5.我想让行内元素跟上面的元素距离10px，加 margin-top和 padding-top可以吗？margin-top,padding-top 无效6.CSS 的盒模型由什么组成？内容（ width,height ）， border ,margin ， padding6.1 简述 div+css 布局的优势？（ 1）符合 w3c 标准；（ 2）兼容性好；（ 3）有利于搜索引擎很友好；（ 4）样式的调整更加方便；（ 5） css简洁的代码，能使样式和结构分离；7.说说 display 属性有哪些？可以做什么？display

4、:block 行内元素转换为块级元素display:inline 块级元素转换为行内元素display:inline-block转为内联元素display:box(css3 新增的弹性布局属性)8.CSS 选择符有哪些？1.id 选择器（# myid ）2.类选择器（ .myclassname）3.标签选择器（div, h1, p）4.相邻选择器（h1 + p）5.子选择器（ ul id class 标签!important比 内联优先级高*优先级就近原则，样式定义最近者为准;* 以最后载入的样式为准 ;11.text-align:center和 line-height 有什么区别？text-

5、align 是水平对齐，line-height 是行间。12.前端页面由哪三层构成，分别是什么？作用是什么？结构层Html( 页面结构内容，骨架) 表示层CSS（网页的样式和外观）行为层js（实现网页的交互，动画效果）13.标签上 title 与 alt 属性的区别是什么？Alt 是图片属性，让搜索引擎认识你的图片。当图片不显示的时候显示。title 是网站标题，是seo 中最重要的属性。14.使用 css 精灵有什么优缺点？优：Css 精灵把一堆小的图片整合到一张大的图片上，减轻HTTP 的请求数量（HTTP连接数对网站的加载性能有重要影响）。能够提升网站性能缺：可维护性方面，如要改变局部一

6、张小图，就要很繁琐，而且算图片的位置也很麻烦；15.什么是语义化的HTML ？标签使用的合理性，对于搜索引擎的抓取有好处。16.b 标签和 strong 标签 ,i 标签和 em 标签的区别？后者有语义，前者则无。17.tite 与 h1 的区别。title 侧重于网站信息标题从文章而言，h1 侧重于文章主题站在 seo 的角度看，好网站少不了title ，好文章少不了h1 标题， title 权重高于h1。18.清除浮动的几种方式，各自的优缺点1.使用空标签清除浮动clear:both（缺点，增加无意义的标签）2.使用 overflow:auto （使用 zoom:1 用于兼容IE ）或：

7、overflow:hidden;3.是用 afert 伪元素清除浮动(用于非 IE 浏览器 ).Clearfix:after content: ”;display:block; height:0; overflow:hidden; clear:both;.clearfix zoom:1;18.1 HTML doctype有哪些常用的类型？HTML4.01XHTML1.0HTML518.2 什么是 css hack？（怎么让css很好的兼容各主流浏览器），CSShack 的目的就是使你的CSS 代码兼容不同的浏览器。当然，我们也可以反过来利用 CSS hack为不同版本的浏览器定制编写不同的CS

8、S 效果。有三种表达方式：（ 1）.css 内部 hack ：主要针对类内部的 hack ，比如 IE6 能识别“ _ ”“ *”,IE7 能识别“ *”等（也叫 类内属性前缀法 ）；（ 2） .选择器 hack ：例如 IE6 能 *html .class; IE7 能识别 *+html .class （也叫 选择器前缀法 ）; （ 3）html 头部引用（ if IE ）hack ：针对所有 IE ： ，针对 IE6 及以下版本： ，这类 Hack 不仅对 CSS 生效，对写在判断语句里面的所有代码都会生效（也叫 条件注释法 ）。18.3 请简述 css 加载方式 link和import的

9、区别？1. link 属于 XHTML 标签，而 import 完全是 CSS 提供的一种方式。2加载顺序的差别：前者在页面加载的时候就同时加载进来，而后者是在页面完全加载完再加载3兼容性的差别：前者可以兼容全部，后者只有在IE5 以上才能被识别；4. 使用 JavaScript DOM控制样式的差别：只能控制link 标签，不能控制import19.display:none 和 visibility:hidden的区别是什么？visibility: hidden-将元素隐藏，但是还占着位置。display: none- 将元素的显示设为无，不占任何的位置。19.1 五大浏览器的内核火狐： -

10、moz-IE ： -ms-欧朋： -o-谷歌和苹果：-webkit-20.说出几种 IE6 BUG 的解决方法1.双边距 BUG float 引起的解决：使用display:inline2.3 像素问题使用 float 引起的解决：使用dislpay:inline -3px3.超链接 hover 点击后失效解决：使用正确的书写顺序link visited hover active4.Ie z-index 问题解决：给父级添加position:relative5.Png 透明解决：使用js 代码6.Min-height最小高度！ Important 解决7.img 出现边框border:none

11、;8. 为 什 么 没 有 办 法 定 义 1px 左 右 的 宽 度 容 器 （ IE6 默 认 的 行 高 造 成 的overflow:hidden,zoom:0.08 line-height:1px可以解决）21.域名和服务器相关知识？22.HTTP 状态码都有那些。200 OK/ 客户端请求成功400Bad Request /客户端请求有语法错误，不能被服务器所理解403Forbidden/ 服务器收到请求，但是拒绝提供服务404Not Found/ 请求资源不存在，输入了错误的URL500Internal Server Error / 服务器发生不可预期的错误503Server Un

12、available /服务器当前不能处理客户端的请求，一段时间后可能恢复正常23.如何优化网页加载速度？1.减少 css， js 文件数量及大小(减少重复性代码，代码重复利用)，压缩 CSS 和 Js 代码2.图片的大小3.把 css 样式表放置顶部，把js 放置页面底部4.减少 http 请求数5.使用外部Js 和 CSS24.position 属性 absolute 与 relative 的区别？absolute 绝对定位/相对于浏览器定位relative 相对定位/ 相对于前面的容器定位25.HTML5的有那些新标签？ 头部 导航 链接 侧边 栏 列表 内 容 脚部 图片 块容器25.1

13、 HTML5有哪些新特性？用于绘画的canvas元素?用于媒介回放的video和 audio元素?对本地离线存储的更好的支持?新的特殊内容元素，比如article 、 footer 、 header 、 nav 、 section?新的表单控件，比如calendar 、 date 、 time 、 email 、 url 、search25.2 HTML5有哪些新的API ？1. 选择器： querySelector， querySelectorAll document. querySelectorAll( “.head” );2.Canvas API：有关动态产出与渲染图形、图表、图像和动画

14、的API 。3. 音频与视频 API 。4. 离线存储 API5. 通讯 API6. 文件操作7. 地理位置 API8. 拖放 API26.CSS3 新增伪类有那些？p:first-of-type选择属于其父元素的首个 元素的每个 元素。p:last-of-type选择属于其父元素的最后 元素的每个 元素。p:only-of-type选择属于其父元素唯一的 元素的每个 元素。p:only-child选择属于其父元素的唯一子元素的每个 元素。p:nth-child(2)选择属于其父元素的第二个子元素的每个 元素。:enabled、:disabled 控制表单控件的禁用状态。:checked，单选

15、框或复选框被选中。27 1 简述 call 和 apply 的区别？两者的作用是一样的，只是参数列表不同27.2 js 中= 和 = 的区别？= 是判断值是否相等 （先转换类型再判断）, null = underfined这两个是相等的 = 是判断值及类型是否完全相等。（直接判断），注意：NaN ！=NaN的， NaN 不等于任何数，包括他自身（奇怪的东西）27.3 js 中 的基本数据类型？数值类型： number字符串类型： string布尔类型： boolean （ true 和 false ）对象类型：abject（ null ） 未定义类型：underfined （ underfin

16、ed ）27.4什么是 JavaScript闭包，有何作用？一个拥有许多变量和绑定了这些变量的环境的表达式 （通常是一个函数） ，因而这些变量也是该表达式的一部分。闭包的特点：1.作为一个函数变量的一个引用，当函数返回时，其处于激活状态。2.一个闭包就是当一个函数返回时，一个没有释放资源的栈区。27.5 jQuery和 JavaScript相比的优缺点？优点：实现了脚本和页面的分离；最少的代码做最多的事（这也是jQuery 的口号）；性能更好，几乎解决了所有的浏览器兼容问题；缺点：不能向后兼容；插件的兼容性（各版本之间不能很好的兼容），在同一个页面使用多个插件可能会出现冲突现象；稳定性方面也有

17、待提高；27.6 全局变量和局部变量有什么区别？在 JavaScript 中一对大括号代表着一个独立的空间，在这个空间当中声明的变量相对这个大括号来说就是全局变量，而相对其他大括号来说就是局部变量，局部变量只能在自己的大括号里被使用，其他大括号是不能调用的。28.谈谈 This 对象的理解。this 是 js 的一个关键字，随着函数使用场合不同，this 的值会发生变化。但是总有一个原则， 那就是 this 指的是调用函数的那个对象。this 一般情况下：是全局对象Global 。 作为方法调用，那么this 就是指这个对象28.1 前端技术有哪些？还有哪些相关的书籍？JavaScript j

18、Query HTML5 CSS3 （移动端框架： jQuery mobile Phonegap Bootstra 移动端开发工具等）精通 JavaScript锋利的 jQuery 编写高质量代码： web 前端开发修炼之道SEO 教程：搜索引擎优化入门与进阶29.documen.write和 innerHTML有什么区别？DOM 的 innerHTML是 DOM 元素对象的一个属性而 write 是 document 对象的一个方法29.1 用 JavaScript怎么判断谷歌浏览器？var isChrome = window.navigator.userAgent.indexOf(Chrom

19、e) != -1; alert(isChrome);if (isChrome) alert( 是 Chrome 浏览器 ); else alert( 不是 Chrome 浏览器 );30.JSON 是什么？JSON 是一种轻量级的数据交换格式。它是基于JS 的一个子集。数据格式简单, 易读写 ,占用带宽小age:12, name:back31.ajax是什么 ?ajax 的交互模型 ?同步和异步的区别?允许浏览器与服务器端通信（进行数据交换）而无需刷新当前页面的技术1. 通过异步模式，提升了用户体验2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用3. Ajax 在客户

20、端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。2. Ajax 的最大的特点是什么。Ajax 可以实现动态不刷新（局部刷新）3.ajax 的缺点：1、 ajax 不支持浏览器back 按钮。2、安全问题AJAX 暴露了与服务器交互的细节。3、对搜索引擎的支持比较弱。4、破坏了程序的异常机制。5、不容易调试。32.你常用那些js 框架？jQuerySencha Ext JS（4.0 版本后要收费）33.工作流程，你怎么来实现页面设计图，你认为前端应该如何高质量完成工作?34.介绍项目经验、合作开发、独立开发。35.开发过程中遇到困难，如何解决。36.对前端界面工程师这个

21、职位是怎么样理解的？它的前景会怎么样？前端是最贴近用户的程序员，比后端、数据库、产品经理、运营、安全都近。1、实现界面交互2、提升用户体验3、有了 Node.js，前端可以实现服务端的一些事情前端是最贴近用户的程序员，前端的能力就是能让产品从90 分进化到100 分，甚至更好，参与项目，快速高质量完成实现效果图，精确到1px ；与团队成员，UI 设计，产品经理的沟通；做好的页面结构，页面重构和用户体验；处理 hack，兼容、写出优美的代码格式；针对服务器的优化、拥抱最新前端技术。其它相关的加分项：1. 都使用和了解过哪些编辑器 ?都使用和了解过哪些日常工具 ?2. 都知道有哪些浏览器内核 ?开发过的项目都兼容哪些浏览器 ?3. 瀑布流布局或者流式布局是否有了解4. HTML5 都有哪些新的 API?5. 都用过什么代码调试工具 ?6. 是否有接触过或者了解过重构。7.你遇到过比较难的技术问题是？你是如何解决的？8.什么叫优雅降级和渐进增强？优雅降级 /平稳退化： Web 站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代