整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
最近，我在為公司招聘一名高級全棧JavaScript工程師。由于我們是遠程工作，因此面試在Zoom上進行，而且我注意到一些開發人員非常適合這份工作，卻不擅長在白板上編寫程序。所以，我們采取了一小時技術交流的方式，我提出有關Web指標、可訪問性、瀏覽器之戰，以及其他有關Web的問題。每次我都要問的一個問題是：“請解釋一下Twitter的網頁源代碼前10行。”
我認為，這是一個很簡單的測試，但能檢驗出候選人對于前端基礎知識掌握的深度。
面試時，我會共享我的屏幕，打開Twitter.com并點擊“查看源代碼”。然后，我會讓他們逐行解釋HTML代碼，至于解釋的深度由他們自行決定。我還會放大屏幕，這樣候選人看不到每一行完整的代碼，但能大致了解代碼的意思。如下所示：
請注意，我們的技術討論只是一次對話，所以我并不會期待完美的答案。如果我聽到一些正確的關鍵字，我就知道候選人了解這個概念，然后我會朝著正確的方向引導他們。
網頁源代碼的第一行非常適合這類面試，因為候選人對于DOCTYPE的了解程度基本上能反映出他們的經驗。我還記得當年Dreamweaver流行的時候，需要編寫一串XHTML DOCTYPE，就像2009年Chris在文章《The Common DOCTYPES》中列出的一樣（https://css-tricks.com/snippets/html/the-common-doctypes/）。
最佳答案：這一行是文檔類型定義，所有HTML文件的第一行必須這么寫。有人可能會認為這行代碼是多余的，因為瀏覽器已經知道響應的MIME類型是text/html，但在Netscape和Internet Explorer的時代，有許多不同的HTML標準，因此瀏覽器很難判斷應該遵照哪個標準來渲染頁面。
這一點非常煩人，因為每個標準都會生成不同的布局，這才需要使用這個標簽，幫助瀏覽器進行渲染。以前，DOCTYPE非常長，而且還會包含標準的連接（就像今天的SVG文件那樣），但幸運的是，這種簡潔的<!DOCTYPE html>成為了HTML 5的標準，并延續至今。
可以接受的答案：這是DOCTYPE標簽，讓瀏覽器知道這是一個HTML 5網頁，并應按照HTML 5渲染。
這一行可以判斷出候選人是否了解可訪問性和本地化。令人驚訝的是，我面試過的人中很少有人知道dir屬性，但這個屬性能引發有關屏幕閱讀器的討論。幾乎每個人都能判斷出lang="en"屬性的含義，即使他們從未用過。
最佳答案：這是HTML文檔的根元素，其他元素都位于該元素之內。它有兩個屬性：方向和語言。方向屬性的值為“從左到右”，告訴用戶代理內容的方向；這個值也可以是“從右到左”，比如阿拉伯語；或者是“auto”，讓瀏覽器自行判斷方向。
lang（語言）屬性指明了該標簽內的所有代碼都是英語。你可以將這個值設置成任何語言標簽，甚至可以區分en-us和en-gb。它也可以幫助屏幕閱讀器判斷該用哪種語言來讀出文字。
最佳答案：源代碼中的meta標簽為文檔提供了元數據。字符集（charset）屬性告訴瀏覽器該使用哪種字符編碼，Twitter使用的是標準的UTF-8編碼。UTF-8非常好，因為它包含了許多字符點，因此可以在源代碼中使用各種符號，甚至是表情符號。將這個標簽放在文檔開頭非常重要，保證瀏覽器在遇到該標簽時不至于已開始解析太多文本。我記得規則是要放在文檔開頭1k字節內，但我認為最佳實踐是放在<head>的第一行。
另外，似乎Twitter出于性能原因省略了<head>標簽（以減少加載的代碼量），但我依然認為應當明確地寫出<head>，因為<head>是容納元信息、樣式等的容器。
最佳答案：源代碼中的這個meta標簽用來指定在小屏幕（比如手機）上的正確尺寸。如果你還記得最初的iPhone幻燈片，當時喬布斯在小小的4.5寸屏幕上顯示了整個紐約時報的網站，當時能夠雙指放大看清文字，還是個非常好用的功能。
但現在，網頁都要設計成響應式，width=device-width會告訴瀏覽器使用100%的設備寬度作為視口大小，以避免產生水平滾動條，但你甚至可以指定像素寬度。標準的最佳實踐是將初始比例設置為1，將寬度設置為device-width，這樣人們在需要時依然可以使用放大功能。
源代碼截圖中并沒有顯示出這些值，但這些知識了解一下更好：Twitter還使用了user-scalable=0，顧名思義，它禁止了用戶自行縮放。對于可訪問性來說這并不好，但可以讓網頁更像原生應用。出于同樣的理由，Twitter還設置了maximum-scale=1（可以使用最小和最大比例來限制放縮的范圍）。通常，只設置全屏寬度和初始縮放比例就足夠了。
大約有50%的候選人知道Open Graph標簽，而回答好該問題證明他們懂得SEO。
最佳答案：這個標簽是一個Open Graph（OG）標簽，用于設置網站名為Twitter。Open Graph協議由Facebook提出，旨在方便獲取鏈接內容并將鏈接顯示成卡片形式，開發者可以在網頁中添加各種細節和封面圖像，就可以在分享鏈接時生成漂亮的卡片。實際上，現在更常見的做法是利用Puppeteer之類的工具自動生成open graph圖像。
另一個有意思的地方是，meta標簽通常使用name屬性，但OG采用了非標準的property屬性。我猜這只是Facebook自己的喜好？title、url和description這幾個Open Graph標簽有點多余，因為這些信息可以從正常的meta標簽中獲取，但安全起見，人們還是會設置這些標簽。今天的絕大多數網站都會使用Open Graph和其他原標簽的組合，結合網頁的內容，生成內容豐富的預覽。
絕大多數候選人不知道這一條，但有經驗的開發者可以討論如何為蘋果設備優化網站，如apple-touch-icons，以及在Safari中錨定的標簽頁上顯示的SVG等。
最佳答案：你可以將一個網站錨定到iPhone的主屏幕上，使它看起來像是一個原生應用。Safari不支持漸進式Web應用，而且在iOS上無法真正使用其他瀏覽器引擎，所以如果想實現類似于原生的體驗，你別無選擇。Twiiter為了實現原生效果，使用了這一行告訴Safari該應用的名稱為Twitter。下一行很相似，控制當應用啟動時狀態欄的顯示方式。
最佳答案：這個meta標簽定義了蘋果設備上的狀態欄顏色，現在幾乎成了Web標準。它指定了瀏覽器該如何設置周邊UI的主題。安卓上的Chrome和桌面上的Brave瀏覽器都能很好地處理它。content中可以設置任何CSS顏色，甚至可以通過media屬性僅在特定媒體查詢（例如暗色模式）滿足時顯示顏色。你也可以在Web應用的manifest中定義該屬性以及額外的屬性。
我面試過的候選人沒人知道這個。我覺得只有深入了解最新技術發展趨勢的人才知道這一條。
最佳答案：Origin trial可以在網站上使用最新的試驗特性，根據用戶代理跟蹤反饋并匯報至Web標準社區，而不需要用戶同意參與某個特性標志。例如，Edge就有一個用于雙屏和可折疊設備的origin trial，這個功能非常酷，你可以根據折疊屏手機打開或關閉來實現不同的布局。
可接受答案：不了解這個選項。
幾乎沒人知道這個選項，只有那些特別了解CSS的極端情況和優化措施的人才知道。
最佳答案：假設你的網站不支持移動端響應式，然后在一個小屏幕設備上打開該網站。瀏覽器有可能會放大字體，以方便閱讀。CSS的text-size-adjust屬性設置為none即可禁止該特性，或設置為一個百分比，告訴瀏覽器最多能放大多少。
這里，Twitter將最大值設置為100%，也就是說文字不會超過其實際大小。這樣做的原因是網站已經是響應式網站了，因此他們不希望冒著布局被破壞的風險來允許大號字體。這個標簽應用到根HTML標簽上，所以對所有內容生效。因為這是一個試驗性的CSS，所以需要加上廠商前綴。此外，在這個CSS之前少了一個<style>，不過應該是被最小化到上一行了，我們沒看到而已。
可接受答案：我不知道這個選項的具體情況，但-ms和-webkit-分別是Internet Exporer和基于Webkit的瀏覽器的廠商前綴，用于非標準屬性。在CSS3出現時我們曾經使用過這些前綴，但隨著屬性從試驗階段進入穩定階段，或被標準接受，這些前綴就不再需要了。
Twitter的這行代碼非常有意思，因為你可以順便問一下網頁重置和標準化的區別。幾乎每個人都知道某個版本的正確答案。
最佳答案：因為不同的瀏覽器有不同的默認樣式（用戶代理樣式表），所以你應該通過重置屬性的方式覆蓋默認樣式，使網站在不同設備上擁有同樣的外觀。此處，Twitter告訴瀏覽器去掉body標簽的默認margin。這樣可以減少瀏覽器之間的不一致，但與重置相比，我更喜歡使用正規化樣式，即在所有瀏覽器上應用同樣的默認樣式，而不是簡單地刪除。有些人甚至會使用 * {margin:0 }，這一條過于強大了，而且會影響性能，但現在更常見的做法是導入 normalize.css或 reset.css等樣式表。
我很喜歡通過瀏覽器的Inspector工具來查看網站的制作，因此想出了這個面試的點子。盡管我認為我很了解語義HTML，但每次這樣做都會學到一些新東西。
因為Twitter主要是一個客戶端React應用，因此源代碼中只有很少的幾行。即使如此，能學到的東西也有很多！還有一些非常有意思的代碼，這些作為給讀者的練習。你能在面試中解釋多少行代碼？
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="Twitter">告訴瀏覽器，用戶可以將Twitter設置為搜索引擎。
<link rel="preload" as="script" crossorigin="anonymous" href="https://abs.twimg.com/responsive-web/client-web/polyfills.cad508b5.js" nonce="MGUyZTIyN2ItMDM1ZC00MzE5LWE2YmMtYTU5NTg2MDU0OTM1" />這一條有很多值得討論的東西，特別是nonce。
<link rel="alternate" hreflang="x-default" href="https://twitter.com/" />這一條用于國際化的首頁。
:focus:not([data-focusvisible-polyfill]){outline: none;}這一條用于在不使用鍵盤瀏覽時去掉焦點元素的框線（這里針對:focus-visible這個CSS選擇器使用了polyfill）。
原文地址：https://css-tricks.com/explain-the-first-10-lines-of-twitter-source-code/#top-of-site
本文為 CSDN 翻譯，未經授權，禁止轉載
END
成就一億技術人
我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。
使用demo
div { -ms-transform: rotate(0); -webkit-transform: rotate(0); -moz-transform: rotate(0); -o-transform: rotate(0); transform: rotate(0);}CSS前綴自動補全：autoprefixer
已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;
標準盒模型:1\. 占用寬:margin*2+padding*2+border*2+width=20*2+10*2+10*2+200=2802\. 占用高:margin*2+padding*2+border*2+height=20*2+10*2+10*2+50=1303\. 盒子實際寬度:padding*2+border*2+width=10*2+10*2+200=2404\. 盒子實際高度padding*2+border*2+height=10*2+10*2+50=90
怪異盒模型:1\. 占用寬:margin*2+width=20*2+200=2402\. 占用高:margin*2+height=20*2+50=903\. 盒子實際寬度:width=2004\. 盒子實際高度height=50
IE8及更早版本不兼容問題解決方案：在HTML頁面聲明
BFC（塊狀格式化上下文，獨立的盒子，布局不受外部影響，但是如果同一個BFC中，同級塊狀元素的margin-top和margin-bottom會重疊）
只要元素滿足下面的任一條件，都會觸發BFC特征。
解決問題:
元素被當成行內元素排版時，元素直接的空白符會被瀏覽器處理，根據white-spack的處理方式（默認是normal,合并多余空白），Html代碼在回車換行時被轉成一個空白符，在字體不為0的情況下，空白符占據一定寬度，所以inline-block元素之間就出現了空隙。
復現<ul> <li>首頁</li> <li>登陸</li> <li>資源</li> <li>社區</li> <li>幫助</li></ul>
解決辦法：
優先級相同時會發生什么? 樣式被覆蓋
normalize.css是一個css reset的替代方案。
ul>li:nth-child(2n+1) { background-color: red; }ul>li:nth-child(2n) { background-color: yellow;}
ul>li:first-child { border-top: none; }
有夢想的人，眼睛會發光。
希望屏幕前的你，能夠關注我一波。接下來，我會分享前端各種干貨，以及編程中的趣事。
html
正在加載中<dot>...</dot>
css
dot{
display: inline-block;
height: 1em;
line-height: 1;
text-align: left;
vertical-align: -.25em;
overflow: hidden;
}
dot::before{
display: block;
content: '...\A..\A.';
white-space: pre-wrap;
animation: dot 2s infinite step-start both;
}
@keyframes dot{
33% {
transform: translateY(-2em);
}
66% {
transform: translateY(-1em);
}
}
如果你看上圖代碼沒有看懂，請看下圖，我注釋掉一行代碼，你就明白了。原來是dot元素，沿著Y軸在循環位移，隱藏掉就讓你看到了加載的動畫效果。
當你需要這樣一個上傳文件，按鈕時，你考慮的是找設計弄個圖片，還是自己寫一個？？？
其實CSS寫，也很簡單的。
<a href="javascript：;" class="upload" title="繼續上傳">添加圖片</a>
.upload{
position: relative;
display: inline-block;
width: 76px;
height: 76px;
color: #ccc;
border: 2px dashed; /*邊框虛線*/
text-indent: -12em; /*使其文字看不到*/
transition: color .25s; /*hover事件：顏色漸變動畫*/
overflow: hidden;
margin: 50px 100px;
}
/*用before/after偽類做 + 號樣式*/
.upload:before, .upload:after{
content: '';
position: absolute;
top: 50%;
left: 50%;
}
.upload:hover{
color: #34538b;
}
.upload::before{
width: 20px;
border-top: 4px solid;
margin: -2px 0 0 -10px;
}
.upload::after{
height: 20px;
border-left: 4px solid;
margin: -10px 0 0 -2px;
}
當我們想給一個矩形或其他能用 border-radius 生成的形狀加投影時，用 box-shadow 都可以解決，如下圖：
但是，當元素添加了一些偽元素或半透明的裝飾之后，box-shadow就有些 力不從心了，因為 border-radius 會無恥地忽視透明部分。這類情況包括下列幾種情況:
1、半透明圖像、背景圖像、或者 border-image(比如老式的金質像框);
2、元素設置了點狀、虛線或半透明的邊框，但沒有背景(或者當 background-clip 不是 border-box 時);
3、對話氣泡，它的小尾巴通常是用偽元素生成的;
4、幾乎所有的折角效果
5、通過 clip-path 生成的形狀。
下面來看看這個示例： html代碼
<div class="speech">不規則的投影</div>
css樣式
div {
position: relative;
display: inline-flex;
flex-direction: column;
justify-content: center;
vertical-align: bottom;
box-sizing: border-box;
width: 8em;
padding: .5em;
height: 5em;
margin: .6em;
background: #0cc071;
color: #fff;
/*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此時是偽類是沒有陰影的*/
-webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5));
filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5));
}
.speech {
border-radius: .3em;
}
.speech::before {
content: '';
position: absolute;
top: 1em;
right: -.7em;
width: 0;
height: 0;
border: 1em solid transparent;
border-left-color: #0cc071;
border-right-width: 0;
}
從上圖可以看出box-shadow搞不定的，drop-shadow給搞定了。這是為什么了？
可以很明顯的看出區別，為什么會這樣呢？在這里我用的是div標簽，大家都知道，div標簽是個塊標簽，說白了是個盒模型，指的是一塊區域，box-shadow的屬性只能添加到盒模型外面，因此內部的東西是不會添加上的，就變成上圖的樣子，中間還是白色部分。而drop-shadow就不一樣了，他是把所有的非透明區域都做了陰影效果，就相當于一種真正的投影。
經常在網頁中看到一些Dialog，例如有些網頁點擊登錄注冊時就會跳出一個彈框來顯示登錄注冊頁面，下面就使用 css 完成一個可以自適應，無論窗口的大小，始終能保持水平垂直居中的dialog。
<div class="c-pupup"> <div class="dialog"> <div class="content"> 我是內容 </div> </div> </div>
css樣式
.c-pupup{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0,0,0,.5);
text-align: center;
white-space: nowrap;
z-index: 99;
}
.c-pupup:after{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.dialog{
background-color: #fff;
display: inline-block;
vertical-align: middle;
border-radius: 6px;
text-align: left;
white-space: normal;
width: 400px;
height: 250px;
}
這些CSS都是非常實用的，有興趣的可以收藏起來，沒準以后能用上。然后drop-shadow就不用去糾結IE能不能用了，因為我們已經放棄它了。
喜歡小編或者覺得小編文章對你有幫助的，可以點擊一波關注哦！
天下數據是國內屈指可數的擁有多處海外自建機房的新型IDC服務商，被業界公認為“中國IDC行業首選品牌”。
天下數據與全球近120多個國家頂級機房直接合作，提供包括香港、美國、韓國、日本、臺灣、新加坡、荷蘭、法國、英國、德國、埃及、南非、巴西、印度、越南等國家和地區的服務器、云服務器的租用服務，需要的請聯系天下數據客服！
除提供傳統的IDC產品外，天下數據的主要職責是為大中型企業提供更精細、安全、滿足個性需求的定制化服務器解決方案，特別是在直銷、金融、視頻、流媒體、游戲、電子商務、區塊鏈、快消、物聯網、大數據等諸多行業，為廣大客戶解決服務器租用中遇到的各種問題。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
