剑客
关注科技互联网

魔法哥 2013 笔试题曝光(附完整解答)

简介

这是我在 2013 年整理的一套笔试题,用于在面试前快速判断候选人的综合素质,要么快速了断,要么为后续的面谈提供切入点。为满足 “快速” 的要求,题型以选择题为主,确保候选人可以在 30 分钟内做完。

显然,其中有些内容已经过时了。尽管如此,我相信这套题还是有一定的参考价值,今天完全公开。我会在每道题后面附上出题意图、解题思路、参考答案或评分标准。

如何评分

试卷共包含 20 道题,每题 5 分,总分 100 分。候选人得分达到 50 分即可初步判定为中级前端工程师。(其实不需要等总分累计出来,在批卷过程中就能作出判断了,得分是给 HR 看的。)

如果你有兴趣的话,可以遮住答案自己做一遍,然后记一下分。

HTML

1、在编写 HTML 4.01 文档时,以下哪几种写法是符合规范的?___(选择)

在编写 XHTML 文档时,以下哪几种写法是符合规范的?___(选择)

在编写 HTML 5 文档时,以下哪几种写法是符合规范的?___(选择)

  • A. <input type="text" name="username" />
  • B. <input type="text" name="username">
  • C. <input type=text name=username>
  • D. <INPUT TYPE="text" NAME="username">

出题意图:这道题在现在看来已经严重过时了,有点 “回字的几种写法” 的味道。当时是想考察候选人对 HTML 语法演进的了解,答错也没关系。

解题思路:现在已经没 HTML 4.01 和 XHTML 什么事儿了,略过,我们主要来看 HTML5。HTML5 的设计原则是尊重现状、保持良好的向后兼容性,所以以上四种写法都是合法的。

2、DTD 是什么?有什么作用?(简答)

出题意图:DTD 是 HTML 规范中比较基础的部分,正经学过 HTML 的人应该都能答得上来一两句。

解题思路:

  • 首先要说字面的意思,DTD 全称 “Document Type Definition”,即文档类型定义。它源于 XML 规范,用于定义当前文档中的元素、元素的属性、元素之间的结构关系等基本规则。(可惜绝大多数候选人往往说不清楚这一条。)
  • 接下来要说一下 DTD 怎么写,现在一般用哪种 DTD。(由于涉及工作实践,大多数人都可以答出这一条。)
  • 最后要说 DTD 对浏览器渲染模式的影响。(少部分人能够提及这一点。如果能讲清楚浏览器的 “标准模式” 和 “怪癖模式” 无疑是加分的。)

3、 <label> 标签的作用是什么?(简答)

出题意图:如果能答好这一题,说明候选人对 HTML 表单有不错的理解。而表单是 HTML 最基本的交互功能,前端工程师必须深入掌握。

解题思路:

  • 首先,还是从字面意思说起。顾名思义,label 是 “标签” 的意思。
  • 然后谈作用。在 HTML 中, <label> 标签用于补充描述表单控件,以提供更好的体验(包括阅读上的体验和交互上的体验)和可访问性(对盲人用户更友好)。

4、哪些标签在 HTML 4.01 规范中已经被弃用?(选择)

  • A. <em>
  • B. <b>
  • C. <center>
  • D. <iframe>
  • E. <font>
  • F. <strong>

出题意图:这道题略过时。试图考察候选人对 HTML 规范演进的了解,以及 “语义” 的概念。

评分标准:只要能把纯粹表达样式的标签挑出来就行了,不需要完全正确。其实我自己也不能完全记清楚;而且在 HTML5 中像 <b> 这样原本只表达样式的标签又被赋于了新的语义。

5、在 HTML5 中,表单输入控件( <input> 标签)新增的类型有哪些?(简答)

出题意图:考察候选人对表单的关注、对 HTML5 规范的了解。

参考答案: numberemailtelurlrangecolor 等。

评分标准:每正确写出一项即可得 1 分,封顶 5 分。

CSS

1、为 HTML 页面加载外部的 CSS 文件,有哪些方式?(简答)

出题意图:考察常规实践、对 CSS 规范的了解。

解题思路:

  • 先说最常见、最普通的:通过 <link> 标签的 href 属性引入一个外部的 CSS 文件,同时 <link> 标签需要包含 rel="stylesheet" 属性。(能清晰完整答出这一点,可以得 3 分。)
  • 再说冷门一些的:在 <style> 标签中使用 @import 指令也可以引入一个外部的 CSS 文件。
  • 最后扩散一下:通过 JS 生成上述标签也可以达到相同效果。

