如何在網(wǎng)頁(yè)源代碼前10行，你知道嗎？

作者| 阿南德翻譯 |

出品 | CSDN（ID：）

最近，我在為我的公司招聘一名高級(jí)全棧工程師。 由于我們是遠(yuǎn)程工作，所以面試是通過(guò) Zoom 進(jìn)行的，我注意到一些非常適合這份工作的開(kāi)發(fā)人員并不擅長(zhǎng)在白板上編寫(xiě)程序。 所以我們進(jìn)行了一個(gè)小時(shí)的技術(shù)談話，我詢問(wèn)了網(wǎng)絡(luò)指標(biāo)、可訪問(wèn)性、瀏覽器大戰(zhàn)和其他與網(wǎng)絡(luò)相關(guān)的問(wèn)題。 我經(jīng)常問(wèn)的一個(gè)問(wèn)題是：“請(qǐng)解釋網(wǎng)頁(yè)源代碼的前 10 行”。

在我看來(lái)，這是一個(gè)非常簡(jiǎn)單的測(cè)試，但是卻可以測(cè)試應(yīng)聘者對(duì)前端基礎(chǔ)知識(shí)掌握的深度。

在采訪期間，我會(huì)分享我的屏幕，打開(kāi)它并單擊“查看源代碼”。 然后我要求他們逐行解釋 HTML 代碼，盡可能深入。 我還放大了屏幕，讓候選人看不到完整的代碼行，但可以大致了解代碼的含義。 如下：

請(qǐng)注意，我們的技術(shù)討論只是一次對(duì)話，所以我不期待完美的答案。 如果我聽(tīng)到一些正確的關(guān)鍵詞，我就知道候選人理解這個(gè)概念，我可以引導(dǎo)他們朝著正確的方向前進(jìn)。

第一排：

網(wǎng)頁(yè)源代碼的第一行很適合這種類型的面試，因?yàn)楹蜻x人對(duì)網(wǎng)頁(yè)的了解在很大程度上反映了他們的經(jīng)驗(yàn)。 還記得當(dāng)年流行的時(shí)候，需要像Chris在2009年的文章《The》中列舉的那樣，寫(xiě)一串XHTML()。

最佳答案: 這一行是文檔類型定義，所有HTML文件的第一行都必須這樣寫(xiě)。 可能有人會(huì)認(rèn)為這行代碼是多余的，因?yàn)闉g覽器已經(jīng)知道響應(yīng)的MIME類型是text/html，但是在 和 時(shí)代，有很多不同的HTML標(biāo)準(zhǔn)，所以瀏覽器很難來(lái)判斷渲染頁(yè)面應(yīng)該遵循什么標(biāo)準(zhǔn)。

這很煩人，因?yàn)槊總€(gè)標(biāo)準(zhǔn)都會(huì)生成不同的布局，這就是為什么需要這個(gè)標(biāo)簽來(lái)幫助瀏覽器渲染它。 它曾經(jīng)很長(zhǎng)并且包含標(biāo)準(zhǔn)鏈接（就像今天的 SVG 文件一樣），但幸運(yùn)的是這種簡(jiǎn)潔成為 HTML 5 中的標(biāo)準(zhǔn)并一直延續(xù)到今天。

接受的答案：這是讓瀏覽器知道這是一個(gè) HTML 5 網(wǎng)頁(yè)并且應(yīng)該呈現(xiàn)為 HTML 5 的標(biāo)簽。

第二行：

這條線可以判斷候選人是否了解可訪問(wèn)性和本地化。 令人驚訝的是，我采訪的人中很少有人知道 dir 屬性，但這個(gè)屬性可以引發(fā)關(guān)于屏幕閱讀器的討論。 幾乎每個(gè)人都能理解 lang="en" 屬性的含義，即使他們從未使用過(guò)它。

最佳答案：這是 HTML 文檔的根元素，其他元素位于其中。 它有兩個(gè)屬性：方向和語(yǔ)言。 屬性的值為“l(fā)eft-to-right”，告訴用戶代理內(nèi)容的方向； 這個(gè)值也可以是“從右到左”，比如阿拉伯語(yǔ)； 或“自動(dòng)”，它允許瀏覽器自行確定方向。

lang（語(yǔ)言）屬性表示此標(biāo)記中的所有代碼都是英文的。 您可以將此值設(shè)置為任何語(yǔ)言標(biāo)記，甚至可以區(qū)分 en-us 和 en-gb。 它還可以幫助屏幕閱讀器確定使用哪種語(yǔ)言閱讀文本。

第三行：

