一个简单的测试，能了解他们在前端基础知识方面的深度。逐行理解 HTML，能够更快的了解人员的对于前端的掌握程度
第 1 行：<!DOCTYPE html>
每个文档源代码的第一行都非常适合这次面试，因为候选人对 DOCTYPE 声明了解多少，往往与他们的工作经验成正比。记得 Dreamweaver 时代长长的 XHTML DOCTYPE 行，不同的时代有着不同标准：
- HTML 4.01 Strict
1
2<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> - XHTML 1.0 Strict
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
- XHTML 1.0 Transitional
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" |
- XHTML 1.1
1 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" |
- HTML 5
1 | <!DOCTYPE html> |
完美答案：这是文档类型（doctype）声明，我们总是将它放在 HTML 文件的第一行。你可能会认为这些信息是多余的，因为浏览器已经知道响应的 MIME 类型是 text/html；但在 Netscape 和 Internet Explorer 时代，浏览器需要从多个竞争版本中确定使用哪个 HTML 标准来渲染页面，这是一项非常困难的任务。
这尤其让人烦恼，因为每个标准生成的布局都不同，因此采用了这个标签来简化浏览器的工作。以前，DOCTYPE 标签很长，甚至包含规范链接（有点像今天的 SVG），但幸运的是，简洁的 <!doctype html> 在 HTML5 中被标准化，并一直沿用至今。
也可以接受的答案：这是 DOCTYPE 标签，告诉浏览器这是一个 HTML5 页面，并应按照 HTML5 标准进行渲染。
第 2 行：<html dir="ltr" lang="en">
源代码的这一行能知道候选人是否了解无障碍性和本地化。只有少数人了解 dir 属性，但这是一个很好的契机去讨论屏幕阅读器。几乎所有人都能识别出 lang="en" 属性，即使他们之前没有使用过。
完美答案：这是 HTML 文档的根元素，所有其他元素都在这个元素内部。这里，它有两个属性，方向和语言。dir 属性的值是从左到右，告诉用户代理内容的方向；其他值包括从右到左的语言（例如阿拉伯语），或者直接使用 auto，由浏览器自行决定。
语言属性 lang 告诉我们，所有在这个标签内的内容都是英文；你可以将此值设置为任何语言标记，甚至可以区分 en-us 和 en-gb，例如。这对于屏幕阅读器来说也很有用，它可以知道用哪种语言来朗读内容。
翻译：
第 3 行：<meta charset="utf-8">
完美答案：源代码中的 meta 标签是用于提供有关该文档的元数据。charset 属性告诉浏览器使用哪种字符编码，而 Twitter 使用的是标准的 UTF-8 编码。UTF-8 非常棒，因为它有许多字符点，因此你可以在源代码中使用各种符号和表情符号。重要的是要将此标签放在代码的前面，这样当浏览器解析到这一行时还没有开始解析太多文本。我记得规则是将其放在文档的前 1KB 内，但我认为最佳做法是将其直接放在 <head> 的顶部。
顺便提一下，似乎 Twitter 出于性能原因省略了 <head> 标签（减少了要加载的代码量），但我仍然喜欢显式地写出这个标签，因为它是所有元数据、样式等的清晰归属地。
第 4 行：<meta name="viewport" content="width=device-...">
完美答案：这个源代码中的 meta 标签用于在小屏幕设备（如智能手机）上正确调整网页的大小。
如今，网站在设计时就已经是响应式的，width=device-width 告诉浏览器使用设备宽度的 100% 作为视口宽度，以避免水平滚动。你也可以为宽度指定具体的像素值。标准的最佳做法是将初始缩放比例设置为 1，并将宽度设置为设备宽度，这样用户如果愿意的话，仍然可以缩放。
源代码截图并没有显示这些值，但值得知道的是：Twitter 还应用了 user-scalable=0，顾名思义，这禁用了缩放功能。这对无障碍性不利，但让网页感觉更像是本地应用程序。它还设置了 maximum-scale=1，也是出于同样的原因（你可以使用 minimum 和 maximum 缩放值来限制缩放比例）。通常，设置完整的宽度和初始缩放比例就足够了。
第 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 属性，但 Open Graph 使用了非标准的 property 属性。我猜这是 Facebook 的风格？标题、URL 和描述的 Open Graph 标签有点多余，因为我们已经有了常规的元标签来处理这些内容，但人们为了安全起见还是会添加它们。如今，大多数网站使用 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 状态栏颜色 meta 标签的标准化等效标签。它告诉浏览器为周围的 UI 设定主题颜色。Android 上的 Chrome 和桌面端的 Brave 都能很好地处理这个标签。你可以在 content 中使用任何 CSS 颜色，甚至可以通过 media 属性为特定的媒体查询显示颜色，比如支持深色主题。你也可以在 Web 应用程序清单中定义这个和其他附加属性。
第 9 行：<meta http-equiv="origin-trial" content="...">
很少人知道这个标签。猜想只有在对新兴标准动态有深入了解的情况下，才会知道这个标签。
完美答案：Origin 试验允许我们在网站上使用新的实验性功能，用户代理会跟踪反馈并将其报告给 Web 标准社区，而不需要用户手动开启功能标志。例如，Edge 就有一个针对双屏和可折叠设备原语的 Origin 试验，这非常酷，因为你可以基于可折叠手机是打开还是关闭来创建有趣的布局。
第 10 行：html{-ms-text-size-adjust:100%;-webkit-text...
几乎没有人知道这一行，只有了解 CSS 边缘情况和优化的人才能弄明白这一点。
完美答案：想象一下，如果你没有一个响应式网站，并在小屏幕上打开它，浏览器可能会调整文本大小以使其更容易阅读。CSS 的 text-size-adjust 属性可以禁用此功能（使用值 none）或指定一个百分比，允许浏览器将文本放大到该百分比上限。
在这种情况下，Twitter 设置的最大值是 100%，因此文本不会比实际大小更大。他们这样做是因为他们的网站已经是响应式的，他们不想冒浏览器通过更大的字体破坏布局的风险。这个属性应用于根 HTML 标签，因此它适用于内部的所有内容。由于这是一个实验性 CSS 属性，需要使用供应商前缀。另外，<style> 标签在这个 CSS 前面缺失了，但我猜这是因为代码被压缩到了上一行，所以我们没有看到。
也可接受的答案：不知道具体这个属性，但 -ms 和 -webkit 是分别为 Internet Explorer 和基于 WebKit 的浏览器需要的供应商前缀，用于非标准属性。当 CSS3 刚发布时，我们需要这些前缀，但随着属性从实验变为稳定或被纳入标准，这些前缀逐渐被标准化属性取代。
第 11 行：body{margin:0;}
这行代码特别有趣，因为你可以接着问有关重置和规范化网页样式的区别。几乎所有人都能回答出某种正确答案。
完美答案：由于不同的浏览器有不同的默认样式（用户代理样式表），你需要通过重置属性来覆盖它们，以确保网站在各个设备上的外观一致。在这种情况下，Twitter 告诉浏览器删除 body 标签的默认外边距。这只是为了减少浏览器的不一致性，但我更喜欢规范化样式而不是重置样式，也就是说，在不同浏览器中应用相同的默认样式，而不是完全删除它们。以前人们甚至使用过 * { margin: 0 }，这完全是过度操作，对性能也不好，但现在常见的做法是导入类似 normalize.css 或 reset.css 的东西，然后从那里开始。
更多代码行！
由于 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选择器进行了 polyfill）。