2、当应用了 p {margin: 10px 0;} 这条样式之后,两个相邻段落的垂直距离是多少?(选择)

  • A. 0px
  • B. 10px
  • C. 20px
  • D. 40px

出题意图:考察 CSS 实践中常见的 “外边距重叠” 现象。这道题忽略了一些前提(比如文本方向、 p 身上的是否存在其它样式等),但候选人应该可以领会这道题的考点。

参考答案:B

3、CSS Sprites 有哪些优点和缺点?(简答)

出题意图:这是一道主观题,考察候选人在实践中的经验和思考。如果候选人在这里一个字都没有写,在排除耍大牌的可能性之后,可以直接送走。

参考答案:

  • 优点:把对多张图片的请求合为一次,减少请求数,有益于前端性能;有预加载效果,有益于用户体验。
  • 缺点:合并图片的制作成本和维护成本较高。

4、当不再需要支持 IE6/7 时,我们可以放心地使用哪些 CSS 技术?(简答)

出题意图:这道题稍显过时,但在当时很有现实意义。在国内的用户环境下,前端工程师不得不花费大量的精力跟旧版浏览器缠斗,但切不可局限于此、忽略对新技术的了解和实践。

解题思路:IE8 基本支持 CSS 2.1 的所有特性,因此在 IE6/7 下无法使用的 CSS 2.1 特性都可以列举出来。比如 :before:after 伪元素、 display: table-celloutline 等。此外,IE8 甚至支持 CSS3 的 box-sizing 属性。

5、CSS3 的新增功能有哪些?(选择)

  • A. Web Font
  • B. Media Query
  • C. Local Storage
  • D. 960 Grid System
  • E. CSS Reset
  • F. Data URI
  • G. :before / :after Pseudo Element

出题意图:考察候选人对 CSS3 的了解。喜欢在简历上堆名词?没问题,先来给这些词分分类吧。

解题思路:其实也没啥思路,如果持续关注 CSS 规范,这道题并不难。不要求完全答对,但如果把 “实践”(比如 960 Grid System 和 CSS Reset)跟 “规范” 混淆就不应该了。

JavaScript

1、如何用 JavaScript 获取 ID 为 abc 的 DOM 元素?(请写代码)

出题意图:最最基本的 DOM 操作了吧。答不上来可以直接送走了。

评分标准:同时写出 DOM 原生 API 和基于类库的方法可以拿满 5 分。

2、jQuery 提供的与 Ajax 相关的 API 有哪些?特点分别是什么?(简答)

出题意图:考察对 jQuery 的熟悉程度。

解题思路:jQuery 最常用的 Ajax API 可以为分三类,一是基础型( $.ajax() ),二是方法型( $.get()$.post() ),三是捷径型( $elem.load()$.getJSON() )。这三种类型是一个渐进的关系,应用场景越来越窄,功能越来越聚集,参数越来越简单。

评分标准:能写正确出三个 API 就可以拿 3 分。

3、在页面中加载外部的 JavaScript 文件,有哪些方式?(简答)

出题意图:和 CSS 部分的那一题类似,考察常规实践。

解题思路:

  • 先说最常见、最普通的:通过 <script> 标签的 src 属性引入一个外部的 JS 文件即可。
  • 再说由 JS 加载 JS 文件的方法:通过 DOM 操作或 document.write() 生成上述标签也可以达到相同效果。
  • 最后别忘了提一下类库的解决方案:可以是各种 JS loader,也可以是最简单的 jQuery API $.getScript()

评分标准:写出第一条就可以拿 3 分。

4、以下代码存在哪些问题?(简答)

<a href="javascript:openURL('/about.html');">关于我们</a>

出题意图:考察 “语义”、“分离”、“可访问性”、“非侵入式” 等概念。

解题思路:这道题同样隐去了一些前提,比如 openURL() 函数是怎么定义的,但其实从命名上可以看出它大致是做什么的,不需要纠结。这道题的核心正是 Web 标准的核心理念——“分离”。

参考答案:…………

……

……

完整文章已收录到 “CSS魔法” 微信公众号,扫码立即订阅:

魔法哥 2013 笔试题曝光(附完整解答)

© Creative Commons BY-NC-ND 4.0   | 我要订阅 |   我要打赏

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址