Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
cssmagic opened this Issue Nov 25, 2016 · 0 comments

Comments

Projects
None yet
1 participant
@cssmagic
Copy link
Owner

cssmagic commented Nov 25, 2016

简介

这是我在 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魔法” 微信公众号,扫码立即订阅:

weixin-qrcode


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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.