HTML面試題整理
01.說一下對語意化的理解？?
- 對開發者友好，讓人更容易讀懂，利于代碼可讀性
- 對機器友好，讓搜索引擎更容易讀懂，利于seo
02.說一下HTML5有哪些更新/新增？?
- 新增語意化標簽，音頻視頻標簽
- 新增localstorage，sessionstorage本地存盤
- 新增DOM查詢 document.querySelector() 、 document.querySelectorAll()
- …
03.說一下defer和async的區別？?
- 行內：button，span
- 塊級：div，p，ul，h1
- 替換元素：img，iframe，video
- 空元素：link，meta
04.說一下iframe有哪些優點和缺點？?
- 優點：展現嵌入的網頁；加載速度較慢的內容，如廣告；可以跨子域通信；
- 缺點：iframe會阻塞主頁面onload事件；不利于搜索引擎識別；增加http請求；
05.說一下web worker??
- 漸進增強是針對低版本瀏覽器也能保證基礎功能，然后對高級瀏覽器改進追加功能；
- 優雅降級是一開始構建完整功能，再對低版本進行兼容
06.行內，塊級，空元素，替換元素有哪些？?
- 多個帶defer的script標簽里js同步執行，async是異步執行
- defer等所有元素決議完成之后，DOMContentLoaded之前執行
07.DOCTYPE的作用？嚴格模式和混雜模式的區別？
- ！DOCTYPE告訴瀏覽器以HTML5標準決議頁面，如果不寫，則進入混雜模式
- 嚴格模式（標準模式）：以w3c標準決議代碼
- 混雜模式（怪異模式）：瀏覽器用自己的方式決議代碼，混雜模式通常模擬老式瀏覽器的行為，以防止老站點無法作業
HTML5沒有DTD，因此也就沒有嚴格模式與混雜模式的區別，HTML5有相對寬松的方法，實作時，已經盡可能大的實作了向后兼容(HTML5 沒有嚴格和混雜之分)，
08.說一下漸進增強和優雅降級的區別？
- Web Worker 的作用，就是為 JavaScript 創造多執行緒環境，允許主執行緒創建 Worker 執行緒，將一些任務分配給后者運行
- Worker 執行緒一旦新建成功，就會始終運行，不會被主執行緒上的活動（比如用戶點擊按鈕、提交表單）打斷，這樣有利于隨時回應主執行緒的通信，但是，這也造成了 Worker 比較耗費資源，不應該過度使用，而且一旦使用完畢，就應該關閉，
- 通過postMessage將結果回傳到主執行緒，這樣復雜操作的時候，就不會阻塞主行程了
- 阮一峰文章
09.說一下常見的meta標簽屬性和作用？
-
<meta charset="UTF-8" > -
<meta name="keywords" content="關鍵詞" /> <meta name="description" content="頁面描述內容" /> -
<meta http-equiv="refresh" content="0;url=" /> -
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
10.說一下HTML5的離線存盤？
-
指的是沒有網路連接的時候，可以正常訪問應用，與網路連接時更新快取檔案
-
在
cache.manifest檔案中撰寫需要離線存盤的資源： -
<html lang="en" manifest="index.manifest"> -
在離線狀態時，操作
window.applicationCache進行離線快取的操作， -
如何清除快取：更新 manifest 檔案，通過 javascript 操作，清除瀏覽器快取
11.說一下怎么做好seo？
- 語意化元素
- title和meta標簽描述頁面內容
- logo使用a標簽加背景圖
12.說一下b和strong，i和em的區別？
- strong是有語意的，起到加強語氣的效果，遇到閱讀器會重讀，即為了強調而加粗
- em起到強調文本的作用
13.說一下img的srcset作用？alt和title的區別?
- 回應式頁面中經常用到根據螢屏密度設定不同的圖片
- 這時就用到了 img 標簽的srcset屬性，srcset屬性用于設定不同螢屏密度下，img 會自動加載不同的圖片
- alt是圖片失效的時候的備用圖片地址，title是圖片標題
14.說一下canvas和svg的區別？
- canvas是畫布，適合圖形密集型的游戲，不支持事件處理，
- svg是矢量圖，不依賴解析度，不適合游戲，適合大型渲染區域（地圖），支持事件處理
15.說一下drag api？
-
dragstart：事件主體是被拖放元素，在開始拖放被拖放元素時觸發，
-
darg：事件主體是被拖放元素，在正在拖放被拖放元素時觸發，
-
dragenter：事件主體是目標元素，在被拖放元素進入某元素時觸發，
-
dragover：事件主體是目標元素，在被拖放在某元素內移動時觸發，
-
dragleave：事件主體是目標元素，在被拖放元素移出目標元素是觸發，
-
drop：事件主體是目標元素，在目標元素完全接受被拖放元素時觸發，
-
dragend：事件主體是被拖放元素，在整個拖放操作結束時觸發，
16.說一下label的作用？
- 控制表單控制元件關系，選擇lable標簽時，自動將焦點轉到input上
17.說一下src和href的區別？
- src是引入外部資源下載到檔案，會暫停其他資源的下載
- href是鏈接外部資源，不會暫停其他資源的下載
18.說一下音視頻標簽的使用？
- audio和video標簽
- controls 控制面板、autoplay 自動播放、loop=‘true’ 回圈播放
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/402749.html
標籤：其他