最佳答案：源代碼中的元標(biāo)記為文檔提供元數(shù)據(jù)。 set()屬性告訴瀏覽器使用哪種字符編碼，使用標(biāo)準(zhǔn)的UTF-8編碼。 UTF-8 很棒，因?yàn)樗S多字符點(diǎn)，因此您可以在源代碼中使用各種符號(hào)，甚至是表情符號(hào)。 將此標(biāo)記放在文檔的開(kāi)頭很重要，這樣瀏覽器在遇到它時(shí)就不會(huì)開(kāi)始解析過(guò)多的文本。 我記得規(guī)則是將它放在文檔開(kāi)頭的 1k 字節(jié)以內(nèi)，但我認(rèn)為最好的做法是將它放在第一行。

另外，似乎出于性能原因省略了標(biāo)簽（以減少加載的代碼量），但我仍然認(rèn)為應(yīng)該顯式編寫(xiě)，因?yàn)樗窃畔?、樣式等的容器?/p>

第四行：

最佳答案：源碼中的這個(gè)meta標(biāo)簽是用來(lái)在小屏幕（比如手機(jī)）上指定正確尺寸的。 如果您還記得最初的幻燈片，喬布斯在一個(gè) 4.5 英寸的小屏幕上展示了整個(gè)紐約時(shí)報(bào)網(wǎng)站。 能夠用兩根手指放大以清楚地看到文本，這是一個(gè)非常有用的功能。

但是現(xiàn)在，網(wǎng)頁(yè)被設(shè)計(jì)成響應(yīng)式的，width=-width 會(huì)告訴瀏覽器使用設(shè)備寬度的 100% 作為視口大小以避免水平滾動(dòng)條，但你甚至可以指定一個(gè)像素寬度。 標(biāo)準(zhǔn)的最佳做法是將初始比例設(shè)置為 1，將寬度設(shè)置為 -width，以便人們?cè)谛枰獣r(shí)仍然可以放大。

這些值在源代碼的截圖中沒(méi)有顯示，但最好知道：還使用了user-=0，顧名思義，禁止用戶放大和縮小。 它在可訪問(wèn)性方面不是很好，但它使網(wǎng)頁(yè)更像本機(jī)應(yīng)用程序。 同樣的道理，也設(shè)置-scale=1（可以用最小和最大的scale來(lái)限制縮放的范圍）。 通常，只需設(shè)置全屏寬度和初始縮放就足夠了。

第五行：

大約 50% 的候選人知道 Open Graph 標(biāo)簽，回答這個(gè)問(wèn)題很好地證明他們了解 SEO。

最佳答案：這個(gè)標(biāo)簽是一個(gè)Open Graph (OG) 標(biāo)簽，用于設(shè)置網(wǎng)站名稱。 Open Graph協(xié)議由Open Graph提出，旨在方便獲取鏈接內(nèi)容，并以卡片的形式展示鏈接。 開(kāi)發(fā)者可以在網(wǎng)頁(yè)中添加各種細(xì)節(jié)和封面圖片，然后在分享鏈接時(shí)生成漂亮的卡片。 事實(shí)上，現(xiàn)在使用諸如自動(dòng)生成開(kāi)放圖圖像之類的工具更為普遍。

另一個(gè)有趣的地方是，meta 標(biāo)簽通常使用 name 屬性，但 OG 使用非標(biāo)準(zhǔn)屬性。 我想這只是我的偏好？ 標(biāo)題、url和這幾個(gè)Open Graph標(biāo)簽有點(diǎn)多余，因?yàn)檫@些信息可以從普通的meta標(biāo)簽中獲取，但人們?nèi)匀辉O(shè)置這些標(biāo)簽是安全的。 今天的大多數(shù)網(wǎng)站都會(huì)使用 Open Graph 和其他原始標(biāo)簽的組合來(lái)組合網(wǎng)頁(yè)內(nèi)容以生成內(nèi)容豐富的預(yù)覽。

第六行：

大多數(shù)候選人不知道這個(gè)，但有經(jīng)驗(yàn)的開(kāi)發(fā)人員可以討論如何針對(duì) Apple 設(shè)備優(yōu)化站點(diǎn)，例如 apple-touch-icons 和在中間錨定選項(xiàng)卡上顯示的 SVG 等。

最佳答案：您可以將網(wǎng)站錨定到主屏幕，使其看起來(lái)像本機(jī)應(yīng)用程序。 不支持 Web Apps，你不能在 iOS 上真正使用其他瀏覽器引擎，所以如果你想要一個(gè)類似原生的體驗(yàn)，你別無(wú)選擇。 對(duì)于本機(jī)效果，此行用于告知應(yīng)用程序的名稱。 下一行類似，控制應(yīng)用程序啟動(dòng)時(shí)狀態(tài)欄的顯示方式。

第八行：

