能向我解释一下推特HTML网页的前10行代码是什么意思吗

来源：好完美浏览次数：发布时间：2022-12-17 08:31:14

在过去的几周里，我一直在为我工作的公司 Pibio 招聘一名全栈工程师。由于我们公司是远程办公，所以所有的面试都是远程进行的。在这个过程中，我发现很多面试官，尽管他们的工作很擅长，但实时代码却做不好。因此，在大约一个小时的技术讨论中，我选择向他们询问一些关于网络生命周期、可访问性、不同浏览器之间的区别或其他与网络相关的问题。我最喜欢问的问题之一是：“你能给我解释一下 Twitter HTML 页面的前 10 行是什么意思吗？”

在我看来，这可以充分展示面试官的前端基础。接下来，我将给出这个问题的答案。

在谈话过程中，我会分享我的屏幕，打开 Twitter 的网页，然后点击查看源代码。然后，让他们逐行解释，怎么解释，完全看面试官。在这个过程中，我会刻意放大文字，一方面是为了让文字更清晰，另一方面只能看到一部分内容，但可以从中获取有效信息。它大致是这样的：

你要明白，目前的上下文是技术讨论，所以我不指望任何人给出完美的答案，只要我能听到一些正确的关键词，我就能理解候选人知道这个概念，而在这一点上，我会引导他表达更多，我想听到的，正确的内容。

第一排：

第一行关于DOCTYPE声明的代码真的很适合在面试中讨论，因为对声明的理解程度可以间接说明面试者的工作经历。我仍然记得在 Dreamweaver 中必须使用 XHTML 长声明的日子，正如 Chris 在 2009 年一篇名为“通用声明定义”的文章中所写的那样。

完美答案：我们通常把这种文档类型的声明写在HTML文件的第一行。您可能会争辩说此信息是多余的完美国际任务栏不显示在屏幕上，因为浏览器已经知道响应的 MIME 类型是 text/html，但在 Netscape 浏览器时代完美国际任务栏不显示在屏幕上，浏览器面临着选择使用哪个版本的 HTML 标准进行解析的艰巨任务并呈现页面。

最烦人的是不同版本的HTML标准会生成不同的页面布局，所以这个标签就是用来方便浏览器区分版本的。曾几何时，浏览器选项卡很长，甚至会包含规范链接，有点像今天的 SVG。幸运的是，现在，simple 已经在 HTML5 中标准化了。

勉强接受的回答：这是DOCTYPE标签，它告诉浏览器这是一个HTML5页面，应该按照相应的标准进行解析和渲染。

第二行：

完美国际任务栏不显示在屏幕上

这一行让我知道候选人是否了解文件可访问性和本地化。令人惊讶的是，很少有人知道 dir 属性的作用和含义（但这个属性对读者来说至关重要），但几乎每个人都能清楚地表达 lang="en" 的含义，即使他们以前从未使用过这个属性。

完美答案：这是HTML文档的根组件，整个HTML文档都会嵌入其中。它有两个属性，“方向”和“语言”。“direction”属性的可选参数有ltr（从左到右）、rtl（从右到左）和auto（自动），分别表示用户代理显示内容的方向。比如阿拉伯语等语言需要设置值为rtl。如果将值设置为 auto，则意味着您将选择权交给了浏览器。

“language”属性的值是“en”标签，它告诉我们这个文档的内容是英文的。您还可以将此值设置为任何语言的标签，甚至可以区分美国英语和国家英语。对于屏幕阅读器，“语言”属性的值非常重要。

第三行：

完美答案：源码中的meta标签是用来表示文档支持的元数据类型。字符集（charset：字符集的简称）属性告诉浏览器使用哪种字符编码。在这里，Twitter 使用标准的 UTF-8 编码。UTF-8 对字符的支持非常好，您可以在源代码中使用各种符号和表情符号。将此标记放在代码的前几行非常重要，这样浏览器就会及早知道如何解释代码。一般规则是将这行代码放在源代码的前千字节，以防止不必要的工作，但我认为最好放在前面。

顺便说一下，由于性能问题（减少代码大小），Twitter 似乎省略了标签，但在我看来，它们应该明确定义，因为这样你就可以清楚地知道元数据、样式等。

第四行：

完美答案：源代码中的meta标签表示网页应该以适当的尺寸显示，即使在智能游戏这样的小尺寸设备上也是如此。如果你还记得 iPhone 的原始文字演示，史蒂夫乔布斯在 4.5 英寸的小屏幕上展示了纽约时报网站的全部内容，你可以拖动手指阅读。功能。

现在网站的设计完全是响应式的，width-device 的意思是告诉浏览器使用 100% 的设备宽度作为视口，所以没有水平滚动，你甚至可以使用宽度的百分比作为标尺。标准的最佳做法是将初始比例设置为 1，将宽度设置为设备宽度，以便人们可以根据需要进行缩放。

