HTML和CSS很难面试，原因有以下几个：
与编程语言相比，它们太基础了，
他们在很大程度上取决于工作的背景。例子：
如果您创建了Google规模庞大，快速且优化的网站，那么您面试的人就不会忽略CSS精灵。
如果您创建的是XHTML W3C有效网站，则应确保候选人知道XHTML 1.0和XHTML 1.1之间的区别，或者的强制属性是什么<img/>，等等。
如果您创建的网站充满骇客，那么您应该向受访者询问他们将如何进行此类骇客，如何为不同的浏览器提供不同的CSS等。
等等
如果这是纯粹的HTML和CSS工作，那么该人员一方面必须与设计师合作，另一方面需要与开发人员合作。他们必须了解HTML和CSS，但更有价值的是他们与这些人进行交互的能力，以及了解设计人员的需求，开发人员的要求以及HTML和CSS的约束的能力。
例如，他们必须知道如何以这样的方式构造HTML，以便JavaScript开发人员以后可以轻松添加交互性。
您可能要从一些基本问题开始：
您最喜欢的浏览器是什么？
如果对方回答“ Internet Explorer”，请立即停止采访：您不需要那样的人。
不，我在开玩笑。答案是无关紧要的。相反，您可以问以下问题：
告诉我您在喜欢的浏览器中使用的调试工具。
我主要使用Chrome，每天都使用Developer Tools。这些工具使我能够：
我还使用YSlow作为我的清单，以优化需要高扩展性的网站。当确定服务器是否配置正确（发送正确的标头等）时，YSlow也是一个很好的工具。
在Firefox中，我使用Firebug，它与Chrome的开发人员工具非常相似。开发人员工具在Internet Explorer的新版本中也可用，并且还使我能够切换到IE7到IE10兼容性视图。最后一个功能非常有用，因为如果没有它，我将被迫安装多个虚拟机以进行传统测试，或者更多地使用Litmus之类的付费服务。
请给我解释一下什么<dl/>标签？该标签的预期用途是什么？在实践中如何使用它？您如何看待这种扩展用法？
在这里，您希望该人能够<dl/>为字典进行解释，将一个键<dt/>与一个或多个值相关联<dd/>。尽管此标签的主要用途纯粹与语义相关，但实际上，它被广泛用于替换表，PHPBB3是一个很好的例子。当表格使页面的显示速度变慢时，这是一件好事，但必须谨慎使用：不仅在许多情况下表格仍然适用于更好地描述数据，而且还有其他手段，例如普通的列表，无需使用即可描述内容<dl/>。
固定布局和流体布局有什么区别？各自的优缺点是什么？
固定布局具有元素的预定义宽度。流畅布局的元素取决于页面的宽度。
固定的布局使页面设计更加容易，尤其是在有很多全角图形时。即使没有图形，也更容易，因为您只关心精确的情况。例如，Programmers.SE是固定布局的网站，用于显示问题和答案的列始终具有相同的大小。如果此列使用流畅的布局，则会产生问题：在小屏幕上，文本将不可读，因为行太短，而在大屏幕上，行将变得非常大，因此文本也将不可读。
固定版式的问题在于，它适用于一些最常用的分辨率，而其他方面或多或少会失败。由于采用了非常大的宽显示器，并且在小型移动设备上使用互联网的情况越来越多，这一点变得尤为重要。
流畅的布局可以帮助实现这一点，但是对于此类网站而言，设计更加困难。在某些项目管理不善的情况下，这可能导致HTML和CSS遭到黑客入侵，页面过大，可维护性差，并且在开发过程中会导致更高的成本和错过最后期限。
在页面布局混乱的情况下，如何避免出现一列文字太大而无法阅读的情况？
您可以使用max-width属性来限制文本区域的宽度。
您对这段代码有什么看法<p color="Red" align="Center">Text here</p>？
该段代码在将表示逻辑混合到HTML中时存在缺陷。由于多种原因，必须将表示逻辑放入CSS中：
- 它有助于分离问题和清除代码，这意味着以后的维护成本较低，
- 它使样式可以在页面之间重复使用（出于可维护性的考虑），这有助于确保您在整个网站上使用相同的样式，
- 由于CSS文件将被缓存，因此它有助于减少带宽。
在经过一些基本问题之后，您可能会问一些更棘手的问题：
当这些颜色或字体应用于无法由单个选择器定位的多个元素时，如何避免在CSS中复制颜色或字体？有缺点吗？
您可以通过使用CSS预处理程序（例如Sass或LESS）来实现。它们允许在变量中定义颜色，字体和样式的其他部分，您以后可以在样式中使用它们。
CSS预处理器的缺点是：
他们有时需要更改开发和部署工作流程，以便在浏览器中拥有最新的CSS代码，
他们只有少数开发人员知道，这使得新人以后更难以加入或维护该项目，
没有适用于Sass或LESS的好的IDE和快速的IDE，并且最流行的IDE内的集成令人失望。
给我一个hrefCDN上图像值的示例，因为该图像显示在可以同时通过HTTP和HTTPS访问的网站上。
由于HTTPS也需要每个被调用资源都位于HTTPS上（否则，在许多情况下，将向用户显示安全警告），因此无法将链接指定为http://cdn.example.com/image.png。要正确链接到图像，//cdn.example.com/image.png必须使用；然后，浏览器将前置http:或https:取决于上下文。
鉴于无法优化页面大小和网站上的请求数量，无法更改内容或添加AJAX，您如何给用户留下网站更快的印象？从HTML角度来看涉及什么？
如果使用HTTP 1.1，则该页面可能已分块。这意味着第一部分的显示速度更快，给人的印象是网站比实际网站要快。在HTTP 1.0中无法进行分块传输编码，这意味着在这种情况下无需执行任何操作。
从HTML角度来看，要能够提供分块的内容，就需要对元素进行重新排序，将最关键的元素放在文件顶部（这并不意味着它们必须出现在页面顶部）。例如，在电子商务网站上，当用户想要查看产品的详细信息时，第一块可以包含<head/>和产品详细信息。下一块可能包含主要元素，例如网站徽标，主菜单，版权等。最后一块可能包含“同时购买此商品的人”部分，产品的评论和评分， “在Facebook上共享”等。
最后，您可以要求应聘者在真实场景中工作。它可能是复杂的场景，就像下面最简单的场景一样，这是人们必须处理CSS Sprite或其他高级优化技术，浏览器不一致等问题的复杂场景。
请创建一个带有两个区域的XHTML页面：左边一个带有列表的区域，右边一个带有文本的区域。两个区域由垂直线分隔，该垂直线从页面的顶部延伸到底部。列表和文字的大小各不相同，您无法预测哪个高度最大。您不能使用<table/>。
实际上，这很简单，但是可以显示人是否具有思考身高的能力。没有经验的候选人将创建float:left区域和border-left:solid 1px #ccc;区域，但是忘记将边框添加到左侧区域并进行扩展，以使两个边界位于同一位置。
