Doctype作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別?
- <!DOCTYPE>聲明位于HTML文檔中的第一行吞彤，處于 <html> 標(biāo)簽之前我衬。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)饰恕。
- 標(biāo)準(zhǔn)模式的排版 和JS運作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運行挠羔。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作埋嵌。
HTML5 為什么只需要寫 <!DOCTYPE HTML>破加？
HTML5 不基于 SGML，因此不需要對DTD進行引用雹嗦，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）范舀； 而HTML4.01基于SGML,所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型了罪。
行內(nèi)元素有哪些锭环？塊級元素有哪些？ 空(void)元素有那些泊藕？
首先：CSS規(guī)范規(guī)定辅辩，每個元素都有display屬性，確定該元素的類型娃圆，每個元素都有默認的display值玫锋，如div的display默認值為“block”，則為“塊級”元素踊餐；span默認display屬性值為“inline”景醇，是“行內(nèi)”元素。
- 行內(nèi)元素有：a b span img input select strong（強調(diào)的語氣）
- 塊級元素有：div ul ol li dl dt dd h1 h2 h3 h4…p
- 常見的空元素：
<img> <input> <link> <meta> 鮮為人知的是： <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>
頁面導(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)核的理解纬乍？
主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎：負責(zé)取得網(wǎng)頁的內(nèi)容（HTML裸卫、XML仿贬、圖像等等）、整理訊息（例如加入CSS等）墓贿，以及計算網(wǎng)頁的顯示方式茧泪，然后會輸出至顯示器或打印機。瀏覽器的內(nèi)核的不同對于網(wǎng)頁的語法解釋會有不同聋袋，所以渲染的效果也不相同队伟。所有網(wǎng)頁瀏覽器、電子郵件客戶端以及其它需要編輯幽勒、顯示網(wǎng)絡(luò)內(nèi)容的應(yīng)用程序都需要內(nèi)核嗜侮。
- JS引擎則：解析和執(zhí)行javascript來實現(xiàn)網(wǎng)頁的動態(tài)效果。最開始渲染引擎和JS引擎并沒有區(qū)分的很明確代嗤，后來JS引擎越來越獨立棘钞，內(nèi)核就傾向于只指渲染引擎。
常見的瀏覽器內(nèi)核有哪些干毅？
Trident內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等宜猜。[又稱MSHTML]
Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等
Presto內(nèi)核：Opera7及以上硝逢。 [Opera內(nèi)核原為：Presto姨拥，現(xiàn)為：Blink;]
Webkit內(nèi)核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]
詳細文章：瀏覽器內(nèi)核的解析和對比
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)生負面影響的元素：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的樣式愉豺。
當(dāng)然也可以直接使用成熟的框架篓吁、比如html5shim;
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
- 如何區(qū)分HTML5： DOCTYPE聲明\新增的結(jié)構(gòu)元素\功能元素
簡述一下你對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)站分塊括袒，便于閱讀維護理解次兆。
HTML5的離線儲存怎么使用，工作原理能不能解釋一下锹锰？
在用戶沒有與因特網(wǎng)連接時芥炭，可以正常訪問站點或應(yīng)用漓库，在用戶與因特網(wǎng)連接時，更新用戶機器上的緩存文件蚤认。原理：HTML5的離線存儲是基于一個新建的.appcache文件的緩存機制(不是存儲技術(shù))米苹，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來砰琢。之后當(dāng)網(wǎng)絡(luò)在處于離線狀態(tài)下時蘸嘶，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
-
如何使用：
- 頁面頭部像下面一樣加入一個manifest的屬性陪汽；
- 在cache.manifest文件的編寫離線存儲的資源训唱； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html3、在離線狀態(tài)時挚冤，操作window.applicationCache進行需求實現(xiàn)况增。
詳細的使用請參考：有趣的HTML5：離線存儲
瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
在線的情況下训挡，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性澳骤，它會請求manifest文件，如果是第一次訪問app澜薄，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲为肮。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面肤京，然后瀏覽器會對比新的manifest文件與舊的manifest文件颊艳，如果文件沒有發(fā)生改變，就不做任何操作忘分，如果文件改變了棋枕，那么就會重新下載文件中的資源并進行離線存儲。離線的情況下妒峦，瀏覽器就直接使用離線存儲的資源重斑。
詳細的使用請參考：有趣的HTML5：離線存儲
請描述一下 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有那些缺點？
- iframe會阻塞主頁面的Onload事件例衍；
- 搜索引擎的檢索程序無法解讀這種頁面昔期，不利于SEO;
- iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制佛玄，所以會影響頁面的并行加載硼一。
使用iframe之前需要考慮這兩個缺點。如果需要使用iframe梦抢，最好是通過javascript動態(tài)給iframe添加src屬性值般贼，這樣可以繞開以上兩個問題。
Label的作用是什么奥吩？是怎么用的哼蛆？
label標(biāo)簽來定義表單控制間的關(guān)系,當(dāng)用戶選擇該標(biāo)簽時，瀏覽器會自動將焦點轉(zhuǎn)到和標(biāo)簽相關(guān)的表單控件上霞赫。
<label for="Name">Number:</label>
<input type=“text“name="Name" id="Name"/>
<label>Date:<input type="text" name="B"/></label>
HTML5的form如何關(guān)閉自動完成功能人芽？
給不想要提示的 form 或某個 input 設(shè)置為 autocomplete=off。
如何實現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信? (阿里)
WebSocket绩脆、SharedWorker；
也可以調(diào)用localstorge橄抹、cookies等本地存儲方式靴迫；
localstorge另一個瀏覽上下文里被添加、修改或刪除時楼誓，它都會觸發(fā)一個事件玉锌，我們通過監(jiān)聽事件，控制它的值來進行頁面信息通信疟羹；
注意quirks：Safari 在無痕模式下設(shè)置localstorge值時會拋出 QuotaExceededError 的異常主守；
webSocket如何兼容低瀏覽器？(阿里)
Adobe Flash Socket 榄融、ActiveX HTMLFile (IE) 参淫、基于 multipart 編碼發(fā)送 XHR 、基于長輪詢的 XHR
頁面可見性（Page Visibility API） 可以有哪些用途愧杯？
通過 visibilityState 的值檢測頁面當(dāng)前是否可見涎才，以及打開網(wǎng)頁的時間等;在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放；
如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域耍铜？
1邑闺、map+area或者svg
2、border-radius
3棕兼、純js實現(xiàn) 需要求一個點在不在圓上簡單算法陡舅、獲取鼠標(biāo)坐標(biāo)等等
實現(xiàn)不使用 border 畫出1px高的線，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果伴挚。
<div style="height:1px;overflow:hidden;background:red"></div>
網(wǎng)頁驗證碼是干嘛的靶衍，是為了解決什么安全問題。
區(qū)分用戶是計算機還是人的公共全自動程序章鲤√穑可以防止惡意破解密碼、刷票败徊、論壇灌水帚呼；有效防止黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試。
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)的文本；
Physical Style Elements -- 自然樣式標(biāo)簽
b, i, u, s, pre
Semantic Style Elements -- 語義樣式標(biāo)簽
strong, em, ins, del, code
應(yīng)該準(zhǔn)確使用語義樣式標(biāo)簽, 但不能濫用, 如果不能確定時首選使用自然樣式標(biāo)簽孽惰。
