在过去的几周里，我一直在为我的租赁家具公司 Pabio 招聘高级 全栈 JavaScript 工程师。 由于我们是一个远程团队，我们在 Zoom 上进行面试，我观察到一些开发者在现场编码或白板面试中表现不佳，即使他们很擅长这项工作。 因此，我们进行了一个小时的技术讨论，我问他们关于 Web 指标、可访问性、浏览器大战以及其他类似的网络主题的问题。 我一直喜欢问的一个问题是：“向我解释 Twitter 源代码的前十行左右。”
我认为这是一个简单的测试，可以告诉我很多关于他们基础前端知识的深度，这篇文章列出了最好的答案。
为了提供背景信息，我共享我的屏幕，打开 Twitter.com 并单击查看源代码。 然后我要求他们逐行解释，帮助我理解 HTML，他们可以随意说多或少。 我还放大文本以使其更易读，因此您看不到整行，但可以了解大概。 以下是它的样子
请注意，由于我们的技术讨论是一个对话，我不指望任何人给出完美的答案。 如果我听到一些正确的关键词，我知道候选人了解这个概念，我会尽力引导他们走上正轨。
第 1 行：<!DOCTYPE html>
每个文档源代码的第一行非常适合这个面试，因为候选人对 DOCTYPE 声明的了解程度与他们的工作经验年限密切相关。 我仍然记得我在 Dreamweaver 时代使用过长的 XHTML DOCTYPE 行，就像 Chris 在他 2009 年的文章 “常用的 DOCTYPES” 中列出的那样。
完美答案： 这是文档类型 (doc-type) 声明，我们始终将其放在 HTML 文件的第一行。 您可能认为此信息是多余的，因为浏览器已经知道响应的 MIME 类型是 text/html； 但是 在 Netscape/Internet Explorer 时代，浏览器需要完成一项艰巨的任务，即从多个竞争版本中确定要使用哪个 HTML 标准来呈现页面。
这尤其令人讨厌，因为每个标准都生成不同的布局，因此采用此标签是为了简化浏览器的操作。 以前，DOCTYPE 标签很长，甚至包含规范链接（有点像今天的 SVG），但幸运的是，简单的 <!doctype html> 在 HTML5 中得到了标准化，并且至今仍在使用。
也接受： 这是 DOCTYPE 标签，用于让浏览器知道这是一个 HTML5 页面，应该按照这种方式呈现。
第 2 行：<html dir="ltr" lang="en">
源代码中的这行可以告诉我候选人是否了解可访问性和本地化。 令人惊讶的是，在我的面试中，只有少数人了解 dir 属性，但它是关于屏幕阅读器的良好切入点。 几乎每个人都能弄清楚 lang="en" 属性，即使他们以前从未使用过它。
完美答案： 这是 HTML 文档的根元素，所有其他元素都在此元素内部。 在这里，它有两个属性，方向和语言。 direction 属性的值为从左到右，用于告诉用户代理内容的方向； 其他值为从右到左（用于阿拉伯语等语言），或者只是 auto，这将由浏览器自行确定。
language 属性告诉我们此标签内部的所有内容都是英文； 您可以将此值设置为任何语言标签，甚至区分 en-us 和 en-gb，例如。 这对于屏幕阅读器来说也很有用，因为它们可以知道要宣布哪种语言。
第 3 行：<meta charset="utf-8">
完美答案： 源代码中的 meta 标签用于提供有关此文档的元数据。 character set (char-set) 属性告诉浏览器要使用哪个字符编码，Twitter 使用标准的 UTF-8 编码。 UTF-8 很棒，因为它具有许多字符点，因此您可以在源代码中使用各种符号和表情符号。 将此标签放在代码开头很重要，这样浏览器在遇到此行时不会已经开始解析太多文本； 我认为规则是在文档的前 1 千字节中放置它，但我认为最佳做法是在 <head> 的开头放置它。
作为旁注，Twitter 似乎为了性能原因省略了 <head> 标签（减少要加载的代码），但我仍然喜欢将其明确声明，因为它为所有元数据、样式等提供了一个清晰的容器。
第 4 行：<meta name="viewport" content="width=device-...
完美答案： 源代码中的此 meta 标签用于在小型屏幕（如智能手机）上正确调整网页大小。 如果您还记得最初的 iPhone 演示，史蒂夫·乔布斯在那个只有 4.5 英寸的小屏幕上展示了整个纽约时报网站； 当时，这是一个惊人的功能，您需要捏住屏幕放大才能真正阅读。
现在，网站的设计都是响应式的，width=device-width 告诉浏览器将设备的 100% 宽度用作视窗，这样就不会出现水平滚动，但您甚至可以指定特定像素值的宽度。 标准的最佳做法是将初始缩放比例设置为 1，并将宽度设置为 device-width，以便用户仍然可以随意放大缩小。
源代码截图没有显示这些值，但需要了解：Twitter 还应用了 user-scalable=0，顾名思义，它禁用缩放功能。 这对可访问性不利，但使网页感觉更像是原生应用程序。 它还设置了 maximum-scale=1 以达到相同目的（您可以使用最小和最大比例将缩放能力限制在这些值之间）。 一般来说，设置完整宽度和初始缩放比例就足够了。
第 5 行：<meta property="og:site_name" content="Twitt...
大约 50% 的候选人了解 Open Graph 标签，对这个问题的良好答案表明他们了解 SEO。
完美答案： 此标签是 Open Graph (OG) 元标签，用于网站名称 Twitter。 Open Graph 协议 由 Facebook 制定，目的是简化链接展开并 以漂亮的卡片布局显示其预览； 开发人员可以添加各种作者信息和封面图片，以实现花哨的共享。 事实上，如今使用 Puppeteer 等工具自动生成 Open Graph 图片也很常见。 (CSS-Tricks 使用一个 WordPress 插件 来完成此操作。)
另一个有趣的旁注是，meta 标签通常具有 name 属性，但 OG 使用非标准的 property 属性。 我想这就是 Facebook 的作风？ 标题、URL 和描述 Open Graph 标签有点多余，因为我们已经为它们提供了常规的 meta 标签，但人们为了安全起见会添加它们。 如今，大多数网站都使用 Open Graph、其他元标签以及页面内容的组合来生成丰富的预览。
第 6 行：<meta name="apple-mobile-web-app-title" cont...
大多数候选人不知道这一点，但经验丰富的开发者可以谈论如何为 Apple 设备优化网站，例如 apple-touch-icon 和 Safari 固定标签 SVG。
完美答案： 您可以在 iPhone 的主屏幕上固定一个网站，使其感觉像是原生应用程序。 Safari 不支持渐进式 Web 应用程序，而且您实际上无法在 iOS 上使用其他浏览器引擎，因此如果您想要那种原生体验，您别无选择，而 Twitter 当然喜欢这种体验。 因此，他们添加了此内容来告诉 Safari 此应用程序的标题为 Twitter。 下一行类似，控制应用程序启动时状态栏的外观。
第 8 行：<meta name="theme-color" content="#ffffff"...
完美答案： 这是 Apple 状态栏颜色元标签的正确 Web 标准等效项。 它告诉浏览器对周围的 UI 进行主题设置。 Android 上的 Chrome 和桌面上的 Brave 都做得很好。 你可以在内容中放置任何 CSS 颜色，甚至可以使用 media 属性仅为特定媒体查询显示此颜色，例如，以支持深色主题。 你也可以在 Web 应用清单中定义此属性和其他属性。
第 9 行：<meta http-equiv="origin-trial" content="...
我采访的每个人都不知道这一点。 我认为你只有对标准跟踪中发生的所有新事物有深入了解才会知道这一点。
完美答案： 原点试验使我们能够在我们的网站上使用新的和实验性的功能，用户代理会跟踪反馈并将其报告给 Web 标准社区，而无需用户选择加入功能标记。 例如，Edge 针对双屏和可折叠设备原语进行了原点试验，这很酷，因为你可以根据可折叠手机是打开还是关闭来创建有趣的布局。
也接受： 我不知道这个。
第 10 行：html{-ms-text-size-adjust:100%;-webkit-text...
几乎没有人知道这一点；只有当你了解 CSS 边缘情况和优化时，你才能弄清楚这一行。
完美答案： 假设你没有移动响应式网站，你在小屏幕上打开它，浏览器可能会调整文本大小使其更大，以便更容易阅读。 CSS text-size-adjust 属性可以使用 none 值禁用此功能，或者指定浏览器允许将文本放大到某个百分比。
在这种情况下，Twitter 表示最大值为 100%，因此文本大小不应大于实际大小；他们这样做是因为他们的网站已经是响应式的，他们不想冒浏览器使用更大的字体大小破坏布局的风险。 这是应用于根 HTML 标签的，因此它适用于其内部的所有内容。 由于这是一个实验性的 CSS 属性，因此需要供应商前缀。 此外，此 CSS 之前缺少 <style>，但我猜想这是在上一行中被压缩了，我们没有看到它。
也接受： 我不知道这个特定属性，但 -ms 和 -webkit- 分别是 Internet Explorer 和基于 WebKit 的浏览器需要的供应商前缀，用于非标准属性。 当 CSS3 发布时，我们曾经需要这些前缀，但当属性从实验性变为稳定或被采用到标准跟踪时，这些前缀就会消失，取而代之的是标准化的属性。
额外 — 第 11 行：body{margin:0;}
Twitter 源代码中的这行特别有趣，因为你可以接着问关于重置网页和规范网页之间区别的问题。 几乎每个人都知道正确答案的某个版本。
完美答案： 由于不同的浏览器具有不同的默认样式（用户代理样式表），因此你需要覆盖它们以重置属性，以便你的网站在不同设备上看起来相同。 在这种情况下，Twitter 告诉浏览器删除 body 标签的默认边距。 这仅仅是为了减少浏览器之间的不一致，但我更喜欢规范样式而不是重置样式，即在浏览器之间应用相同的默认值，而不是完全删除它们。 人们曾经使用 * { margin: 0 }，这完全是过度杀伤，对性能也不利，但现在通常导入类似 normalize.css 或 reset.css（甚至 更新的版本）并从那里开始。
更多行！
我总是喜欢玩浏览器检查器工具，看看网站是如何制作的，这就是我想到这个主意的方法。 即使我自认为是语义 HTML 方面的专家，但每次做这个练习我都会学到一些新东西。
由于 Twitter 主要是一个客户端的 React 应用，所以源代码中只有几十行。 即使这样，也有很多东西可以学习！ Twitter 源代码中还有几行很有趣，我把它留给读者作为练习。 你能在面试中解释其中的多少？
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">…告诉浏览器用户可以添加 Twitter 作为搜索引擎。
<link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" />…有许多有趣的属性可以讨论，特别是 nonce。
<link rel="alternate" hreflang="x-default" href="https://twitter.com/" />…用于国际着陆页。
:focus:not([data-focusvisible-polyfill]){outline: none;}…用于在不使用键盘导航时删除焦点轮廓（此处对 CSS :focus-visible 选择器进行了填充）。
对不起，但我永远不会雇佣一个知道如何解释前 10 行的人。
我更喜欢人类。 我更喜欢专注于重要事物的工人，他们知道如何自己学习新东西。
完全尊重你的意见！ 在我看来，“专注于重要事项”绝对意味着理解你在做什么，而不仅仅是复制粘贴。 我认为几乎每个人在进行 Web 开发时都遇到过 doctype、charset、viewport 等标签，因此无法解释它们对我来说是一个危险信号。 这就是为什么我认为这个快速测验是衡量一个人知识水平的良好指标。 :)
但这都是非常常见的东西，我并没有学习过它，我知道这些是因为我使用过它们（除了原点试验，但即使是那些我也很熟悉）。 这些是高级 Web 应用程序开发人员在某个时候应该遇到并能够进行良好讨论的事情。
我唯一要批评的就是：应用程序开发人员，而不是网站开发人员。 这些是 Web 应用程序开发人员所熟悉的（也许除了开放图形，这是我唯一无法给出完美答案的）。
如果我要招聘一个花哨的跨平台 SPA Web 应用程序，我可以想象使用这种方法。 比这更简单的话，我担心那些在这个问题上表现出色的人可能不是那些对我可以给他们的职位感到满意的人。
是的，我很难理解为什么大多数情况下这在面试中很重要——它基本上都是现代开发框架处理的样板代码。
这是你的项目中的一位开发人员可能需要查找一次的事情，但其他人会更多地关注功能实现。
我的意思是，我有几年的 Angular 开发经验，我可能会在这场面试中失败…
@scott，你说得对，如果你在几年的 Angular 开发经验后在这场面试中失败，我可能不会雇佣你（原因如下！）。
当你说大多数框架处理样板代码时，我理解你的意思；这很简单，让我们快速高效。 但对我来说，理解框架的作用非常重要。 事实上，面试中的一个问题是“你将如何从头开始重新实现 React”，目的是让候选人思考虚拟 DOM 和状态更新等概念是如何工作的。 对我来说，不知道这一点是不可接受的。
我认为随着我们规模扩大并拥有更多专业人员，雇佣你可能是有意义的，也就是说，雇佣一个可能非常擅长 Angular 但可能不是“整个 Web”（不评判，如果你不同意，请告诉我！），但由于我们处于早期阶段，我更愿意雇佣一个全面了解 HTML/CSS/JS 的多面手，而不是一个特定框架的专家。 这个“Twitter 源代码”测试恰恰证明了这一点。
我同意你的观点，@anand。
1) 这些东西并不复杂，任何与 DOM 互动的人应该都知道。
2) 如果有人不知道某个组件，至少他们现在知道，期望他们理解一切是如何组合在一起的，至少在高层次上。
现在我得去学习一下 nonce 是什么了…
这里让我困惑的是，内联 CSS 只是开始，没有包围它的标签。 之前有人提到过吗？
开头的
<style>只是在屏幕外，但它在上一行的末尾。对，这对我来说也是新的。 另外，完全省略了 head 标签。
是的，Chris 是对的 - 它被放大，所以它在上一行的末尾。我写了
更不用说没有
<head>，还是它不需要规范，就像我所认为的那样？一些顶级或块级 HTML 元素具有可选的结束标签，因为它们有关于它们放置位置和/或可以包含内容的明确规则：html、head、body、p、dt、dd、li、option、thead、th、tbody、tr、td、tfoot 和 colgroup。html、head 和 body 也有可选的开始标签，因为同样，它们的位置和内容是明确的。
https://html.whatwg.com.cn/multipage/syntax.html#optional-tags
没有办法你能在没有调查的情况下自己知道所有问题的“完美答案”。如果你真的知道，并且你拥有完美的知识，为什么你不自己做这份工作呢？
也许是因为两个人（或更多人）可以比一个人做更多工作，而且每个人最终都会有一天休息？
嗨 Emmy，我当然必须进行研究才能写这篇文章 :)
但说实话，我会给自己打 8/10 分，因为我能够从记忆中相当好地回答所有这些问题，因为我已经编写 HTML 超过 10 年了，并且对它有了很深入的了解！当然，我没有“完美的知识”，并且会在其他任何领域失败这场测试！
至于为什么我不会自己做这份工作，我认为大多数人雇用有两个原因：（i）你需要一个能够做你不能做的事情的人，或者（ii）你一天的时间不够，所以你需要更多人手。在我们公司的当前阶段，我们处于（ii）阶段，所以雇用的主要动机是我作为创始人有很多事情要做，而且公司需要一个人每天致力于编写代码。:)
我本人只是一个网页开发者，但我对这里人们的反应感到非常惊讶。我期望我雇用的每个网页开发者（至少是前端开发人员）都知道这些行的含义。我不明白你如何能不知道这些，还能声称自己了解自己的工作。
我们永远无法知道某个人是否完美。我们只用它来表达我们所知道的 ☺️。
我理解这是一种与其他方法一样好的选择候选人的方法，但我认为这不会告诉你太多关于候选人的信息。
其中一些是相当模糊的知识，不是说它们没有价值（它们很重要），而是这将如何告诉你某人是否知道如何使用承诺？或者如何懒加载图像？或者如何制作响应式网格？或者使用什么 ARIA 角色来获得可访问的自定义下拉菜单？或者那个候选人是否能够将模型转化为实际页面？
我已经从事网页开发超过 12 年了，在几家公司、国家和项目中工作，我可能只写过一两次这些行。如果我必须写它们，我会直接在谷歌上搜索，我知道它们是什么，但我不会当场记住它们。
我 100% 同意！正如我在文章中写的那样，“…我问他们关于网络指标、可访问性、浏览器大战以及其他类似的网络主题的问题。”
这个“Twitter 问答”在一个 60 分钟的面试电话中大约需要 10 分钟，而其他 50 分钟是关于这些其他主题的问答。实际上，我针对你提到的两个主题提出具体问题 - 而不是懒加载图像，我询问设计响应式图像组件；而不是 ARIA 用于下拉菜单，我询问 ARIA 用于通知。
这只是整个过程的一小部分，但对我来说，它在短时间内提供了很多信息。我不希望人们当场记住所有内容，但如果不知道任何内容，却在过去复制粘贴过，对我来说就是一个危险信号，因为你应该了解你所做事情的“原因”。
完全正确。这感觉像是白板测试的温和版本，但仍然显示了科技行业招聘的弊端。
@ShirG 我想你可能没有抓住重点？
能够解释这些项目的人，证明了他们确实“自己学习东西”，因为这些项目不是所有人的标准知识，并且需要更深入的研究。它肯定能够将初级候选人与中级/高级候选人区分开来。
我认为，让候选人谈论他们的技术知识，而不是让他们进行现场编码挑战，最终更人性化。
OP 没有说他们应该知道如何解释这些行，而仅仅是进行一次对话，看看他们是否以人性化的方式理解了面前的内容。
@ShirG 出于好奇，你是管理职位吗？你如何进行面试。非常想听听你的想法以及你为哪家公司招聘？
感谢 Aaron，我们的确是想展示更深层次的知识，而不用进行现场编码挑战。
你说的也对，候选人并不需要知道每行代码，而是进行一次对话，通常会导致一些有趣的问题，例如，在“margin: 0”行之后，我总是会讨论归一化和重置 CSS 之间的区别。
有趣的是 - 我们最终雇用的工程师对所有行都给出了不错的答案，除了
http-equiv="origin-trial"，但当然，这不是我们雇用某人的唯一原因（这只是整个过程的一小部分）。我同意作者的观点，因为大多数这些都是非常基础和必不可少的，特别是随着新事物的快速出现，网页开发者需要了解新的标签，例如添加到主屏幕的配置。尤其是这一条，因为几乎每个人都体验过添加到主屏幕或安装为应用程序通知，无论使用什么浏览器。有必要在所有领域不断学习新事物，而不仅仅是网页。聪明而勤奋的人将能够回答一些前 10 名问题。可以推测作者并没有期望所有受访者都能理解所有问题。
对这里出现的所有抵制感到惊讶。作为一个既是招聘者又是被招聘者的人，我认为这很棒。
#9 - 可接受的答案
这是对所有计算机起源的 OG 参考...在俄勒冈小径上。
我们能停止称 HTML 和 CSS 为编码吗？它是标记和样式。不是编程语言，接下来就是 json 开发人员。
你如何根据这一点测试资历？老实说，这完全是特定问题，而没有使用过它的人将无法正确回答任何问题，或者开始玩猜谜游戏。我期望初级开发者比高级开发者更了解这一点，因为只有像大师一样编码，并不意味着你是高级开发者。
我认为我在任何地方都没有使用“编码”这个词，但是编写标记和样式，从定义上来说就是编码。HTML 确实可能不符合“编程语言”的传统定义，我认为你表达的方式本质上是设置门槛。我认为 HTML 或 CSS 是否被归类为编程语言并不重要 (https://css-tricks.org.cn/html-is-not-a-programming-language/)。
至于你的第二个观点，我同意这些非常特定于该职位，但这正是重点 - 我想聘请全栈开发者，他们将编写 HTML 和 CSS（以及 JavaScript），因此这对他们来说是必要的知识。
看起来是面试技术部分的好主意，即使这可能需要 10 分钟到 4 个小时的时间。
仅仅解释什么是 DOCTYPE 或字符集（以便人们在数据库记录中不会出现那些奇怪的问号）就可以导致非常长的答案。
在我很久以前进行的最后一次面试中，他们要求我用 JavaScript 实现 Google 计算器的副本。
有道理！我们通常会花大约 10 分钟时间进行面试的这一部分，因为如果候选人对答案不确定，我可以引导他们走向正确的方向，而且我可以很快地判断他们是否确实知道答案，所以我不需要他们对每个主题都长篇大论。
除非我在文章中漏掉了什么，否则我假设没有一个候选人指出推特正在使用`
`标签省略，这虽然在满足某些条件的情况下是一种完全有效的做法，但也足够引人注目，以至于如果有人问我所呈现的源代码，我一定会指出这一点。你错过了这个 :)
好奇的是，为什么你会关心有人知道这个今天几乎没有意义的历史信息，除了作为一个小问题之外。
“但在网景/IE 时代，浏览器不得不从多个竞争版本中找出哪个 HTML 标准用于渲染页面，这非常困难。”
PS- 不是在挑战你，只是想听听你对这个问题的思考。
我已经编写 HTML 10 多年了，那时我们写的远不止第一行的``。我真的很感谢我们是如何走到今天的，因此关注历史。我认为没有必要知道这一行背后的所有历史，但知道它告诉我你要么非常好奇，要么非常有经验。
优秀的文章。但我认为你可能难以招到合适的人选的原因是，你将其标注为高级全栈 JavaScript 工程师。
这个问题/讨论会筛选掉很多用 JavaScript 编写 Node 的人，因为这个问题完全是基于前端的。如果你将招聘职位改为高级前端工程师，我猜你会得到更符合你所寻找的技能的人选。
同意！
所以你测试一个人是否能成为一名优秀的全栈 JavaScript 开发人员的方法是让他解释 10 行代码，其中没有一行是 JavaScript？
没错 ;)
说句玩笑话，这是我们在一个小时的电话中讨论了十分钟的问题之一，其他问题更具体地针对该角色（例如，在前端框架中设计一个组件，在 Node 中设计一个 RESTful API，可访问性等等）。我认为全栈 JS 开发人员仍然应该了解足够的 HTML 来回答这些问题！
我的意思是，这些 JS 代码将与 HTML 和 CSS 代码交互并进行修改。如果你精通 JS，但无法确保你的代码对 DOM 执行了正确的操作，或者无法确保它输出正确的 SEO 标签，这好吗？
即使一些在这次测试中包含的元标签听起来很古老，但我还是能得到 100 分中的 100 分，这真棒！
哈哈，被录用了！;)
我认为很多评论都误解了重点。我认为作者是想深入了解候选人，进行对话以了解这个人是否合适。我在过去面试时，更喜欢对话，并且按顺序寻找以下几点：
1. 能力（候选人是否“理解”软件开发）。如果你不会编程，我就不想要你；我没有时间教你这些。
态度。他们是否热心、称职、具备“正确的东西”。如果有人懒惰，我就不想要他们。我正在寻找激情，对仅仅为了薪水而生产更多垃圾以外的东西感兴趣。我想知道他们对什么感兴趣。
知识。技术知识可以轻松地从谷歌或书本中学习，所以它确实排在最后。我正在寻找长期的关系（有时间培训），而不是短期的恋爱！
这篇文章写得真好，我作为一名高级前端工程师，很高兴我能从脑海中提取出一些答案！
然而，我认为这些问题的完美答案不应该是像你提到的例子那样详细。开发过程的一部分包括搜索、阅读，不一定是复制粘贴，而是真正理解事物的工作原理，即使你没有记住它，你仍然可以通过这样的过程来保证质量和可扩展性。然而，我非常喜欢让候选人解释这些 10 行代码的想法。绝对是面试中值得讨论的话题！
嘿，Anand.. 你对 doctype 的答案有点不完整。
在网景/IE 时代，有很多浏览器行为是未指定的。所以问题不是“使用哪个 HTML 标准”，而是“HTML 规范没有涵盖这一点”。再加上这两个阵营都在标准化之前进行创新，这导致了各种各样的差异。doctype 用作一种机制，表明“我想要最严格的浏览器行为”，而不是“给我兼容模式”。（再加上它对整个 XHTML 热潮很有用 ;)
“兼容模式”被编纂为怪癖模式，最终它也被标准化了：https://quirks.spec.whatwg.org/ 这意味着浏览器不仅收紧了它们的“标准”行为，而且在过去十年中还做了很多工作，使其在怪癖模式下保持一致。它不再是不可预测行为的狂野西部，而是一个关于我们保留在 Web 平台上的约 13 个“错误”的完整列表（主要是为了让 90 年代创建的页面以相同的方式呈现）。
总之，我认为完美的答案是：“doctype 声明确保我们不会得到怪癖模式行为”或“避免奇怪的错误”。
我可以自信地告诉你，如果 Chris 在一天之内从 Codepen 中删除了 doctype，我们将会有成千上万的人挠头几个小时，因为这“根本说不通”。这是一个非常痛苦的遗漏。:)
另外，对于 HTML 极客来说...... 如果怪癖模式规范对你来说还不够，请欣赏这部杰作：https://hsivonen.fi/doctype/
太棒了。一如既往，感谢 Paul 分享你的知识！
写得很好，我学到了很多东西。谢谢！
`lang="en"`是所有代码中最重要的事情，在你的完美答案中几乎没有提及。你没被录用！:)
property 属性来自 RDFa Core 1.1 规范。“og”部分是一个前缀，用于避免重复代表完整值的较长 URI。如果父元素（本例中是 html）声明了“og”前缀，则解析器可以将 og:site_name 映射到完整 URI。
解析器会看到带有前缀的属性，知道它无法映射到引用 URI，并且现在通常假定它是一个 Open Graph 协议值，主要由 Facebook 使用。
https://ogp.me/
https://www.w3.org/TR/rdfa-core/#h-s_curies
我真的很觉得这篇文章写得很好。我认为这个面试测试非常有针对性。它不仅仅是测试候选人对编写 Html 的熟练程度。作为一名已经编写 Html 8 年多的程序员，面试官会从我那里了解到更多信息，不仅仅是我的编写 Html 能力。
例如，有些标签从一开始就存在，而有些则是相对较新的——如果我能解释这两种情况，这说明 1. 我拥有我声称拥有的经验，2. 我一直都在努力改进或“更新”我声称拥有的知识。
另一个例子是，如果我注意到没有 head 标签，但无法解释原因，面试官就能判断出我是从网上复制粘贴的，还是对没有 head 标签的原因感到好奇。这将表明我对学习和理解的兴趣或“动力”水平。
Anand，这真的很好。读起来很令人满意。
我想——有些人可以逐个列出 Web 标准，并对每个标准进行说明，甚至包括一些历史和每个功能的当前浏览器支持状态，即使它不常见或已弃用。
例如，Twitter 上省略的 head 标签。它不常见，但没什么大不了的。这种情况下的行为有据可查，并且会存在跨浏览器一致性。它不是一个未知数。它只是不常见。
能够做到这一点的人解决新问题会很快，因为他们知道为什么使用以前的解决方案，为什么不使用某些功能，并且他们不是使用样板代码或仅仅复制他们看到的内容，而是可以每次从头开始编写。
现在来看反面。有些人不会以这种方式存储信息。他们对每个功能的重要性在他们脑海中的比例是不同的——与他们对功能的熟悉程度以及到目前为止在实际使用中遇到的统计频率成正比。
这使得他们在制作具有所有常见功能的网站方面非常擅长，但他们并不总是确切地知道为什么要这样做，并且他们出于不同的原因注意到一些事情。比如省略的 head 标签——即使省略 head 标签与保留它没什么区别（除了节省一些字符），但这可能会让人感到意外。因为他们总是看到 head 标签，所以他们可能会（错误地）得出结论，只有马虎的人才会省略标签，因为所有专业网站都有 head 标签。他们可能会在超出常见知识范围的特性上绊倒，即使标准非常清楚地说明了这些特性的处理方式，他们也可能对看到 x 比 y 更多的原因有非常奇怪的潜在理论。
最终我认为每个人都会从统计方法过渡到精通方法，在那里他们可以列出功能等等。这篇文章展示了一种很棒的方法来找出你的候选人更接近旅程的哪一边。
DOCTYPE 不是必需的，meta charset 不是必需的，我怎么会知道这一点？因为我在不需要使用它们的情况下构建了页面。如果我遇到需要使用它们的状况，我会简单地查找并学习如何使用它。“复制粘贴代码”——所以你是说你宁愿要一个记住大量晦涩信息的人，而不是一个知道如何将事物组合在一起的人？这种心态不应该在任何地方被容忍。你似乎声称通过使用这种方法更“人性化”或更包容，但事实并非如此——无论他们是否胜任与你无关，你只关心他们记忆了什么。对你来说，他们就像行走的知识盒子，如果他们恰好不知道这个特定信息，他们对你来说就毫无用处。
读起来真糟糕。我甚至无法阅读“完美答案”部分，因为它们太浪漫和理想主义了，写它们的人一定是直接从仙境出来的。应该像正常人一样解释它们。
哇！这对于一篇以以下内容开头的文章来说是一个相当大的看法
但我猜这是“糟糕”内容中不值得阅读的部分，是吗？
这里的笑话是压缩总是将全部代码放在一行中，所以解释 10 行意味着解释整个网站的全部 javascript 和 css。
他很幸运，Twitter 没有压缩它的 html 模板。
所有这些读起来都很奇怪。
你大部分的完美答案提出了比它们回答的更多问题。这些答案将非常有趣，可以在一篇类似这样的文章中阅读。
以#3为例。
你会期望任何与计算机相关的资深人士都能推断或了解“meta”、“charset”和“utf-8”的含义。但是关于 utf-8 的替代方案呢？utf-8 和 unicode 之间有什么区别？如果页面使用不同的、非常晦涩的编码怎么办？浏览器如何在不知道编码的情况下解码告诉它编码的标签？这是否意味着 charset 仅管理用户可读纯文本的编码，或者管理用户可读和属性值的编码，但不管理 html 标签和属性，它们需要使用一组编码？你可以在文档中混合编码吗？如果省略它会发生什么，比如会有什么问题？会解决什么问题？
有太多有趣的事情可以探索。与此同时，你提供的答案平淡无奇，毫无信息量。具有讽刺意味的是，你对你自己问题的“完美答案”让你看起来像是在自己面试中跌跌撞撞。如果我是面试官，我会认为这个答案不及格。但即使候选人一无所知，从上面的一系列问题开始也能表明他们知道如何分解问题，寻求知识并遵循逻辑线索——你知道，解决问题，这就是任何工程任务的本质。
你完全正确，这项练习的目的是从问题开始，然后转向讨论。你对#3的所有问题都与我在讨论中提出的问题非常相似……也许我的解释很糟糕，但想法正是这样——从这一行开始，讨论后续问题。“完美答案”实际上是我寻找的关键字，作为衡量他们是否走上正轨的指标。
正如其他人所说，你问了一些只有能够制作 Web 应用所有方面的人才偶尔会遇到并可以轻松谷歌搜索的问题。
在将这种详细的知识水平视为必不可少的同时，你展示了一些遗漏全局的证据——你知道为什么我认为 Twitter 省略了 html 标签吗？可能只是一个疏忽，一个错误。它当然不会对网站性能产生实际影响（如果有的话，它会略微负面，并且肯定会成为未来浏览器的命运的牺牲品，这些浏览器可能相当合理地被设计为依赖于有开头的 head 标签）。最后，Twitter 的用户界面确实是我所知道的其中一个最糟糕的界面，所以我不会将他们的网站视为任何事物的榜样。
我从这篇文章中学到了很多。感谢分享。我必须说，即使你解释了，我仍然不明白 `http-equiv` 属性。哈哈
这些是每个做 Web 开发的人应该知道的常识。然而，在面试时，你的大脑一片空白，有时并不容易。
正如其他人所说，有很多种复杂的方法来回答这些问题。至于 Paul Irish 和 quirks 模式，我在 2001 年做 Web 开发时，NN4 仍然是一个使用率很高的浏览器。
许多人可能过度依赖复制粘贴或框架，我同意缺乏深入的知识并不特别令人鼓舞。
还有一点是，有些人有时间阅读和学习大量知识，而其他人则被家庭责任甚至下班后照顾亲人或家庭成员所限制。
你想要的是一个对这项工作充满热情的人，一个把学习作为爱好的人，而不仅仅是工作。
这对于那些没有花时间阅读和学习那些由于框架而很少编写的知识，但在其他特定领域是专家的人来说也是略微不公平的，比如数据库设计、UI/UX、PHP 或 Python。
我会问一些关于在终端上使用 webp 和自动化 bash 脚本等等的问题，以及理解 Lighthouse 等。