屏幕截图没有显示这些值，但很高兴知道：Twitter 也应用了 user-scalable=0，顾名思义，禁用缩放，访问不方便，但让网页更像原生应用。出于同样的原因，它还设置了 maximum-scale=1 ，这也设置了最小比例因子。通常，设置全宽和初始比例就足够了。

完美国际任务栏不显示在屏幕上

第五行：****

大约50%的考生都知道og（Open Graph）标签，能回答这个问题的考生一定对SEO（Search Engine Optimization）有一定的了解。

该协议最初是由 Facebook 指定的，目的是为了更方便地提取和预览网页上的信息，开发者可以添加各种信息或封面图片来装饰它。事实上，现在更常见的是使用 Puppeteer 等工具自动生成。（CSS-Tricks 使用 WordPress 插件来做到这一点）。

另一个有趣的旁注是站点名称属性，但这是 OG 非标准属性。我想这只适用于 Facebook？标题、链接、描述性 Open Graph 标签可能看起来多余，因为我们已经有了响应标签，但人们倾向于添加它们只是为了安全。如今，许多网站都使用 Open Graph 属性和其他标签来为页面生成丰富的预览。

第六行****：

大多数候选人不知道这一点，但有经验的开发人员会讨论如何在 Apple 设备上优化网站，例如点击 Apple 图标和 Safari 的固定导航栏。

完美答案：您可以将网站固定到 iPhone 的主屏幕，使其像本机应用程序一样运行。Safari 不支持 Progressive Web Apps，你不能在 iOS 设备上的其他浏览器中使用这个功能，所以如果你想要那种原生体验，你只能使用 Twitter 之类的东西。添加这个标签来告诉 Safari 这个应用程序的标题是 Twitter。下一行的含义与这一行类似，告诉控制台应用程序启动时状态栏应该是什么样子。

第八行****：

完美答案：这是Web中的标准属性，相当于苹果的状态栏。目的是告诉浏览器要为 UI 设置什么主题。Android 上的 Chrome 和桌面上的 Brave 都很好地支持这个属性。您可以在内容中填写任何 CSS 颜色值。您可以使用 Media 属性为特定设备设置特殊颜色，例如，支持深色主题。您还可以在 Web 应用程序清单上定义此属性和其他属性。

第九排****

完美国际任务栏不显示在屏幕上

我面试过的候选人都不知道这个属性。我认为，只有深入了解新标准，您才会知道这一点。

完美的答案：Origin beta 允许我们在我们的网站上使用新的和实验性的功能，用户代理在没有用户授权的情况下跟踪用户行为并向标准制定网络社区报告反馈。比如Edge浏览器就尝试了双屏可折叠设备，这真的很酷，因为你可以根据可折叠游戏的打开状态做出有趣的布局。

也可以接受的答案：我对此一无所知。

第 10 行****：html{-ms-text-size-adjust:100%;-webkit-text...****

几乎没有人知道这个属性，除非你对 CSS 的一些不常见的属性和优化有很好的理解。

完美答案：假设你不使用响应式布局，但你仍然希望在小屏幕上显示内容。因此，浏览器必须能够调整文本的大小，使其在小屏幕上以较大的字体显示，便于阅读。CSS中的text-size-adjust属性可以设置为none来关闭这个功能，也可以指定浏览器按照百分比放大文字。

在当前示例中，twitter 将最大值设置为 100%，这样文本就不会变大或变小，他们这样做是因为他们的网站已经有了响应式布局，他们不想冒险让浏览器使用更大的字体，这打破布局。这同样适用于 HTML 标签内的所有内容。由于这是一个实验性的 CSS 属性，因此需要一个前缀来表示它。此外，此 CSS 标记之前缺少一个标记，我猜它是在上一行缩进的。

可接受的回答：不知道这个属性的具体取值，但是-ms和-webkit-分别是IE浏览器和基于Webkit内核的浏览器的前缀，用于非标准属性。当 CSS3 出现时，我们强制使用了这些前缀，但随着属性从实验性到发布或完全采用，这些前缀消失了，取而代之的是标准化属性。

好处——第一行是：body{margin:0;}

twitter 源代码中的这一行非常有趣，因为您可以清楚地看到格式化和网页显示之间的区别。

完美国际任务栏不显示在屏幕上

完美回答：因为不同的浏览器有不同的默认样式，我们希望通过重置来统一它们，让网站在不同的设备上表现一致。在此示例中，Twitter 告诉浏览器从 body 标记中删除默认边距。但我更喜欢规范化样式而不是完全删除它们，即浏览器应用相同的默认值而不是完全删除它们。人们过去常常使用 *{margin: 0} ，但这完全是矫枉过正并且没有带来任何性能提升，但现在有更新的，如 nomaliza.css、reset.css 或其他。

能向我解释一下推特HTML网页的前10行代码是什么意思吗

最新完美资讯

新闻点击榜

推荐阅读