我認(rèn)為這是一個(gè)簡(jiǎn)單的測(cè)試，可以告訴我很多關(guān)于他們擁有的基本前端知識(shí)深度的信息，本文列出了最佳答案。

對(duì)于上下文，我共享屏幕，打開(kāi)Twitter.com，然后單擊“查看源” 。然后，我要求他們逐條排隊(duì)，以幫助我理解HTML，他們可以說(shuō)他們喜歡的話。我還放大了文本更清晰的文字，因此您看不到完整的行，但您會(huì)想到一個(gè)主意。這就是它的樣子：

請(qǐng)注意，由于我們的技術(shù)討論是對(duì)話。我不希望任何人得到完美的答案。如果我聽(tīng)到一些正確的關(guān)鍵字，我知道候選人知道這個(gè)概念，并且我試圖將它們推向正確的方向。

第1行：

每個(gè)文檔的源代碼的第一行非常適合這次采訪，因?yàn)楹蜻x人對(duì)Doctype聲明的了解非常類似于他們擁有的經(jīng)驗(yàn)。我仍然記得我在XHTML長(zhǎng)期Doctype系列中的Dreamweaver時(shí)代，就像Chris在2009年的文章“ Common Doctypes”中所列出的那樣。

完美答案：這是我們始終將其作為HTML文件中的第一行的文檔類型（DOC-TYPE）聲明。您可能會(huì)認(rèn)為此信息是多余的，因?yàn)闉g覽器已經(jīng)知道響應(yīng)的MIME類型是文本/HTML。但是，在Netscape/Internet Explorer Days中，瀏覽器的艱巨任務(wù)是弄清楚使用哪種HTML標(biāo)準(zhǔn)來(lái)從多個(gè)競(jìng)爭(zhēng)版本中呈現(xiàn)頁(yè)面。

這尤其令人討厭，因?yàn)槊總€(gè)標(biāo)準(zhǔn)都會(huì)產(chǎn)生不同的布局，因此采用此標(biāo)簽以使瀏覽器變得容易。以前，Doctype標(biāo)簽很長(zhǎng)，甚至包括規(guī)格鏈接（如今像SVG一樣），但是幸運(yùn)的是，簡(jiǎn)單的在HTML5中標(biāo)準(zhǔn)化了，并且仍然存在。

也接受：這是Doctype標(biāo)簽，讓瀏覽器知道這是一個(gè)HTML5頁(yè)面，應(yīng)該這樣呈現(xiàn)。

第2行：

源代碼中的這一行告訴我候選人是否知道可訪問(wèn)性和本地化。令人驚訝的是，只有少數(shù)人知道我的采訪中的DIR屬性，但這是一個(gè)關(guān)于屏幕讀者的討論的好問(wèn)題。即使以前從未使用過(guò)它，幾乎每個(gè)人都可以弄清楚lang =“ en”屬性。

完美的答案：這是HTML文檔的根元素，并且所有其他元素都在此中。在這里，它具有兩個(gè)屬性，方向和語(yǔ)言。方向?qū)傩跃哂袕淖蟮接业闹祦?lái)告訴用戶代理內(nèi)容所在的方向；對(duì)于阿拉伯語(yǔ)等語(yǔ)言，其他值是左轉(zhuǎn)權(quán)，或者只是自動(dòng)將其留在瀏覽器上以找出。

語(yǔ)言屬性告訴我們，此標(biāo)簽中的所有內(nèi)容均以英語(yǔ)為單位。例如，您可以將此值設(shè)置為任何語(yǔ)言標(biāo)簽，甚至可以區(qū)分EN-US和EN-GB。這對(duì)于屏幕閱讀器知道要宣布哪種語(yǔ)言也很有用。

第3行：

完美答案：源代碼中的元標(biāo)記是為了提供有關(guān)此文檔的元數(shù)據(jù)。字符集（char-set）屬性告訴瀏覽器要使用的字符編碼，Twitter使用標(biāo)準(zhǔn)的UTF-8編碼。 UTF-8很棒，因?yàn)樗哂性S多字符點(diǎn)，因此您可以在源代碼中使用各種符號(hào)和表情符號(hào)。重要的是要將此標(biāo)簽放在代碼開(kāi)頭附近，以便瀏覽器遇到這一行時(shí)尚未開(kāi)始解析過(guò)多的文本。我認(rèn)為規(guī)則是將其放在文檔的第一個(gè)千字節(jié)中，但我想說(shuō)最好的做法是將其放在

附帶說(shuō)明，出于性能原因（減少加載代碼），Twitter省略了Twitter，但我仍然喜歡明確，因?yàn)樗撬性獢?shù)據(jù)，樣式等的清晰住所。

第4行：

完美的答案：源代碼中的此元標(biāo)記是為了在小屏幕上（例如智能手機(jī)）上適當(dāng)?shù)爻叽?。如果您還記得原始的iPhone主題演講，史蒂夫·喬布斯（Steve Jobs）在那個(gè)小的4.5英寸屏幕上展示了整個(gè)《紐約時(shí)報(bào)》網(wǎng)站；那時(shí)，這是一個(gè)了不起的功能，您必須捏住才能真正閱讀。

