為了更好的學習好前端，我接下來會整理前端從html、css、js的經典面試題，這個是由我們艾程式設計清心老師和arry老師精心整理出來的重點面試題，大家可以留意下，學會了，對於你接下來找工作以及查漏補缺學習非常有幫助！

內容大綱：

1. src和href的區別;
2. script 標籤中 defer 和 async 的區別;
3. 常用 meta 標籤有哪些;
4. img的srcset和sizes屬性的作用;

1、src和href的區別

src 和 href 都是用來引用外部的資源，它們的區別如下：

src: 表示對資源的引用，它指向的內容會嵌入到當前標籤所在的位置。src 會將其指向的資源下載並應⽤到⽂檔內，如請求 js 指令碼。當瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源載入、編譯、執⾏完畢，所以⼀般 js 指令碼會放在頁面底部。

href : 表示超文字引用，它指向一些網路資源，建立和當前元素或本文件的連結關係。當瀏覽器識別到它指向的⽂件時，就會並⾏下載資源，不會停⽌對當前⽂檔的處理。常用在 a、link 等標籤上。

2、script 標籤中 defer 和 async 的區別？

如果沒有 defer 或 async 屬性，瀏覽器會立即載入並執行相應的指令碼。它不會等待後續載入的文件元素，讀取到就會開始載入和執行，這樣就阻塞了後續文件的載入。

defer 和 async 屬性都是去非同步載入外部的 JS 指令碼檔案，它們都不會阻塞頁面的解析，其區別如下：

執行順序: 多個帶 async 屬性的標籤，不能保證載入的順序；多個帶 defer 屬性的標籤，按照載入順序執行；

指令碼是否並行執行：async 與 defer 屬性都會並行載入，但是async載入完後會立即執行, 阻塞其他任務的執行, defer 會最後再執行

3、常用 meta 標籤有哪些？

meta 標籤由 name 和 content 屬性定義，用來描述網頁文件的屬性，比如網頁的作者，網頁描述，關鍵詞等

• charset, 用來描述 HTML 文件的編碼型別
• <meta charset="UTF-8">
• keywords
• <meta name="keywords" content="關鍵詞" />
• description
• <meta name="description" content="頁面描述" />
• refresh 頁面重定向和重新整理
• <meta http-uquiv="refresh" content="0;url=" />
• viewport 適配移動端， 控制視口大小和比例
• <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
• robots 搜尋引擎方式
• <meta name="robots" content="index,follow" />
• 其中，content 引數如下：
• all, 檔案被檢索， 連結可被查詢
• none, 檔案不可檢索，連結不可查詢
• index, 檔案可檢索
• follow, 連結可被查詢
• noindex 檔案不可檢索
• nofollow 連結不可查詢

4、img的srcset和sizes屬性的作用？

<img src='' srcset=''  size=''

srcset屬性

srcset 屬性用於瀏覽器根據寬、高和畫素密度來載入相應的圖片資源。

srcset屬性格式：圖片地址 寬度描述w 畫素密度描述x，多個資 源之間用逗號分隔

<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 800w, small.jpg 1x" />上面代表示，當瀏覽器寬達到800px，則載入middle.jpg，達到1400px，則載入big.jpg。

注意： 畫素密度描述只對固定寬度圖片有效。

sizes屬性：

瀏覽器提供一個預估的圖片顯示寬度

屬性格式：媒體查詢 寬度描述（支援px），多條規則用逗號分隔。

<img src="" srcset="" sizes="(max-width: 320px) 300w, 1200w"/>

以上程式碼表示瀏覽器視口為 320px 時圖片寬度為 300px，其他情況為 1200px。

接下來還會分享54個《CSS高薪必會面試題》，電子書、《js高薪必會面試題》、《108個常用的CSS佈局》等精心彙編內容，讓你在自學的過程有更好的助力，大家有什麼樣的疑問可以聯絡我，可以邀請你進入我們的學習問答群，我們的老師會在群裡每天給大家答疑問題，讓我們一起加油！

為幫助到一部分同學不走彎路，真正達到一線網際網路大廠前端專案研發要求，首次實力寵粉，打造了《30天挑戰學習計劃》，內容如下：

HTML/HTML5，CSS/CSS3，JavaScript，真實企業專案開發，雲伺服器部署上線，從入門到精通

• PC端專案開發（1個）
• 移動WebApp開發（2個）
• 多端響應式開發（1個）

共4大完整的專案開發 ！一行一行程式碼帶領實踐開發，實際企業開發怎麼做我們就是怎麼做。從學習一開始就進入工作狀態，省得浪費時間。

從學習一開始就同步使用 Git 進行專案程式碼的版本的管理，Markdown 記錄學習筆記，包括真實大廠專案的開發標準和設計規範，命名規範，專案程式碼規範，SEO優化規範

從藍湖UI設計稿 到 PC端，移動端，多端響應式開發專案開發

• 真機除錯，雲服務部署上線；
• Linux環境下 的 Nginx 部署，Nginx 效能優化；
• Gzip 壓縮，HTTPS 加密協議，域名伺服器備案，解析；
• 企業專案域名跳轉的終極解決方案，多網站、多系統部署；
• 使用 使用 Git 線上專案部署；

這些內容在《30天挑戰學習計劃》中每一個細節都有講到，包含視訊+圖文教程+專案資料素材等。只為實力寵粉，真正一次掌握企業專案開發必備技能，不走彎路 ！

過程中【不涉及】任何費用和利益，非誠勿擾 。

如果你沒有新增助理老師微信，可以新增下方微信，說明要參加30天挑戰學習計劃，來自頭條！老師會邀請你進入學習，並給你發放相關資料

30 天挑戰學習計劃 Web 前端從入門到實戰 | arry老師的部落格-艾程式設計