要问受访者的 10 大 CSS 和 HTML 问题？

Top 10 CSS and HTML questions to ask interviewee?

提问by Jitendra Vyas

What should be the top 10 CSS and HTML questions to ask an interviewee? To test his level of knowledge if interviewee mentioned 2 yrs. experience in XHTML and CSS.

问受访者的 10 大 CSS 和 HTML 问题应该是什么？如果受访者提到 2 年，则测试他的知识水平。XHTML 和 CSS 方面的经验。

Edit:

编辑：

how we can know interviewee's cross browser layout making capability? My question is only related to xhtml css coding not about design ability

我们如何知道受访者的跨浏览器布局制作能力？我的问题仅与 xhtml css 编码有关，与设计能力无关

回答by robertc

1. What is the CSS box model?
2. What is the difference between quirks mode, standards mode and almost standards mode?
3. Tell me about hasLayout.
4. What would be the most appropriate markup for: a navigation menu; a picture gallery; a blog post. (Why? Can you think of some alternatives? Might be good to draw these up on a whiteboard or something)
5. What's the difference between <p class="main_header">Foo</p> and <h1 class="main_header">Foo</h1>?
6. Why is this a bad idea?: <span class="red">Bar</span>
7. Describe how to set opacity and how will it appear in Gecko, WebKit and IE.
8. How can you set few properties on to textboxes as default?
9. A design calls for png files with alpha transparency, what issues might you encounter?

1. 什么是 CSS 盒模型？
2. 怪癖模式、标准模式和几乎标准模式有什么区别？
3. 告诉我有关 hasLayout 的信息。
4. 什么是最合适的标记：导航菜单；图片库；一篇博文。（为什么？你能想到一些替代方案吗？把它们画在白板之类的东西上可能会很好）
5. <p class="main_header">Foo</p> 和 <h1 class="main_header">Foo</h1> 有什么区别？
6. 为什么这是个坏主意？：<span class="red">Bar</span>
7. 描述如何设置不透明度以及它在 Gecko、WebKit 和 IE 中的显示方式。
8. 您如何将一些属性设置为默认文本框？
9. 一个设计要求使用 alpha 透明度的 png 文件，您可能会遇到什么问题？

Some of these are the same as zoul's questions except from a slightly different angle - I was aiming for questions that would lead to a bit of a discussion.

除了从稍微不同的角度之外，其中一些与 zoul 的问题相同 - 我的目标是会导致一些讨论的问题。

回答by zoul

1. Why is it a good idea to split HTML and CSS?
2. What is the difference between inline and block elements?
3. What is a doctype good for?
4. What is the difference between classes and ids?
5. What is the difference between margin and padding?

1. 为什么拆分 HTML 和 CSS 是个好主意？
2. 内联元素和块元素有什么区别？
3. 文档类型有什么用？
4. 类和 ID 之间有什么区别？
5. 边距和填充有什么区别？

These should be more than plenty to see how much candidate knows about browsers, standards and the reasoning behind HTML and CSS. Maybe you could throw in some floats, positioning and similar stuff if you want to test detailed CSS knowledge.

这些应该足以了解候选人对浏览器、标准以及 HTML 和 CSS 背后的推理了解多少。如果你想测试详细的 CSS 知识，也许你可以加入一些浮动、定位和类似的东西。

Update:The point is the kind of answer you are going to get, of course. If you ask about margin and padding and you get a clean drawing of box content, added padding, border line and margin, possibly collapsing against another box, you know the guy knows what he is talking about. Same goes for all the other questions.

更新：当然，关键是你会得到什么样的答案。如果你询问边距和内边距，你会得到一个干净的框内容图，添加了内边距、边界线和边距，可能会折叠到另一个框上，你知道这个人知道他在说什么。所有其他问题也是如此。

回答by manuel aldana

Apart from HTML/CSS/JS specific or problem-solving questions, I would also ask what sort of tools she/he is using to get a task done. It often gives good insights about 'how' someone works and gives good/relaxed room for discussion. Good developers always have good and sharp tools.

除了特定于 HTML/CSS/JS 或解决问题的问题，我还会问她/他使用什么样的工具来完成任务。它通常提供有关某人“如何”工作的很好的见解，并提供良好/轻松的讨论空间。优秀的开发人员总是有好的和锋利的工具。

回答by Square Rig Master

No amount of questions in a short interview would establish a person's skill level. And there is the question of innovative qualities of a person which may not reveal itself in an interview. Some people may be introverted and shy or suffer from interview jitters others may be smooth talkers with little substance. There is also the challenge of asking objective questions not opinions.

在简短的面试中，再多的问题也无法确定一个人的技能水平。还有一个人的创新素质问题，可能不会在面试中表现出来。有些人可能性格内向、害羞，或者在面试时容易紧张，而另一些人可能会说话流畅，没有实质内容。提出客观问题而不是意见也是一个挑战。

