## 01.說一下對語義化的理解??
* 對開發者友好,讓人更容易讀懂,利于代碼可讀性
* 對機器友好,讓搜索引擎更容易讀懂,利于seo
## 02.說一下HTML5有哪些更新/新增??
* 新增語義化標簽,音頻視頻標簽
* 新增localstorage,sessionstorage本地存儲
* 新增DOM查詢 document.querySelector() 、 document.querySelectorAll()
* …
## 03.說一下defer和async的區別??
* 多個帶defer的script標簽里js同步執行,async是異步執行
* defer等所有元素解析完成之后,DOMContentLoaded之前執行
## 04.說一下iframe有哪些優點和缺點??
* 優點:展現嵌入的網頁;加載速度較慢的內容,如廣告;可以跨子域通信;
* 缺點:iframe會阻塞主頁面onload事件;不利于搜索引擎識別;增加http請求;
## 05.說一下web worker??
* Web Worker 的作用,就是為 JavaScript 創造多線程環境,允許主線程創建 Worker 線程,將一些任務分配給后者運行
* Worker 線程一旦新建成功,就會始終運行,不會被主線程上的活動(比如用戶點擊按鈕、提交表單)打斷。這樣有利于隨時響應主線程的通信。但是,這也造成了 Worker 比較耗費資源,不應該過度使用,而且一旦使用完畢,就應該關閉。
* 通過postMessage將結果回傳到主線程,這樣復雜操作的時候,就不會阻塞主進程了
* [阮一峰文章](https://www.ruanyifeng.com/blog/2018/07/web-worker.html)
## 06.行內,塊級,空元素,替換元素有哪些??
* 行內:button,span
* 塊級:div,p,ul,h1
* 替換元素:img,iframe,video
* 空元素:link,meta
## 07.DOCTYPE的作用?嚴格模式和混雜模式的區別?
* !DOCTYPE告訴瀏覽器以HTML5標準解析頁面,如果不寫,則進入混雜模式
* 嚴格模式(標準模式):以w3c標準解析代碼
* 混雜模式(怪異模式):瀏覽器用自己的方式解析代碼,混雜模式通常模擬老式瀏覽器的行為,以防止老站點無法工作
* `HTML5`沒有`DTD`,因此也就沒有嚴格模式與混雜模式的區別,`HTML5`有相對寬松的方法,實現時,已經盡可能大的實現了向后兼容(**HTML5 沒有嚴格和混雜之分**)。
## 08.說一下漸進增強和優雅降級的區別?
* 漸進增強是針對低版本瀏覽器也能保證基礎功能,然后對高級瀏覽器改進追加功能;
* 優雅降級是一開始構建完整功能,再對低版本進行兼容
## 09.說一下常見的meta標簽屬性和作用?
~~~html
<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
<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’ 循環播放