web前端js面试题及参考答案
web前端js面试题及参考答案
学习啦在线学习网 面试题在web前端js求职者在面试求职考核中重要的组成部分，以下是学习啦小编为大家整理的：web前端js面试题及参考答案，仅供大家参考!
web前端js面试题及参考答案
学习啦在线学习网 1.WEB标准以及W3C标准是什么?
标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离。
1.1div中img怎么水平和垂直居中?
Div{width: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标签的readonly 和disabled属性有何区别?
readonly=“readonly”是只读，不可以修改， disabled=“disabled”是禁用，整个文本框是显示灰色状态
学习啦在线学习网 form 中method是数据传递的方式，action是与后台数据库提交的
学习啦在线学习网 2.xhtml和html有什么区别
XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素。
3.行内元素有哪些?块级元素有哪些?
行内元素: a b img em br i span input select
学习啦在线学习网 块级元素：div p h1-h6 form ul dl ol table
学习啦在线学习网 4.行内元素和块级元素有什么区别?
学习啦在线学习网 行内元素不可以设置宽高，不独占一行；
块级元素可以设置宽高，独占一行。
学习啦在线学习网 5.我想让行内元素跟上面的元素距离10px，加margin-top和padding-top可以吗? margin-top,padding-top无效
6.CSS的盒模型由什么组成?
内容(width,height)，border ,margin，padding
6.1 简述div+css布局的优势?
学习啦在线学习网 (1)符合w3c标准；(2)兼容性好；(3)有利于搜索引擎很友好；(4)样式的调整更加方便；(5)css简洁的代码，能使样式和结构分离；
学习啦在线学习网 7.说说display属性有哪些?可以做什么?
学习啦在线学习网 display: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 < li)
6.后代选择器(li a)
学习啦在线学习网 7.通配符选择器( * )
学习啦在线学习网 8.属性选择器(a[rel = "external"])
9.伪类选择器(a: hover, li: nth - child)
9.哪些css属性可以继承?
学习啦在线学习网 可继承： font-size font-family color, ul li dl dd dt；(字体属性和列表属性)
学习啦在线学习网 不可继承 ：border padding margin width height ；
10.css优先级算法如何计算?
学习啦在线学习网 !important > id > class > 标签
!important 比 内联优先级高
* 优先级就近原则，样式定义最近者为准；
* 以最后载入的样式为准；
11.text-align:center和line-height有什么区别?
学习啦在线学习网 text-align是水平对齐，line-height是行间。
学习啦在线学习网 12.前端页面由哪三层构成，分别是什么?作用是什么?
结构层 Html(页面结构内容，骨架) 表示层 CSS(网页的样式和外观) 行为层 js(实现网页的交互，动画效果)
学习啦在线学习网 13.标签上title与alt属性的区别是什么?
Alt是图片属性，让搜索引擎认识你的图片。当图片不显示的时候显示。
title是网站标题，是seo中最重要的属性。
14.使用css 精灵有什么优缺点?
学习啦在线学习网 优： Css 精灵 把一堆小的图片整合到一张大的图片上，减轻HTTP的请求数量(HTTP连接数对网站的加载性能有重要影响)。能够提升网站性能
缺：可维护性方面，如要改变局部一张小图，就要很繁琐，而且算图片的位置也很麻烦；
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)或：overflow:hidden；
3.是用afert伪元素清除浮动(用于非IE浏览器)
学习啦在线学习网 .Clearfix:after{ content:””； display:block； height:0； overflow:hidden； clear:both；} .clearfix{ zoom:1；}
学习啦在线学习网 18.1 HTML doctype 有哪些常用的类型?
学习啦在线学习网 HTML4.01 XHTML1.0 HTML5 18.2 什么是css hack?(怎么让css很好的兼容各主流浏览器)
，CSS hack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSS hack为不同版本的浏览器定制编写不同的CSS效果。
学习啦在线学习网 有三种表达方式：(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的区别?
1. link属于XHTML标签，而@import完全是CSS提供的一种方式。
学习啦在线学习网 2.加载顺序的差别：前者在页面加载的时候就同时加载进来，而后者是在页面完全加载完再加载
3.兼容性的差别：前者可以兼容全部，后者只有在IE5以上才能被识别；
4. 使用JavaScript DOM控制样式的差别：只能控制link标签，不能控制@import
学习啦在线学习网 19.display:none和visibility:hidden的区别是什么?
visibility: hidden----将元素隐藏，但是还占着位置。
学习啦在线学习网 display: none----将元素的显示设为无，不占任何的位置。
学习啦在线学习网 19.1五大浏览器的内核
学习啦在线学习网 火狐：-moz- IE：-ms- 欧朋：-o- 谷歌和苹果：-webkit-
学习啦在线学习网 20.说出几种IE6 BUG的解决方法
1.双边距BUG float引起的 解决：使用display:inline
2.3像素问题 使用float引起的 解决：使用dislpay:inline -3px
学习啦在线学习网 3.超链接hover 点击后失效 解决：使用正确的书写顺序 link visited hover active
学习啦在线学习网 4.Ie z-index问题 解决：给父级添加position:relative
学习啦在线学习网 5.Png 透明 解决：使用js代码
6.Min-height 最小高度 !Important 解决
学习啦在线学习网 7.img出现边框 border:none；
学习啦在线学习网 8.为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的overflow:hidden,zoom:0.08 line-height:1px可以解决)
21.域名和服务器相关知识?
22.HTTP状态码都有那些。
200 OK //客户端请求成功
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，输入了错误的URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常
学习啦在线学习网 23.如何优化网页加载速度?
1.减少css，js文件数量及大小(减少重复性代码，代码重复利用)，压缩CSS和Js代码
2.图片的大小
学习啦在线学习网 3.把css样式表放置顶部，把js放置页面底部
4.减少http请求数
5.使用外部 Js 和 CSS
学习啦在线学习网 24.position属性absolute与relative的区别?
学习啦在线学习网 absolute绝对定位 //相对于浏览器定位
relative相对定位 //相对于前面的容器定位
25.HTML5 的有那些新标签?
头部导航链接侧边栏列表内容脚部图片块容器 25.1 HTML5有哪些新特性?
学习啦在线学习网 用于绘画的 canvas 元素
•用于媒介回放的 video 和 audio 元素
•对本地离线存储的更好的支持
•新的特殊内容元素，比如 article、footer、header、nav、section
•新的表单控件，比如 calendar、date、time、email、url、search
学习啦在线学习网 25.2 HTML5有哪些新的API?
1. 选择器：querySelector，querySelectorAll
document. querySelectorAll(“.head”)；
2. Canvas API：有关动态产出与渲染图形、图表、图像和动画的API。
3. 音频与视频 API。
4. 离线存储API
学习啦在线学习网 5. 通讯API
6. 文件操作
7. 地理位置API
学习啦在线学习网 8. 拖放API
学习啦在线学习网 在web前端js的求职面试中，面试自我介绍跟回答面试题起着同样重要的作用，下面是学习啦小编为大家精心推荐的web前端js面试自我介绍范文，希望能够对您有所帮助。
web前端js面试自我介绍范文
学习啦在线学习网 我是**工程学院计算机科学系的一名应届毕业学生，再经过四年的磨练与成长后，我满怀希望地走进社会这个更加博大的课堂。
四年的大学生活中，无论是在知识能力，还是在个人素质修养方面，我都受益非浅。在师友的严格教益及个人的努力下，我具备了扎实的专业基础知识，系统地掌握了计算机网络的有关理论;熟悉涉外工作常用礼仪;具备较好的英语听、说、读、写、译等能力;能熟练操作计算机办公软件。同时，我利用课余时间广泛地涉猎了大量书籍，不但充实了自己，也培养了自己多方面的技能。更重要的是，严谨的学风和端正的学习态度塑造了我朴实、稳重、创新的性格特点。
学习啦在线学习网 此外，我还积极地参加各种社会活动，抓住每一个机会，锻炼自己。大学四年，我深深地感受到，与优秀学生共事，使我在竞争中获益;向实际困难挑战，让我在挫折中成长。祖辈们教我勤奋、尽责、善良、正直;黄河水利学院培养了我实事求是、开拓进取的作风。
怀着自信，我向您推荐我自己，如果有幸成为贵公司的一员，我愿从小事做起，从现在做起，虚心尽责、勤奋工作，在实践中不断学习，发挥自己的主动性、创造性，竭力为贵公司的发展添一份光彩。
看过“web前端js面试题及参考答案”的人还看了：