第1页 / 共21页
第2页 / 共21页
第3页 / 共21页
第4页 / 共21页
第5页 / 共21页
第6页 / 共21页
第7页 / 共21页
第8页 / 共21页
Web前端开发工程师经典面试题.pdf
Web前端开发工程师经典面试题（附参考答案）
‣ 下面有关css选择器的说法错误的是？（C）
A. .intro --- 选择 class="intro" 的所有元素。
B. #firstname --- 选择 id="firstname" 的所有元素。
C. div>p --- 选择所有
元素和所有
元素 D. p --- 选择所有
元素 ‣ 如何让一个区块居中?（A、B） A. center B. center-block C. horizontal-center D. vertical-center ‣ 下面列出的浏览器，无webkit内核的是（D） A. chrome B. Safari C. 搜狗浏览器 D. firefox ‣ 下面有关HTML的Doctype和严格模式与混杂模式的描述，错误的是？（C） A. 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档 B. 在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向 后兼容的方式显示 C. DOCTYPE不存在或格式不正确会导致文档以标准模式呈现 D. 浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法 ⻚页码： / 1 21
‣ 下列哪一个是页面载入时会触发什么Dom事件？（C）
A. onchange
B. onaclive
C. onload
D. onresize
‣ 关于canvas不正确的是？（B）
A. canvas是HTML5的一部分，允许脚本动态渲染位图像
B. canvas是作为Flash的替代技术出现
C. canvas拥有多种绘制路径、矩形、圆形、字符及添加图像的方法
D. Internet Explorer自Internet Explorer9起已经可以支持canvas
‣ 浮动会导致页面的非正常显示，一下几种清除浮动的方法，哪个是不推荐使用的？
（C）
A. 在浮动元素末尾添加一个空的标签例如
B. 通过设置父元素overflow值为hidden
C. 父元素也设置浮动
D. 给父元素添加clearfix类
‣ 哪些是正确的辅助类（A、B、C、D）
A. text-muted B. text-success
C. text-info D. text-warning
‣ 关于栅格系统，哪些是正确的（A、B、C、D）
A. col-sm-* B. col-xs-*
C. col-md-* D. col-lg-*
⻚页码：
/ 2 21
‣ CSS3支持下列哪一个标签?（A）
A. box-shadow
B. border
C. background
D. display
‣ 把鼠标移到按钮并点击时，会产生一串什么样的事件？（D）
A. active hove focus
B. foucs hove active
C. hove active foucus
D. hover focus active
‣ 以下位于间的代码片段是做什么用的（B）
1
A. 使得页面编码合乎要求
B. 表示支持响应式设计
C. 支持正常的绘制和缩放
D. 表示针对滚屏进行适当的适配
‣ 下面关于IE、FF下面CSS的解释区别描述正确的有？（C、D）
A. FireFox的div的内嵌div可以把父级的高度撑大，而IE6.0不可以，要自己设置高度。
B. 当设置为三列布局时，FireFox0的float宽度不能达到100％，而IE6.可以。当设置为
两列布局时，两种浏览器都可以。
C. 火狐浏览器中，非float的div前面有同一父级的float的div，此div若有背景图，要使
用clear：both，才能显示背景图，而IE6.0中不用使用clear：both
D. 在[text-decoration:underline]的属性下，IE6.0显示的下划线会比FireFox低一点。
在FireFox中，部分笔画会在下划线的下面1个象素左右。
⻚页码：
/ 3 21
‣ 在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需
要设置下面哪些属性值？（A、D）
A. cellpadding=”0″
B. padding:0
C. margin:0
D. cellspacing=”0″
‣ 在bootstrap中，关于导航条，下列说法正确的是?（A、B、C、D）
A. 应该将被包裹的元素放到navbar-collapse类中
B. 表单应该放置于navbar-form内
C. 可以使用navbar-left和navbar-right来对齐导航条
D. 可以使用navbar-fixed-top和navbar-fixed-bottom来将导航条固定到顶部或底部
‣ 嵌入在HTML文档中的图像格式可以是？（A、C、D）
A. *.gif
B. *.tif
C. *.bmp
D. *.jpg
‣ 下列js可以让一个input的背景颜色变成红色的是？（A）
A. inputElement.style.backgroundColor = 'red';
B. inputElement.backgroundColor = 'red';
C. inputElement.style.backgroundColor = '#0000';
D. inputElement.backgroundColor = ‘#0000';
⻚页码：
/ 4 21
‣ 元素的alt和title有什么异同，选出正确的说法？（B）
A. 不同的浏览器，表现一样
B. alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字
C. alt和title同时设置的时候，title作为图片的替代文字出现，alt是图片的解释文字
D. 以上说法都不正确
‣ 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。请判断这句话的正
确与否。（B）
A. 对
B. 错
‣ 下列哪个操作是W3C标准定义的阻止事件向父容器传递：（C）
A. e.preventDefault()
B. e.cancelBubble=true
C. e.stopPropagation()
D. e.stopImmediatePropagation()
‣ 对于border-radius标签，说法错误的是（B）
A. 表示圆角边框 B. IE8支持良好
C. IE9支持良好 D. firefox支持良好
‣ 下述有关css属性position的属性值的描述，说法错误的是？（B）
A. static：没有定位，元素出现在正常的流中
B. fixed：生成绝对定位的元素，相对于父元素进行定位
C. relative：生成相对定位的元素，相对于元素本身正常位置进行定位。
D. absolute：生成绝对定位的元素，相对于 static 定位以外的第一个祖先元素进行定
位。
⻚页码：
/ 5 21
‣ 下面有关html Doctype的描述，说法错误的是？（D）
A. 它的责任就是告诉浏览器文档使用哪种html或者xhtml规范
B. 不同文档模式主要影响CSS内容的呈现，尤其是浏览器对盒模型的解析
C. 不同浏览器在混杂模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器
的行为根本就没有一致性可言。
D. 如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启严格模式
‣ Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义?
用于声明文档使用那种规范(HTML/XHTML)一般为 严格 过度 基于框架的html文档，
加入XMl声明可触发，解析方式更改为IE5.5 拥有IE5.5的bug。
‣ 前端页面有哪三层构成，分别是什么?作用是什么?
结构层 HTML 表示层 CSS 行为层 js
‣ 对WEB标准以及W3C的理解与认识？
标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链css和js脚本、结
构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被
更广泛的设备所访问、更少的代码和组件，容易维护、改版方便，不需要变动页面内容、
提供打印版本而不需要复制内容、提高网站易用性。
‣ XHTML和HTML有什么区别？
HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言
最主要的不同：
XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。
⻚页码：
/ 6 21
‣ CSS的基本语句构成是?
选择器{属性1:值1;属性2:值2;……}
‣ 行内元素有哪些？块级元素有哪些？CSS的盒模型？
块级元素：div p h1 h2 h3 h4 form ul
行内元素: a b br i span input select
Css盒模型:内容，border ,margin，padding
‣ CSS引入的方式有哪些? link和@import的区别是?
内联 内嵌 外链 导入
区别 ：同时加载
前者无兼容性，后者CSS2.1以下浏览器不支持
Link 支持使用javascript改变样式，后者不可
‣ CSS选择符有哪些?哪些属性可以继承?优先级算法如何计算?内联和important哪
个优先级高?
标签选择符 类选择符 id选择符
继承不如指定 Id>class>标签选择
后者优先级高
‣ 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么?
Ie(Ie内核) 火狐(Gecko) 谷歌(webkit) opear(Presto)
‣ img标签上title与alt属性的区别是什么?
Alt 当图片不显示是 用文字代表。
Title 为该属性提供信息
⻚页码：
/ 7 21
‣ 描述css reset的作用和用途。
Reset重置浏览器的css默认属性，浏览器品种不同，样式不同，然后重置让他们统一。
‣ 写出几种IE6 BUG的解决方法
1. 双边距BUG float引起的 使用display
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. select 在ie6下遮盖 使用iframe嵌套
8. 为什么没有办法定义1px左右的宽度容器(IE6默认的行高造成的，使用
over:hidden,zoom:0.08 line-height:1px)
9.
ie 6 不支持!important
‣ 解释css sprites，如何使用。
Css 精灵 把一堆小的图片整合到一张大的图片上，减轻服务器对图片的请求数量。
‣ 浏览器标准模式和怪异模式之间的区别是什么?
盒子模型 渲染模式的不同
使用 window.top.document.compatMode 可显示为什么模式
‣ 什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处
‣ 什么是语义化的HTML?
直观的认识标签 对于搜索引擎的抓取有好处
⻚页码：
/ 8 21