If I show up for an audition to join a symphonic orchestra and tell them I have been playing the violin for 20 years they will not ask me about the construction of the bridge or the best material for bow strings. They give me a music score and ask me to play.

如果我参加交响乐团的试镜并告诉他们我已经拉小提琴 20 年了，他们不会问我有关琴桥的构造或弓弦的最佳材料的问题。他们给了我一个乐谱，让我弹奏。

I suggest creating a simple web page that requires the techniques mentioned in the answers above, showing it to the candidate and asking the candidate to re-produce it in 30 minutes using the notepad. This will sort out the experienced from the novice.

我建议创建一个需要上述答案中提到的技术的简单网页，向候选人展示并要求候选人在 30 分钟内使用记事本重新制作它。这将从新手中梳理出有经验的人。

回答by Mike B

I've taken a number of tests over the past couple of years and in all honesty there are really no questions one can ask to judge how great someone is at coding in HTML and/or CSS.

在过去的几年里，我进行了许多测试，老实说，真的没有人可以提出任何问题来判断某人在 HTML 和/或 CSS 编码方面的出色程度。

First, if the interviewee claims to have written web pages over the past couple of years ask for a couple of examples. If possible get him/her to email you them, print them out and get the user to explain and critique everything about them. Completely tear through everything regarding their previous work and get them to explain everything they can about it.

首先，如果受访者声称在过去几年里写过网页，请举几个例子。如果可能的话，让他/她给你发电子邮件，打印出来，让用户解释和批评关于他们的一切。彻底撕毁关于他们以前工作的所有内容，并让他们解释他们所能做的一切。

Once this is done, the user should be given a small task involving the development of a web page. Give them a networked computer and clear the history, then give them a couple of web pages to be built over the space of nminutes. Tell them to document what they decide to do and what resources they'll be using and just let them get on with it. After a while check their references and look at the outcome. The user will never be able to perform their best work in such a short time but you'll be able to see how efficient they are by the quality of their work.

完成此操作后，应为用户提供一项涉及开发网页的小任务。给他们一台联网的计算机并清除历史记录，然后给他们几个要在n分钟内构建的网页。告诉他们记录他们决定做什么以及他们将使用哪些资源，然后让他们继续进行。一段时间后检查他们的参考资料并查看结果。用户永远无法在如此短的时间内完成他们最好的工作，但您可以通过他们的工作质量看到他们的效率。

Once this is done, give them a broken web page and give them a small amount of time to fix it to the point of it being standards-compliant. This should be an easy task to perform for most given good use of their tools.

完成后，给他们一个损坏的网页，并给他们一点时间将其修复到符合标准的程度。对于大多数人很好地使用他们的工具来说，这应该是一项容易执行的任务。

It's obviously not an exact science, but a range of these methods have always found suitable candidates for many companies and it seems that a lot of Web Design places rarely ask questions nowadays and will move onto simple practical exercises to ensure that the interviewee can do what is asked of them.

这显然不是一门精确的科学，但一系列的方法总是为许多公司找到合适的人选，现在似乎很多网页设计的地方很少问问题，而是转向简单的实践练习，以确保受访者可以做些什么被问到他们。

回答by David says reinstate Monica

1. What do you see as the main differences between html and xhtml?
2. Are there benefits to using one over the other?

1. 您认为 html 和 xhtml 之间的主要区别是什么？
2. 使用一个比另一个有好处吗？

回答by Gazzer

Technical

技术的

Ask the person to make a simple page with a header, a two column layout, and a footer with each column having a different background color extending to the footer. Get them to flip the columns around on completion.

要求此人制作一个带有页眉、两列布局和页脚的简单页面，每列都有不同的背景颜色延伸到页脚。让他们在完成时翻转列。

A couple of questions that are tricky.

几个棘手的问题。

How do absolutes affect the flow?

绝对值如何影响流量？

How do floats affect the flow?

浮动如何影响流量？

(they don't)

（他们没有）

What are two practical difference between a relative and static?

相对和静态之间的两个实际区别是什么？

Determine their interest in CSS and HTML with 'What is the semantic web and why is it important?' People should be able to speak with enthusiasm about bring information to the blind for example. People who really work in HTML and CSS and know their stuff tend to be quite passionate about how information is there for all.

通过“什么是语义网以及它为什么重要？”来确定他们对 CSS 和 HTML 的兴趣。例如，人们应该能够热情地谈论将信息带给盲人。真正在 HTML 和 CSS 中工作并了解他们的东西的人往往对信息是如何为所有人服务的充满热情。

IMO, Cross browser issues are becoming less important now as more people are using modern browsers that obey standards.

IMO，随着越来越多的人使用遵守标准的现代浏览器，跨浏览器问题现在变得不那么重要了。

Ask about their interest in design. A good sense of design concepts tends to be important when working in a team - a programmer with a sense of design can communicate why such a design may not work well within a website and can explain better some of the limitations.

询问他们对设计的兴趣。在团队中工作时，良好的设计概念感往往很重要 - 具有设计感的程序员可以传达为什么这样的设计在网站中可能无法正常工作，并且可以更好地解释一些限制。

Ask: what do you think of flash :-)

