魔法哥 2013 笔试题曝光（附完整解答）

[cssmagic]

简介

这是我在 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 规范的了解。

参考答案：number、email、tel、url、range、color 等。

评分标准：每正确写出一项即可得 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-cell、outline 等。此外，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魔法” 微信公众号，扫码立即订阅：

---

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