如何在网页源代码前10行，你知道吗？

作者| 阿南德翻译 |

出品 | CSDN（ID：）

最近，我在为我的公司招聘一名高级全栈工程师。 由于我们是远程工作，所以面试是通过 Zoom 进行的，我注意到一些非常适合这份工作的开发人员并不擅长在白板上编写程序。 所以我们进行了一个小时的技术谈话，我询问了网络指标、可访问性、浏览器大战和其他与网络相关的问题。 我经常问的一个问题是：“请解释网页源代码的前 10 行”。

在我看来，这是一个非常简单的测试，但是却可以测试应聘者对前端基础知识掌握的深度。

在采访期间，我会分享我的屏幕，打开它并单击“查看源代码”。 然后我要求他们逐行解释 HTML 代码，尽可能深入。 我还放大了屏幕，让候选人看不到完整的代码行，但可以大致了解代码的含义。 如下：

请注意，我们的技术讨论只是一次对话，所以我不期待完美的答案。 如果我听到一些正确的关键词，我就知道候选人理解这个概念，我可以引导他们朝着正确的方向前进。

第一排：

网页源代码的第一行很适合这种类型的面试，因为候选人对网页的了解在很大程度上反映了他们的经验。 还记得当年流行的时候，需要像Chris在2009年的文章《The》中列举的那样，写一串XHTML()。

最佳答案: 这一行是文档类型定义，所有HTML文件的第一行都必须这样写。 可能有人会认为这行代码是多余的，因为浏览器已经知道响应的MIME类型是text/html，但是在 和 时代，有很多不同的HTML标准，所以浏览器很难来判断渲染页面应该遵循什么标准。

这很烦人，因为每个标准都会生成不同的布局，这就是为什么需要这个标签来帮助浏览器渲染它。 它曾经很长并且包含标准链接（就像今天的 SVG 文件一样），但幸运的是这种简洁成为 HTML 5 中的标准并一直延续到今天。

接受的答案：这是让浏览器知道这是一个 HTML 5 网页并且应该呈现为 HTML 5 的标签。

第二行：

这条线可以判断候选人是否了解可访问性和本地化。 令人惊讶的是，我采访的人中很少有人知道 dir 属性，但这个属性可以引发关于屏幕阅读器的讨论。 几乎每个人都能理解 lang="en" 属性的含义，即使他们从未使用过它。

最佳答案：这是 HTML 文档的根元素，其他元素位于其中。 它有两个属性：方向和语言。 属性的值为“left-to-right”，告诉用户代理内容的方向； 这个值也可以是“从右到左”，比如阿拉伯语； 或“自动”，它允许浏览器自行确定方向。

lang（语言）属性表示此标记中的所有代码都是英文的。 您可以将此值设置为任何语言标记，甚至可以区分 en-us 和 en-gb。 它还可以帮助屏幕阅读器确定使用哪种语言阅读文本。

第三行：

最佳答案：源代码中的元标记为文档提供元数据。 set()属性告诉浏览器使用哪种字符编码，使用标准的UTF-8编码。 UTF-8 很棒，因为它包含许多字符点，因此您可以在源代码中使用各种符号，甚至是表情符号。 将此标记放在文档的开头很重要，这样浏览器在遇到它时就不会开始解析过多的文本。 我记得规则是将它放在文档开头的 1k 字节以内，但我认为最好的做法是将它放在第一行。

另外，似乎出于性能原因省略了标签（以减少加载的代码量），但我仍然认为应该显式编写，因为它是元信息、样式等的容器。

第四行：

最佳答案：源码中的这个meta标签是用来在小屏幕（比如手机）上指定正确尺寸的。 如果您还记得最初的幻灯片，乔布斯在一个 4.5 英寸的小屏幕上展示了整个纽约时报网站。 能够用两根手指放大以清楚地看到文本，这是一个非常有用的功能。

但是现在，网页被设计成响应式的，width=-width 会告诉浏览器使用设备宽度的 100% 作为视口大小以避免水平滚动条，但你甚至可以指定一个像素宽度。 标准的最佳做法是将初始比例设置为 1，将宽度设置为 -width，以便人们在需要时仍然可以放大。

这些值在源代码的截图中没有显示，但最好知道：还使用了user-=0，顾名思义，禁止用户放大和缩小。 它在可访问性方面不是很好，但它使网页更像本机应用程序。 同样的道理，也设置-scale=1（可以用最小和最大的scale来限制缩放的范围）。 通常，只需设置全屏宽度和初始缩放就足够了。

第五行：

大约 50% 的候选人知道 Open Graph 标签，回答这个问题很好地证明他们了解 SEO。

