## 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’ 循環播放
