站长统计
推特HTML⽹页的前10⾏代码（译）
在过去的⼏周时间⾥，我⼀直在为我所就职的公司 Pibio 雇佣⼀名全栈⼯程师。由于我们公司是远程办公，因此所有的⾯试都是远程沟通。在这个过程中，我发现，很多⾯试⼈员尽管很擅长⼯作，但却不能很好的实时编码。因此，在⼤约⼀个⼩时的技术讨论中，我选择问他们⼀些关于⽹络⽣命周期、可访问性、不同浏览器的差异化或其它与⽹络有关的问题。我最喜欢问的⼀个问题是：“能向我解释⼀下推特 HTML ⽹页的前 10 ⾏代码是什么意思吗？”
在我看来，这能够充分展⽰⾯试者的前端基础。接下来，我会给出这个问题的答案。滑块轴承属于什么类目
在对话中，我会共享我的屏幕，打开推特的⽹页，点击查看源代码。然后，请他们逐⾏进⾏解释，怎样解释，完全取决于⾯试者。在过程中，我会故意将⽂本放⼤，⼀⽅⾯，是为了使⽂本更加清晰，另⼀⽅⾯，就只能看到其中⼀部分的内容，但能够从中获得有效的信息。它⼤概是这样的：
你必须明⽩，当下的背景是技术讨论，因此，我并不期望任何⼈给出完美的答案，只要我能听到⼀些正确的关键词，我就能明⽩候选⼈是知道这个概念的，此时，我就会引导他表述更多的，我想听到的，正确的内容。
第⼀⾏： <!DOCTYPE html>
lifter的意思
html个人网页制作代码范列第⼀⾏关于 DOCTYPE 声明的代码实在太适合在⾯试中讨论了，因为，对声明的了解程度可以间接说明⾯试者的⼯作经验。我⾄今仍然记得在Dreamweaver 的那些⽇⼦，必须使⽤ XHTML 长长的声明，就像克⾥斯在 2009 年⼀篇名为《通⽤声明定义》的⽂章中所写的那样。
linux查文件中某个字段完美的回答：我们通常会把这个⽂档类型的声明写在 HTML ⽂件的第⼀⾏。你可以认为这些信息是多余的，因为浏览器已经知道响应的 MIME 类型是 text/html 的，但在⽹景浏览器的时代，浏览器有⼀项艰巨的任务是选择使⽤哪个版本的 HTML 标准来解析并进⾏页⾯渲染。
最讨厌的是，不同版本的 HTML 标准会⽣成不同的页⾯布局，因此，使⽤这个标签是为了便于浏览器区分版本。曾经，浏览器的标签很长，甚⾄会包括规范的链接，有点⼉像今天的 SVG。幸运的是，现在，简单的 <!DOCTYPE html>在 HTML5 中已经被标准化。
勉强可以接受的回答：这是 DOCTYPE 标签，告诉浏览器，这是⼀个 HTML5 的页⾯，应该按照相应的标准解析和渲染。
第⼆⾏：<html dir=”ltr” lang=”en”>
这⼀⾏可以让我知道候选⼈是否了解⽂件的可访问性和本地化。令⼈惊讶的是，很少有⼈知道 dir 属性
div padding的作⽤和意义（但这个属性对于阅读器⽽⾔却是⾄关重要的），但⼏乎每⼀个⼈都能清楚的表述 lang=”en” 的意思，即使他们之前从来没有⽤过这个属性。
完美的回答：这是 HTML ⽂档的根组件，整个 HTML ⽂档都会被嵌⼊到其中。它有两个属性，分别是“⽅向”和“语⾔”。“⽅
向”属性的可选参数有 ltr（left-to-right）、 rtl（right-to-left）和 auto（automatic），分别表⽰⽤户代理程序会以怎样的⽅向展⽰内容。⽐如，阿拉伯语等语⾔就需要设置值为 rtl。如果你设置值为 auto，意味着你将选择权交给了浏览器。
“语⾔”属性的值为 “en”标签意味着告诉我们这个⽂档的内容都是英⽂的。你还可以将这个值设置为任何语⾔的标签，甚⾄可以区分是美式英语 ，还是国标英语。对于屏幕阅读器⽽⾔，“语⾔”属性的值是⾮常重要的。
第三⾏：<meta charset=”utf-8”>
完美的回答：源码中的 meta 标签⽤于表⽰⽂档⽀持的元数据类型。字符集（charset：character set 的缩写）属性告诉浏览器使⽤哪种字符编码，这⾥，推特使⽤标准的 UTF-8 编码。UTF-8 对字符的⽀持⾮常好，你可以在源代码中使⽤各种符号和表情符号。将此标记放在代码的前⼏⾏是⾮常重要的，
这样浏览器就知道尽早知道以怎样的⽅式解释代码。为了防⽌做不必要的⽆⽤功，⼀般的规则是把这⾏代码放在源代码的前⼀千个字节中，但我觉得，最好把它放在<head>的前⾯。
顺便说⼀句，由于性能问题（减少代码量），推特似乎省略了<head>标签，但在我看来，<head>是应该被显⽰定义的，因为这样你就可以清楚的知道元数据、样式等信息。
第四⾏：<meta name=”viewport” content=””>
完美的回答：源码中这个的 meta 标签表⽰⽤合适的尺⼨展⽰⽹页，即使是在像智能⼿机这样的⼩尺⼨设备上。如果你还记得 iPhone 当初的⽂本演⽰，史蒂夫乔布斯在⼀个 4.5 英⼨的⼩屏幕上展⽰了《纽约时报》⽹站的全部内容，你可以⽤⼿指拖动去阅读，当时，这是⼀个⾮常了不起的功能。
现在⽹站的设计完全是响应式的，宽度为设备宽度（width-device）指告知浏览器⽤ 100% 的设备宽度作为视⼝，因此没有⽔平⽅向的滚动，你甚⾄可以⽤宽度的百分⽐作为标尺。标准的最佳实践是将初始⽐例设置为 1，将宽度设置为设备宽度，这样⼈们就可以根据需要进⾏缩放。
屏幕截图⾥虽然没有显⽰这些值，但最好知道：推特还应⽤了 user-scalable=0，顾名思义，它禁⽤了缩放功能，这对访问不便，但会使⽹页更像是原⽣应⽤程度。出于同样的原因，它还设置了 maximum-scale=1 ，这个属性还可以设置最⼩的缩放⽐例。⼀般来说，设置全宽和初始⽐例就⾜够了。
第五⾏: ****<meta property="og:site_name" content="****
⼤约有百分之五⼗的候选⼈知道 og（Open Graph）标签，能够回答好这个问题的⼈⼀定对 SEO（搜索引擎优化）有⼀定的了解。
完美的回答：推特源码中 meta 的 og 标签表⽰这个⽹址⽀持这个特殊的协议（⽤了Meta Property=og标签，就是你同意了⽹页内容可以被其他社会化⽹站引⽤等，⽬前这种协议被SNS⽹站如Fackbook、renren采⽤。SNS已经成为⽹络上的⼀⼤热门应⽤，优质的内容通过分享在好友间迅速传播。为了提⾼站外内容的传播效率，2010年F8会议上Facebook公布 了⼀套开放内容协议(Open
Graph Protocol)，任何⽹页只要遵守该协议，SNS就能从页⾯上提取最有效的信息并呈现给⽤户。）。这个协议最初是由
Facebook 指定的，以便更轻松的对⽹页中的信息提取并预览，开发⼈员可以添加各种的信息或者封⾯图对其进⾏装饰。事实上，现在更常见的是使⽤ Puppeteer 之类的⼯具⾃动⽣成。（CSS-Tricks ⽤了⼀个 WordPress 插件来做这件事）。
另⼀个有趣的旁注是 site name 属性，但这是 OG ⾮标准的属性。我猜想这只有在 Facebook 中起作⽤？标题、链接、描述性的 Open Graph 标签似乎显得有些多余，因为我们已经有了响应的标签，但
⼈们往往会为了安全⽽添加它们。如今，很多⽹站都会使⽤ Open Graph 属性和其它标签来为页⾯⽣成丰富的预览。
第六⾏****: <meta name="apple-mobile-web-app-title" ****
matlab主要用于什么⼤多数候选⼈都不知道这⼀点，但有经验的开发者会针对如何优化苹果设备上的⽹站进⾏讨论，如点击苹果图标和 Safari 浏览器固定导航栏。
完美的回答：你可以将⽹站固定在 iPhone 的主屏幕上，使其像⼀个原⽣应⽤程序。Safari 浏览器不⽀持渐进式的 Web 应⽤程序，⽽且你也不能在 iOS 设备上使⽤其他浏览器的这个功能，因此，如果你想要那种原⽣的体验，就只能选择像推特这样。添加这个标签来告诉 Safari 浏览器这个应⽤的标题是推特。下⼀⾏的意思和这⼀⾏很类似，告诉控制台应⽤程序启动时的外观状态栏。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。