最佳答案：这个标签是一个Open Graph (OG) 标签，用于设置网站名称。 Open Graph协议由Open Graph提出，旨在方便获取链接内容，并以卡片的形式展示链接。 开发者可以在网页中添加各种细节和封面图片，然后在分享链接时生成漂亮的卡片。 事实上，现在使用诸如自动生成开放图图像之类的工具更为普遍。

另一个有趣的地方是，meta 标签通常使用 name 属性，但 OG 使用非标准属性。 我想这只是我的偏好？ 标题、url和这几个Open Graph标签有点多余，因为这些信息可以从普通的meta标签中获取，但人们仍然设置这些标签是安全的。 今天的大多数网站都会使用 Open Graph 和其他原始标签的组合来组合网页内容以生成内容丰富的预览。

第六行：

大多数候选人不知道这个，但有经验的开发人员可以讨论如何针对 Apple 设备优化站点，例如 apple-touch-icons 和在中间锚定选项卡上显示的 SVG 等。

最佳答案：您可以将网站锚定到主屏幕，使其看起来像本机应用程序。 不支持 Web Apps，你不能在 iOS 上真正使用其他浏览器引擎，所以如果你想要一个类似原生的体验，你别无选择。 对于本机效果，此行用于告知应用程序的名称。 下一行类似，控制应用程序启动时状态栏的显示方式。

第八行：

最佳答案：这个 meta 标签定义了 Apple 设备上的状态栏颜色，现在几乎是一个网络标准。 它指定浏览器应如何为周围的 UI 设置主题。 和桌面上的 Brave 浏览器都可以很好地处理它。 可以在 中设置任何 CSS 颜色，甚至可以通过 media 属性设置仅在满足特定媒体查询（例如暗模式）时才显示颜色。 您还可以在 Web 应用程序中定义此属性和其他属性。

第九行：

我采访过的候选人都不知道这一点。 我想只有对最新的技术趋势有深刻理解的人才知道这个。

最佳答案: 试用可以使用网站上最新的实验性功能，基于用户代理跟踪反馈并报告给网络标准社区，而不需要用户同意参与功能标记。 例如，Edge 有一个双屏和可折叠设备的试用版，这是一个很酷的功能，你可以根据折叠手机是打开还是关闭来实现不同的布局。

接受的答案：不知道这个选项。

第十行：html{-ms-text-size-:100%;--text...

几乎没有人知道这个选项，只有那些特别了解 CSS cases 和优化的人才知道。

最佳答案：假设您的网站不支持移动设备，并且您在屏幕较小的设备上打开该网站。 浏览器可能会放大字体以便于阅读。 将 CSS 的 text-size- 设置为 none 以禁用此功能，或将其设置为百分比以告诉浏览器它可以放大多少。

这里，最大值设置为 100%，这意味着文本不会超过其实际大小。 这样做的原因是该站点已经是响应式的，因此他们不想冒因允许大字体而破坏布局的风险。 此标记应用于根 HTML 标记，因此它适用于所有内容。 由于这是一个实验性 CSS，因此需要供应商前缀。 另外，这个css之前少了一个，不过应该是最小化到上一行，我们就是没看到。

接受的答案：我不知道这个选项的细节，但是 -ms 和 -- 分别是非标准属性的基于浏览器的供应商前缀。 我们曾经在 CSS3 出现时使用这些前缀，但随着属性从实验性变为稳定，或被标准接受，不再需要这些前缀。

奖励：第 11 行：body{:0;}

这行代码很有意思，因为可以顺便问一下页面重置和归一化的区别。 几乎每个人都知道正确答案的某个版本。

最佳答案: 因为不同的浏览器有不同的默认样式(user-agent style )，所以应该通过重新设置属性来覆盖默认样式，使网站在不同设备上有相同的外观。 在这里，告诉浏览器去掉 body 标签的默认值。 这减少了浏览器之间的不一致，但我更喜欢使用正则化样式，即在所有浏览器中应用相同的默认样式，而不是通过重置简单地删除它们。 有些人甚至使用 * {:0 }，这是压倒性的并且会影响性​​能，但现在更常见的是导入样式表，如 .css 或 reset.css。

补充

我喜欢通过我的浏览器工具查看网站的制作，所以我想到了这次采访的想法。 尽管我认为我很了解语义 HTML，但每次我这样做时我都会学到一些新东西。

由于它主要是一个客户端 React 应用程序，因此源代码中只有几行。 即便如此，还有很多东西要学！ 还有一些很有意思的代码，留给读者作为练习。 面试能解释多少行代码？

"search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">

告诉浏览器用户可以设置搜索引擎。

"preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" />

这个有很多要讨论的，尤其是随机数。

<link rel="alternate" hreflang="x-default" href="https://twitter.com/" />