最佳答案：這個(gè) meta 標(biāo)簽定義了 Apple 設(shè)備上的狀態(tài)欄顏色，現(xiàn)在幾乎是一個(gè)網(wǎng)絡(luò)標(biāo)準(zhǔn)。 它指定瀏覽器應(yīng)如何為周?chē)?UI 設(shè)置主題。 和桌面上的 Brave 瀏覽器都可以很好地處理它。 可以在 中設(shè)置任何 CSS 顏色，甚至可以通過(guò) media 屬性設(shè)置僅在滿足特定媒體查詢（例如暗模式）時(shí)才顯示顏色。 您還可以在 Web 應(yīng)用程序中定義此屬性和其他屬性。

第九行：

我采訪過(guò)的候選人都不知道這一點(diǎn)。 我想只有對(duì)最新的技術(shù)趨勢(shì)有深刻理解的人才知道這個(gè)。

最佳答案: 試用可以使用網(wǎng)站上最新的實(shí)驗(yàn)性功能，基于用戶代理跟蹤反饋并報(bào)告給網(wǎng)絡(luò)標(biāo)準(zhǔn)社區(qū)，而不需要用戶同意參與功能標(biāo)記。 例如，Edge 有一個(gè)雙屏和可折疊設(shè)備的試用版，這是一個(gè)很酷的功能，你可以根據(jù)折疊手機(jī)是打開(kāi)還是關(guān)閉來(lái)實(shí)現(xiàn)不同的布局。

接受的答案：不知道這個(gè)選項(xiàng)。

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

幾乎沒(méi)有人知道這個(gè)選項(xiàng)，只有那些特別了解 CSS cases 和優(yōu)化的人才知道。

最佳答案：假設(shè)您的網(wǎng)站不支持移動(dòng)設(shè)備，并且您在屏幕較小的設(shè)備上打開(kāi)該網(wǎng)站。 瀏覽器可能會(huì)放大字體以便于閱讀。 將 CSS 的 text-size- 設(shè)置為 none 以禁用此功能，或?qū)⑵湓O(shè)置為百分比以告訴瀏覽器它可以放大多少。

這里，最大值設(shè)置為 100%，這意味著文本不會(huì)超過(guò)其實(shí)際大小。 這樣做的原因是該站點(diǎn)已經(jīng)是響應(yīng)式的，因此他們不想冒因允許大字體而破壞布局的風(fēng)險(xiǎn)。 此標(biāo)記應(yīng)用于根 HTML 標(biāo)記，因此它適用于所有內(nèi)容。 由于這是一個(gè)實(shí)驗(yàn)性 CSS，因此需要供應(yīng)商前綴。 另外，這個(gè)css之前少了一個(gè)，不過(guò)應(yīng)該是最小化到上一行，我們就是沒(méi)看到。

接受的答案：我不知道這個(gè)選項(xiàng)的細(xì)節(jié)，但是 -ms 和 -- 分別是非標(biāo)準(zhǔn)屬性的基于瀏覽器的供應(yīng)商前綴。 我們?cè)?jīng)在 CSS3 出現(xiàn)時(shí)使用這些前綴，但隨著屬性從實(shí)驗(yàn)性變?yōu)榉€(wěn)定，或被標(biāo)準(zhǔn)接受，不再需要這些前綴。

獎(jiǎng)勵(lì)：第 11 行：body{:0;}

這行代碼很有意思，因?yàn)榭梢皂槺銌?wèn)一下頁(yè)面重置和歸一化的區(qū)別。 幾乎每個(gè)人都知道正確答案的某個(gè)版本。

最佳答案: 因?yàn)椴煌臑g覽器有不同的默認(rèn)樣式(user-agent style )，所以應(yīng)該通過(guò)重新設(shè)置屬性來(lái)覆蓋默認(rèn)樣式，使網(wǎng)站在不同設(shè)備上有相同的外觀。 在這里，告訴瀏覽器去掉 body 標(biāo)簽的默認(rèn)值。 這減少了瀏覽器之間的不一致，但我更喜歡使用正則化樣式，即在所有瀏覽器中應(yīng)用相同的默認(rèn)樣式，而不是通過(guò)重置簡(jiǎn)單地刪除它們。 有些人甚至使用 * {:0 }，這是壓倒性的并且會(huì)影響性??能，但現(xiàn)在更常見(jiàn)的是導(dǎo)入樣式表，如 .css 或 reset.css。

補(bǔ)充

我喜歡通過(guò)我的瀏覽器工具查看網(wǎng)站的制作，所以我想到了這次采訪的想法。 盡管我認(rèn)為我很了解語(yǔ)義 HTML，但每次我這樣做時(shí)我都會(huì)學(xué)到一些新東西。

由于它主要是一個(gè)客戶端 React 應(yīng)用程序，因此源代碼中只有幾行。 即便如此，還有很多東西要學(xué)！ 還有一些很有意思的代碼，留給讀者作為練習(xí)。 面試能解釋多少行代碼？

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

告訴瀏覽器用戶可以設(shè)置搜索引擎。

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

這個(gè)有很多要討論的，尤其是隨機(jī)數(shù)。

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