问：你觉得闪光灯怎么样 :-)

回答by Shivprasad Ktheitroadala

Below are 40 questions you can ask a person specifically from HTML 5 perspective.

以下是您可以从 HTML 5 的角度专门问一个人的 40 个问题。

http://www.codeproject.com/Articles/702051/important-HTML-Interview-questions-with-answe

http://www.codeproject.com/Articles/702051/important-HTML-Interview-questions-with-answe

What is the relationship between SGML,HTML , XML and HTML ?

SGML、HTML、XML 和 HTML 之间是什么关系？

In HTML 5 we do not need DTD why?

在 HTML 5 中我们不需要 DTD 为什么？

If I do not put will HTML 5 work?

如果我不把 HTML 5 工作？

Which browsers support HTML 5?

哪些浏览器支持 HTML 5？

How is the page structure of HTML 5 different from HTML 4 or previous HTML?

HTML 5 的页面结构与 HTML 4 或以前的 HTML 有何不同？

What is datalist in HTML 5 ?

什么是 HTML 5 中的数据列表？

What are the different new form element types in HTML 5?

HTML 5 中有哪些不同的新表单元素类型？

What is output element in HTML 5?

HTML 5 中的输出元素是什么？

What is SVG?

什么是SVG？

Can we see a simple example of SVG using HTML 5?

我们可以看到一个使用 HTML 5 的简单 SVG 示例吗？

What is canvas in HTML 5?

HTML 5 中的画布是什么？

So how can we draw a simple line on Canvas?

那么我们如何在Canvas上画一条简单的线呢？

What is the difference between Canvas and SVG graphics?

Canvas 和 SVG 图形有什么区别？

How to draw rectangle using Canvas and SVG using HTML 5 ?

如何使用 HTML 5 使用 Canvas 和 SVG 绘制矩形？

What are selectors in CSS?

CSS 中的选择器是什么？

How can you apply CSS style using ID value?

如何使用 ID 值应用 CSS 样式？

What is the use of column layout in CSS?

CSS中的列布局有什么用？

Can you explain CSS box model?

你能解释一下 CSS 盒模型吗？

Can you explain some text effects in CSS 3?

你能解释一下 CSS 3 中的一些文字效果吗？

What are web workers and why do we need them ?

什么是网络工作者，为什么我们需要他们？

What are the restrictions of Web Worker thread ?

Web Worker 线程有哪些限制？

So how do we create a worker thread in JavaScript?

那么我们如何在 JavaScript 中创建一个工作线程呢？

How to terminate a web worker

如何终止 Web Worker

Why do we need HTML 5 server-sent events?

为什么我们需要 HTML 5 服务器发送事件？

What is local storage concept in HTML 5?

HTML 5 中的本地存储概念是什么？

How can we add and remove data from local storage?

我们如何从本地存储中添加和删除数据？

What is the lifetime of local storage?

本地存储的生命周期是多久？

What is the difference between local storage and cookies?

本地存储和 cookie 有什么区别？

What is session storage and how can you create one?

什么是会话存储，如何创建？

What is difference between session storage and local storage?

会话存储和本地存储有什么区别？

What is WebSQL?

什么是 WebSQL？

Is WebSQL a part of HTML 5 specification?

WebSQL 是 HTML 5 规范的一部分吗？

So how can we use WebSQL ?

那么我们如何使用 WebSQL 呢？

What is application cache in HTML5?

什么是 HTML5 中的应用程序缓存？

So how do we implement application cache in HTML 5 ?

那么我们如何在 HTML 5 中实现应用缓存呢？

So how do we refresh the application cache of the browser?

那么我们如何刷新浏览器的应用缓存呢？

What is fallback in Application cache?

什么是应用程序缓存回退？

What is network in application cache ?

什么是应用程序缓存中的网络？

回答by Roshan Padole

1. What are different ways to apply styles to a Web page?
2. What is grouping in CSS?
3. What is the Contextual Selector?
4. What are the limitations in the use of CSS?

1. 将样式应用到网页有哪些不同的方法？
2. CSS中的分组是什么？
3. 什么是上下文选择器？
4. CSS 的使用有哪些限制？

like the above there are 50+ awesome questions that are available here through which any CSS related interview can get cracked. Top CSS interview questions and answers

像上面一样，这里有 50 多个很棒的问题，通过这些问题可以破解任何与 CSS 相关的面试。热门 CSS 面试问题和答案

This also help to clear the concept of CSS.

这也有助于明确 CSS 的概念。

回答by Sage

Some good questions to ask are: Describe how to set opacity. What is the box model in CSS? How do you add a CSS to a HTML? Describe the difference between a class and an element. What is the Doctype for?

要问的一些好问题是： 描述如何设置不透明度。CSS中的盒子模型是什么？如何在 HTML 中添加 CSS？描述类和元素之间的区别。Doctype 有什么用？