1. Doctype的作用？ 標準模式與相容模式個有什麼區別
Doctype放在html文件的第一行，告知瀏覽器以何種方式解析頁面，規範路瀏覽器的行為,Doctype不存在或者格式不正確會導致頁面以向後相容的方式實現頁面
標準模式下頁面以瀏覽器的最高標準執行，相容模式下瀏覽器以向後相容的方式解析頁面。
2. XML和HTML的區別
1.xml是可擴充套件標記語言，其前身為SGML(標準通用標記語言)。html是超文字標記語言，是www的描述語言
2.xml主要是用來處理和傳輸資料的，html主要是用來顯示資料的
3.語法格式上xml比較嚴格(如標籤的閉合，大小寫)，html相對較為寬鬆。
3. HTML5為什麼只需要寫
HTML5 不基於 SGML，因此不需要對DTD進行引用，但是需要doctype來規範瀏覽器的行為（讓瀏覽器按照它們應該的方式來執行）；
而HTML4.01基於SGML,所以需要對DTD進行引用，才能告知瀏覽器文件所使用的文件型別。
4. 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
行內元素： a,b,span,,i,img,input,strong,em,button
塊級元素： 獨佔一行，div，p，h1-h6，ul，li，ol
常見的空元素：br,hr,img,input,meta
5. 頁面匯入樣式時，使用link和@import有什麼區別？
1.link屬於xml標籤，不僅僅可以載入樣式檔案，還可以定義ref屬性連結，而@import是css提供的，只能用於載入樣式
2.link支援通過js來更改樣式，@import不支援
3.頁面載入的時候link同時會被載入，而@import引入的樣式只有在頁面載入完成後才會被載入
4.@import是在css2.1裡提出的，存在相容問題，link是xml標籤，不存在相容問題
6. 介紹一下你對瀏覽器核心的理解？
主要分為兩部分：渲染引擎和JS引擎
渲染引擎：負責獲取網頁的內容（html，xml，影象等），整理網頁的訊息（加入css樣式），以及計算頁面的顯示方式，然後輸出螢幕上。
JS引擎：解析和執行javascript程式碼來實現網頁的動態效果
在最初渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，瀏覽器核心就傾向於指向渲染引擎
7. 常見的瀏覽器核心有哪些？
Trident：IE，360，搜狗
Gecko： FireFox
Presto： Opera（現為blink）
webkit： chrome（現為blink），safari
blink： Opera和chrome在webkit基礎上共同研發的核心
8. html5簡單介紹一下，新特性，減少了那些特性
html5是html的第5次修訂版本，該版本的釋出極大的提高了瀏覽器的原生功能，減少了對瀏覽器對一些網路外掛（如flash）的依賴，自身提供了很多新的特性。
新特性：
1.語義化標籤： header，footer，nav，section
2.用於繪畫的canvans和svg
3.媒介回放標籤：audio，video
4.本地儲存：localStorage sessionStorage
5.新的表單控制元件： calendar、date、time、email、url、search
6.新的技術： webworker, websocket, Geolocation
複製程式碼刪除的元素（不常使用元素）：
純表現的元素：basefont，big，center，font，u
對可用性產生負面影響的元素： frame，frameset，noframe
複製程式碼如何區分html5： Doctype宣告/新增的結構元素/功能元素
9. html語義化的理解
1.用正確的標籤做正確的事
2.html語義化讓頁面更加結構化，清晰化，便於對瀏覽器，搜尋引擎解析
3.讓頁面以一種文件的形式顯示（即使沒有css樣式的情況下），並且是容易閱讀的
4.搜尋引擎的爬蟲也依賴於HTML標記來確定上下文和各個關鍵字的權重，利於SEO;
5.使閱讀原始碼的人對網站更容易將網站分塊，便於閱讀維護理解。
10. html5的離線快取，工作原理 （重點）
在使用者沒有與因特網連線時，可以正常訪問站點或應用，在使用者與因特網連線時，更新使用者機器上的快取檔案。
原理：HTML5的離線儲存是基於一個新建的.appcache檔案的快取機制(不是儲存技術)，通過這個檔案上的解析清單離線儲存資源，這些資源就會像cookie一樣被儲存了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線儲存的資料進行頁面展示。
如何使用：
1、頁面頭部像下面一樣加入一個manifest的屬性；
2、在cache.manifest檔案的編寫離線儲存的資源；
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
複製程式碼3、在離線狀態時，操作window.applicationCache進行需求實現。
11. 瀏覽器是如何對html5的離線快取資源進行管理
1.線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest檔案，如果是第一次訪問app，那麼瀏覽器就會根據manifest檔案的內容下載相應的資源並且進行離線儲存。如果已經訪問過app並且資源已經離線儲存了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest檔案與舊的manifest檔案，如果檔案沒有發生改變，就不做任何操作，如果檔案改變了，那麼就會重新下載檔案中的資源並進行離線儲存。
2.離線的情況下，瀏覽器就直接使用離線儲存的資源。
12. cookies，localStorage，sessionStorage
cookie：為了標記使用者身份而儲存在本地終端上的資料（通常都是經過加密），cookie資料始終在同源的http請求中攜帶（即使不需要），即會在瀏覽器和伺服器間來回傳遞
localStorage和sessionStorage： html5新增加的特性，只儲存在本地的資料，不會自動把資料放鬆給伺服器。
儲存大小： cookie資料的大小不能超過4K localStorage每個域名的儲存大小不超過5M，sessionStorage儲存的更多
過期時間： cookie：cookie資料在設定的過期時間內一直有效，即使瀏覽器開啟或關閉 localStorage： 永續性儲存，頁面關閉後資料不會消失 sessionStorage： 會話級別的儲存，頁面關閉後資料自動消失
13. label的作用？如何使用
label標籤來定義表單控制間的關係，當使用者點選該標籤時，瀏覽器會自動將焦點聚焦到和標籤相關的表單控制元件上。
使用方法：label的for屬性值指向表單控制元件的id
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
複製程式碼14. html5的form如何關閉自動完成功能
給不想要提示的 form 或某個 input 設定為 autocomplete=off。
15. 如何實現瀏覽器內多個標籤頁間的通訊
1.webScoket，shareWorker
2.localStorage和sessionStorage等本地儲存方式
3.localstorge另一個瀏覽上下文裡被新增、修改或刪除時，它都會觸發一個事件，
我們通過監聽事件，控制它的值來進行頁面資訊通訊；
注意quirks：Safari 在無痕模式下設定localstorge值時會丟擲 QuotaExceededError 的異常；
16. webSocket是什麼，如何相容低版本瀏覽器
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基於 multipart 編碼傳送 XHR 、
基於長輪詢的 XHR
17. 在頁面上實現一個圓形的可點選區域
1.map+area或者svg
2.border-radius
3.純js實現 需要求一個點在不同圓上的簡單演算法，獲取座標等
18. 實現不使用border畫出1px高的線，在不同瀏覽器下(標準模式和怪異模式)保持一致的效果
<div style='height: 1px;overflow: hidden;background: red;'></div>
複製程式碼19. 網頁驗證碼的作用，解決的問題
區分使用者是人還是計算機的公共全自動程式，可以防止惡意破解密碼/刷票/論壇灌水
有效地防止了黑客對某一特定使用者用特定的程式暴力破解方式進行的不斷登陸嘗試
20. title與h1的區別，b與strong的區別，i與em的區別
1.title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，對頁面資訊的抓取也有很大的影響；
2.strong是標明重點內容，有語氣加強的含義，使用閱讀裝置閱讀網路時：strong會重讀，而b是展示強調內容。
3.i內容展示為斜體，em表示強調的文字；
自然樣式標籤(Physical Style Elements): b, i, u, s, pre
語義樣式標籤(Semantic Style Elements): strong, em, ins, del, code
應該準確使用語義樣式標籤, 但不能濫用, 如果不能確定時首選使用自然樣式標籤。