現(xiàn)在，網(wǎng)站可以通過(guò)設(shè)計(jì)響應(yīng)，width =設(shè)備寬度告訴瀏覽器將設(shè)備寬度的100％用作視口，因此沒(méi)有水平滾動(dòng)，但您甚至可以為寬度指定特定的像素值。標(biāo)準(zhǔn)的最佳實(shí)踐是將初始比例設(shè)置為1，將寬度設(shè)置為設(shè)備寬度，以便人們?nèi)匀豢梢苑糯蟆?/p>

源代碼的屏幕截圖并未顯示這些值，但很高興知道：Twitter還應(yīng)用了用戶量表= 0，該= 0，顧名思義，它可以禁用縮放功能。這對(duì)可訪問(wèn)性不利，但使網(wǎng)頁(yè)感覺(jué)更像是本機(jī)應(yīng)用程序。它還出于相同的原因還設(shè)置了最大尺度= 1（您可以使用最小和最大比例來(lái)限制這些值之間的縮放度）。通常，設(shè)置完整的寬度和初始規(guī)模就足夠了。

第5行：

所有候選人中約有50％知道開(kāi)放的圖形標(biāo)簽，并且對(duì)這個(gè)問(wèn)題的一個(gè)很好的答案表明，他們對(duì)SEO了解。

完美答案：此標(biāo)簽是網(wǎng)站名稱Twitter的開(kāi)放圖（OG）元標(biāo)記。 Facebook制作了打開(kāi)的圖形協(xié)議，以使其更容易解開(kāi)鏈接并在不錯(cuò)的卡片布局中顯示其預(yù)覽；開(kāi)發(fā)人員可以添加各種作者資格詳細(xì)信息，并涵蓋用于花式共享的圖像。實(shí)際上，如今，使用像木偶器之類的東西自動(dòng)生成開(kāi)放式圖像也很常見(jiàn)。 （CSS-Tricks使用可以執(zhí)行此操作的WordPress插件。）

另一個(gè)有趣的旁注是，元標(biāo)記通常具有名稱屬性，但是OG使用了非標(biāo)準(zhǔn)屬性屬性。我想那只是Facebook是Facebook嗎？標(biāo)題，URL和描述打開(kāi)的圖形標(biāo)簽有點(diǎn)冗余，因?yàn)槲覀円呀?jīng)有常規(guī)的元標(biāo)記，但是人們添加了它們是為了安全的。如今，大多數(shù)站點(diǎn)都使用開(kāi)放圖和其他元數(shù)據(jù)以及頁(yè)面上的內(nèi)容來(lái)生成豐富的預(yù)覽。

第6行：

大多數(shù)候選人對(duì)此一無(wú)所知，但是經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員可以談?wù)撊绾蝺?yōu)化Apple設(shè)備的網(wǎng)站，例如Apple-Touch-Icons和Safari固定的Tab SVGS。

完美的答案：您可以將網(wǎng)站固定在iPhone的HomeScreen上，以使其感覺(jué)像是本地應(yīng)用程序。 Safari不支持漸進(jìn)式網(wǎng)絡(luò)應(yīng)用程序，也不能真正使用iOS上的其他瀏覽器引擎，因此，如果您想要那種類似母語(yǔ)的經(jīng)驗(yàn)，當(dāng)然，您真的沒(méi)有其他選擇。因此，他們補(bǔ)充說(shuō)，告訴Safari這個(gè)應(yīng)用程序的標(biāo)題是Twitter。下一行是相似的，并且控制了應(yīng)用程序啟動(dòng)時(shí)的狀態(tài)欄的外觀。

第8行：

完美答案：這是適當(dāng)?shù)木W(wǎng)絡(luò)標(biāo)準(zhǔn)式等效的蘋(píng)果狀態(tài)棒彩色元標(biāo)簽。它告訴瀏覽器主題為周?chē)腢I。 Chrome on Android上的Chrome and Brave on Desktop都做得很好。您可以將任何CSS顏色都放在內(nèi)容中，甚至可以使用媒體屬性僅顯示此顏色的特定媒體查詢，例如支持黑暗主題。您還可以在Web應(yīng)用程序清單中定義此和其他屬性。

第9行：

我采訪的人沒(méi)有人知道這一點(diǎn)。我認(rèn)為，只有在您對(duì)標(biāo)準(zhǔn)軌道上發(fā)生的所有新事物有深入的了解時(shí)，您才知道這一點(diǎn)。

