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

阅读 2511
收藏 141
2016-11-27
原文链接:mp.weixin.qq.com

简介

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

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

如何评分

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

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

HTML

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

  • A.
  • B.
  • C.
  • D.

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

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

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

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

解题思路:

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

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

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

解题思路:

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

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

  • A.
  • B.
  • C.
  • D.
  • E.
  • F.

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

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

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

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

参考答案:numberemailtelurlrangecolor 等。

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

CSS

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

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

解题思路:

  • 先说最常见、最普通的:通过 标签的 href 属性引入一个外部的 CSS 文件,同时 标签需要包含 rel="stylesheet" 属性。(能清晰完整答出这一点,可以得 3 分。)
  • 再说冷门一些的:在
评论