摘要：不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)標(biāo)準(zhǔn)模式的排版和運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。又稱內(nèi)核及以上版本，等內(nèi)核及以上。內(nèi)核原為，現(xiàn)為內(nèi)核等。如果不能確定時，首選使用自然樣式標(biāo)簽

語義化

HTML標(biāo)簽的語義化是指：通過使用包含語義的標(biāo)簽（如h1-h6）恰當(dāng)?shù)乇硎疚臋n結(jié)構(gòu)

css命名的語義化是指：為html標(biāo)簽添加有意義的class

為什么需要語義化：

去掉樣式后頁面呈現(xiàn)清晰的結(jié)構(gòu)

盲人使用讀屏器更好地閱讀

搜索引擎更好地理解頁面，有利于收錄

便團隊項目的可持續(xù)運作及維護

簡述一下你對HTML語義化的理解？

用正確的標(biāo)簽做正確的事情。

html語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰，便于對瀏覽器、搜索引擎解析;

即使在沒有樣式CSS情況下也以一種文檔格式顯示，并且是容易閱讀的;

搜索引擎的爬蟲也依賴于HTML標(biāo)記來確定上下文和各個關(guān)鍵字的權(quán)重，利于SEO;

使閱讀源代碼的人對網(wǎng)站更容易將網(wǎng)站分塊，便于閱讀維護理解

Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?

聲明位于位于HTML文檔中的第一行，處于 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)

標(biāo)準(zhǔn)模式的排版 和JS運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作

HTML5 為什么只需要寫 ？

HTML5 不基于 SGML，因此不需要對DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）

而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型

頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？

link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS,定義rel連接屬性等作用；而@import是CSS提供的，只能用于加載CSS

頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載

import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題

常見的瀏覽器內(nèi)核有哪些？

Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]

Gecko內(nèi)核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto內(nèi)核：Opera7及以上。 [Opera內(nèi)核原為：Presto，現(xiàn)為：Blink;]

Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的Blink（WebKit的分支）]

html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加

繪畫 canvas

用于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術(shù)webworker, websocket, Geolocation

移除的元素：

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u

對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes

支持HTML5新標(biāo)簽：

IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽

可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽

瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式

html5有哪些新特性、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5？

HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加

繪畫 canvas

用于媒介回放的 video 和 audio 元素

本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

表單控件，calendar、date、time、email、url、search

新的技術(shù)webworker, websocket, Geolocation

移除的元素：

純表現(xiàn)的元素：basefont，big，center，font, s，strike，tt，u

對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes

支持HTML5新標(biāo)簽：

IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽

可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽

瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式

當(dāng)然也可以直接使用成熟的框架、比如html5shim

如何區(qū)分HTML5： DOCTYPE聲明新增的結(jié)構(gòu)元素功能元素

HTML5的離線儲存怎么使用，工作原理能不能解釋一下？

在用戶沒有與因特網(wǎng)連接時，可以正常訪問站點或應(yīng)用，在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件

原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù))，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示

如何使用：

頁面頭部像下面一樣加入一個manifest的屬性；

在cache.manifest文件的編寫離線存儲的資源

在離線狀態(tài)時，操作window.applicationCache進行需求實現(xiàn)

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？

在線的情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。

離線的情況下，瀏覽器就直接使用離線存儲的資源

請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端（Client Side）上的數(shù)據(jù)（通常經(jīng)過加密）

cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要），記會在瀏覽器和服務(wù)器間來回傳遞

sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

存儲大小：

cookie數(shù)據(jù)大小不能超過4k

sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大

有期時間：

localStorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)

sessionStorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除

cookie 設(shè)置的cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

iframe有哪些優(yōu)點和缺點？

缺點：

iframe會阻塞主頁面的Onload事件

搜索引擎的檢索程序無法解讀這種頁面，不利于SEO

iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載

使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以繞開以上兩個問題

優(yōu)點：

用來加載速度較慢的內(nèi)容（如廣告）

可以使腳本可以并行下載

可以實現(xiàn)跨子域通信

Label的作用是什么？是怎么用的？

label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件

HTML5的form如何關(guān)閉自動完成功能？

給不想要提示的 form 或某個 input 設(shè)置為 autocomplete=off。

如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? (阿里)

WebSocket、SharedWorker

也可以調(diào)用localstorge、cookies等本地存儲方式

webSocket如何兼容低瀏覽器？(阿里)

Adobe Flash Socket 、

ActiveX HTMLFile (IE) 、

基于 multipart 編碼發(fā)送 XHR 、

基于長輪詢的 XHR

頁面可見性（Page Visibility API） 可以有哪些用途？

通過 visibilityState 的值檢測頁面當(dāng)前是否可見，以及打開網(wǎng)頁的時間等;

在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放

如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域？

map+area或者svg

border-radius

純js實現(xiàn) 需要求一個點在不在圓上簡單算法、獲取鼠標(biāo)坐標(biāo)等等

實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果

如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信？

iframe + contentWindow

postMessage

SharedWorker(Web Worker API)

storage 事件(localStorge API)

WebSocket

webSocket 如何兼容低瀏覽器？

Adobe Flash Socket

ActiveX HTMLFile (IE)

基于 multipart 編碼發(fā)送 XHR

基于長輪詢的 XHR

title 與 h1 的區(qū)別、b 與 strong 的區(qū)別、i 與 em 的區(qū)別？

title 表示是整個頁面標(biāo)題，h1 則表示層次明確的標(biāo)題，對頁面信息的抓取有很大的影響

strong 標(biāo)明重點內(nèi)容，有語氣加強的含義，使用閱讀設(shè)備閱讀網(wǎng)絡(luò)時，strong 會重讀，而 b 是展示強調(diào)內(nèi)容

i內(nèi)容展示為斜體，em 表示強調(diào)的文本

自然樣式標(biāo)簽：b, i, u, s, pre

語義樣式標(biāo)簽：strong, em, ins, del, code

應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用。如果不能確定時，首選使用自然樣式標(biāo)簽