完美的答案：原始試驗(yàn)讓我們?cè)谖覀兊木W(wǎng)站上使用新的和實(shí)驗(yàn)性的功能，并且反饋由用戶代理跟蹤，并向Web標(biāo)準(zhǔn)社區(qū)報(bào)告，而無(wú)需用戶選擇輸入功能標(biāo)志。例如，Edge對(duì)雙屏和可折疊設(shè)備原語(yǔ)的原始試驗(yàn)非常酷，因?yàn)槟梢愿鶕?jù)打開(kāi)或關(guān)閉可折疊手機(jī)來(lái)制作有趣的布局。

也接受：我不知道這個(gè)。

第10行：html {-ms-text-size-udjust：100％; - webkit-text ...

幾乎沒(méi)有人也知道這一點(diǎn)。只有您了解CSS邊緣案例和優(yōu)化，您才能弄清楚這一行。

完美的答案：想象您沒(méi)有移動(dòng)響應(yīng)網(wǎng)站，并且在小屏幕上打開(kāi)它，因此瀏覽器可能會(huì)調(diào)整文本大小以使其更大，從而易于閱讀。 CSS文本大小調(diào)整屬性可以使用無(wú)值禁用此功能，也可以指定允許瀏覽器使文本更大的百分比。

在這種情況下，Twitter表示最大值為100％，因此文本不應(yīng)大于實(shí)際尺寸。他們之所以這樣做，是因?yàn)樗麄兊木W(wǎng)站已經(jīng)響應(yīng)迅速，他們不想冒險(xiǎn)打破較大字體大小的布局。它應(yīng)用于根HTML標(biāo)簽，因此它適用于其中的所有內(nèi)容。由于這是實(shí)驗(yàn)性CSS屬性，因此需要前綴。另外，在此CSS之前，還有一個(gè)缺少的

也接受：我不知道該屬性的特定內(nèi)容，但是-ms和-webkit-分別是Internet Explorer和基于WebKit的瀏覽器所需的供應(yīng)商前綴，分別是非標(biāo)準(zhǔn)屬性的。 CSS3出來(lái)時(shí)，我們?cè)?jīng)需要這些前綴，但是由于屬性從實(shí)驗(yàn)到穩(wěn)定或被采用到標(biāo)準(zhǔn)軌道時(shí)，這些前綴就消失了，而有利于標(biāo)準(zhǔn)化的屬性。

獎(jiǎng)勵(lì) - 第11行：身體{Margin：0;}

Twitter源代碼的這一行特別有趣，因?yàn)槟梢愿M(jìn)有關(guān)重置和標(biāo)準(zhǔn)化網(wǎng)頁(yè)之間差異的問(wèn)題。幾乎每個(gè)人都知道正確答案的版本。

完美的答案：由于不同的瀏覽器具有不同的默認(rèn)樣式（用戶代理樣式表），因此您想通過(guò)重置屬性來(lái)覆蓋它們，以使您的網(wǎng)站在設(shè)備之間看起來(lái)相同。在這種情況下，Twitter告訴瀏覽器刪除車(chē)身標(biāo)簽的默認(rèn)邊距。這只是為了減少瀏覽器的不一致，但是我更喜歡將樣式歸一化而不是重置它們，即，在瀏覽器上應(yīng)用相同的默認(rèn)值，而不是完全刪除它們。人們甚至曾經(jīng)使用 * {margin：0}，這完全是過(guò)分的且不適合性能，但是現(xiàn)在導(dǎo)入andary.css或reset.css.css（甚至更新的東西）之類的東西是常見(jiàn)的，然后從那里開(kāi)始。

更多行！

我總是喜歡使用瀏覽器檢查員工具來(lái)查看網(wǎng)站的制作方式，這就是我想出這個(gè)想法的方式。即使我認(rèn)為自己是語(yǔ)義HTML的專家，但每次進(jìn)行此練習(xí)時(shí)，我都會(huì)學(xué)到一些新東西。

由于Twitter主要是客戶端的React應(yīng)用程序，因此源代碼中只有幾十行。即使這樣，也有很多東西要學(xué)習(xí)！ Twitter源代碼中還有一些有趣的行，我將作為讀者為您提供練習(xí)。您可以在采訪中解釋一下他們中的多少人？

 <link rel="“" search type="“應(yīng)用程序/openSearchDescription" xml href="%E2%80%9C/opensearch.xml%E2%80%9D" title="“" twitter>

…告訴瀏覽器，用戶可以將Twitter添加為搜索引擎。

 <link rel="“" preload as="“" script crossorigin="“匿名”" href="%E2%80%9C" https:>

…有許多有趣的屬性可以討論，尤其是Nonce。

 <link rel="“替代”" hreflang="“" x-default href="%E2%80%9C" https:>

…用于國(guó)際著陸頁(yè)。

 ：focus：不（[數(shù)據(jù) - 可訪問(wèn)性polyfill]））{uterline：none;}

…在不使用鍵盤(pán)導(dǎo)航時(shí)刪除焦點(diǎn)輪廓（CSS：焦點(diǎn)可見(jiàn)選擇器在此處進(jìn)行多填充）。

以上是向我解釋Twitter源代碼的前10行的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！