2013 Frontend Interview Quiz: Full Questions and Answers

Test comprises 20 questions, 5 points each, total 100. Score 50 indicates junior‑to‑mid‑level front‑end engineer.

HTML

1. Valid syntaxes for <input type="text" name="username"> in HTML 4.01, XHTML, HTML5:

A. <input type="text" name="username" /> B. <input type="text" name="username"> C. <input type=text name=username> D.

<INPUT TYPE="text" NAME="username">

HTML5 treats all four forms as legal due to backward compatibility.

2. DTD definition and purpose.

DTD = Document Type Definition, originates from XML, defines elements, attributes, and structural relationships. Specifies commonly used DTDs (e.g., HTML5 doctype). Influences browser rendering mode: standard vs. quirks.

3. Purpose of <label> element.

Provides descriptive text for form controls, improving user experience and accessibility.

4. Tags deprecated in HTML 4.01.

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

<strong>

Purely presentational tags are <center> and <font> . In HTML5, <b> gains semantic meaning.

5. New <input> types added in HTML5.

number , email , tel , url , range , color , etc.

CSS

1. Ways to load an external CSS file.

Most common: <link rel="stylesheet" href="..."/> tag. Using @import inside a <style> block. Dynamically creating the <link> element via JavaScript.

2. After applying p {margin: 10px 0;}, vertical distance between two adjacent paragraphs.

Answer: 10 px (margin collapsing).

3. Advantages and disadvantages of CSS sprites.

Advantages: reduces HTTP requests, improves performance, provides pre‑loading. Disadvantages: higher creation and maintenance cost.

4. CSS techniques safe to use after dropping IE6/7 support.

All CSS 2.1 features unavailable in IE6/7, e.g., :before , :after , display: table-cell , outline . IE8 also supports CSS3 box-sizing property.

5. New CSS3 features.

A. Web Font

B. Media Query

F. Data URI

G. :before / :after pseudo‑elements

Items C, D, E are unrelated to CSS3 specifications.

JavaScript

1. Code to obtain DOM element with ID abc.

<code>document.getElementById('abc'); // native API $('#abc'); // jQuery</code>

2. jQuery Ajax APIs and their characteristics.

Fundamental: $.ajax() Method‑type: $.get() , $.post() Shortcut: $elem.load() , $.getJSON()

3. Ways to load an external JavaScript file.

Using &lt;script src="..."&gt;&lt;/script&gt; tag. Creating a &lt;script&gt; element via DOM or document.write() . Using library loaders, e.g., $.getScript() .

4. Useful HTML5 JavaScript APIs.

Local storage, Web Workers, Canvas, History API, Geolocation API, etc.

5. Problems in the code

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

.

Link navigation should not be performed via JavaScript. Fails when JavaScript is disabled or errors. Prevents search engine crawlers from following the URL.

Misc

1. HTTP status codes meanings.

404 – Not Found

301 – Moved Permanently

200 – OK

304 – Not Modified

503 – Internal Server Error

403 – Forbidden

2. Purpose of a CDN.

Distribute content from nearby nodes.

Cache static resources.

3. Characteristics of Microsoft YaHei font.

Bundled with Windows XP onward; suitable for headings and body text. Optimized for ClearType rendering, improving small‑size readability. Good Unicode coverage. Design: relatively full glyphs, wide mid‑section, no flared terminals.

4. How a web server determines a request comes from a mobile device.

By inspecting the HTTP User-Agent header.

5. How Google Analytics collects website traffic data.

Developers embed the GA script; the script runs in the client, sets a cookie, and reports user interactions to GA servers, which aggregate metrics such as PV and UV.