1掷匠、Doctype作用虫蝶？嚴格模式與混雜模式如何區(qū)分？它們有何意義?
答：作用是告訴的html使用的那個版本的html協(xié)議寫的.按照聲明的協(xié)議執(zhí)行.怪異模式和嚴格模式（譯注：一般稱為標準模式：Standards Mode,下文中的嚴格模式都可以理解為標準模式）是瀏覽器解析CSS時的兩種‘模式’。這篇文章將簡單闡述這兩種模式之間的差異穆刻。該標簽可聲明三種 DTD 類型，分別表示嚴格版本派敷、過渡版本以及基于框架的 HTML 文檔蛹批。
2、HTML5 為什么只需要寫 <!DOCTYPE HTML>篮愉？
答:html5 不基于SGML腐芍，因此不需要對它DTD進行引用，但是需要doctype來規(guī)范瀏覽器的行為试躏。而Html4基于SGML猪勇，所以需要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型颠蕴。
3泣刹、行內(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>
4马僻、頁面導入樣式時，使用link和@import有什么區(qū)別注服？
差別1：老祖宗的差別韭邓。link屬于XHTML標簽措近，而@import完全是CSS提供的一種方式。link標簽除了可以加載CSS外仍秤，還可以做很多其它的事情熄诡，比如定義RSS，定義rel連接屬性等诗力，@import就只能加載CSS了凰浮。
差別2：加載順序的差別。當一個頁面被加載的時候（就是被瀏覽者瀏覽的時候）苇本，link引用的CSS會同時被加載袜茧，而@import引用的CSS會等到頁面全部被下載完再被加載。所以有時候瀏覽@import加載CSS的頁面時開始會沒有樣式（就是閃爍）瓣窄，網(wǎng)速慢的時候還挺明顯（夢之都加載CSS的方式就是使用@import笛厦，我一邊下載一邊瀏覽夢之都網(wǎng)頁時，就會出現(xiàn)上述問題）俺夕。
差別3：兼容性的差別裳凸。由于@import是CSS2.1提出的所以老的瀏覽器不支持，@import只有在IE5以上的才能識別劝贸，而link標簽無此問題姨谷。
差別4：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候映九，只能使用link標簽梦湘，因為@import不是dom可以控制的。
差別5：@import可以在css中再次引入其他樣式表件甥，比如可以創(chuàng)建一個主樣式表捌议，在主樣式表中再引入其他的樣式表。
5引有、介紹一下你對瀏覽器內(nèi)核的理解瓣颅？
那內(nèi)核是什么呢？內(nèi)核只是一個通俗的說法譬正，其英文名稱為“Layout engine”弄捕，翻譯過來就是“排版引擎”，也被稱為“頁面渲染引擎”（下文中各種說法通用）导帝。它負責取得網(wǎng)頁的內(nèi)容（HTML、XML穿铆、圖像等等）您单、整理信息（例如加入CSS等），以及計算網(wǎng)頁的顯示方式荞雏，然后會輸出至顯示器或打印機虐秦。所有網(wǎng)頁瀏覽器平酿、電子郵件客戶端以及其它需要編輯、顯示網(wǎng)絡內(nèi)容的應用程序都需要排版引擎悦陋。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同蜈彼，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果的原因俺驶。這就是編寫網(wǎng)頁的麻煩所在啊幸逆。。暮现。要讓所有瀏覽器顯示大概一致还绘，有時候很麻煩。
現(xiàn)在市面上常見的 內(nèi)核基本是一下4種：Trident：
這是微軟開發(fā)的一種排版引擎栖袋。該內(nèi)核程序在1997年的IE4中首次被采用拍顷，是微軟在Mosaic代碼的基礎之上修改而來的，并沿用到目前的 IE7塘幅。Trident實際上是一款開放的內(nèi)核昔案，其接口內(nèi)核設計的相當成熟，因此才有許多采用IE內(nèi)核而非IE的瀏覽器涌現(xiàn)（如 Maxthon电媳、The World 踏揣、TT、GreenBrowser匆背、AvantBrowser等）呼伸。此外，為了方便也有很多人直接簡稱其為IE內(nèi)核（當然也不排除有部分人是因為不知道內(nèi) 核名稱而只好如此說钝尸，至少老N就是如此括享。。珍促。）铃辖。自從發(fā)布后，Trident不斷地被更新和完善：
Trident II（IE5）——增進對CSS1.0的支持及對CSS2重大的變更猪叙；
Trident III（IE5.5）——修正部分CSS的排版控制娇斩；
Trident IV（IE6）——修正了一部分box-model的錯誤以及增加了“兼容模式（Quirks Mode）”切換功能，以增加對文件類型描述（Document Type Definition穴翩，DTD）的支持犬第；
Trident V（IE7）——修正許多CSS排版處理上的錯誤以及增加對PNG格式alpha通道（半透明）的支持。（這就是IE6經(jīng)常被詬病的對png圖片支持不良的之處Ｃ⑴痢）
Geckos：
Gecko是套開放源代碼的歉嗓、以C++編寫的網(wǎng)頁排版引擎。這軟件原本是由網(wǎng)景通訊公司開發(fā)的背蟆，Netcape6開始采用該內(nèi)核鉴分。后來的 Mozilla FireFox也采用了該內(nèi)核哮幢，Geckos的特點是代碼完全公開，因此志珍，其可開發(fā)程度很高橙垢，全世界的程序員都可以為其編寫代碼，增加功能伦糯。Geckos 現(xiàn)在由Mozilla基金會維護柜某。
Presto：
Presto是一個由Opera Software開發(fā)的瀏覽器排版引擎，該內(nèi)核在2003年的Opera7中首次被使用舔株，該款引擎的特點就是渲染速度的優(yōu)化達到了極致莺琳，也是目前公認網(wǎng)頁瀏覽速度最快的瀏覽器內(nèi)核。
Webkit：
蘋果公司自己的內(nèi)核载慈，也是蘋果的Safari瀏覽器使用的內(nèi)核惭等。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來办铡，它們都是自由軟 件辞做，在GPL條約下授權，同時支持BSD系統(tǒng)的開發(fā)寡具。所以Webkit也是自由軟件秤茅，同時開發(fā)源代碼。在安全方面不受IE童叠、Firefox的制約框喳，所以 Safari瀏覽器在國內(nèi)還是很安全的。
簡單的總結一下：
使用Trident內(nèi)核的瀏覽器：IE厦坛、Maxthon五垮、TT、The World等杜秸；
使用Gecko內(nèi)核的瀏覽器：Netcape6及以上版本放仗、FireFox、MozillaSuite/SeaMonkey撬碟；
使用Presto內(nèi)核的瀏覽器：Opera7及以上版本诞挨；
使用Webkit內(nèi)核的瀏覽器：Safari、Chrome呢蛤。
6惶傻、常見的瀏覽器內(nèi)核有哪些？
(Q1) 瀏覽器** ：IE其障，Chrome达罗，F(xiàn)ireFox，Safari，Opera
(Q2)** 內(nèi)核** ：Trident粮揉，Gecko，Presto抚笔，Webkit
7扶认、html5有哪些新特性、移除了那些元素殊橙？如何處理HTML5新標簽的瀏覽器兼容問題辐宾？如何區(qū)分 HTML 和 HTML5？
- HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集膨蛮，主要是關于圖像叠纹，位置，存儲敞葛，多任務等功能的增加誉察。*
拖拽釋放(Drag and drop) API 語義化更好的內(nèi)容標簽（header,nav,footer,aside,article,section） 音頻、視頻API(audio,video) 畫布(Canvas) API 地理(Geolocation) API 本地離線存儲 localStorage 長期存儲數(shù)據(jù)惹谐，瀏覽器關閉后數(shù)據(jù)不丟失持偏； sessionStorage 的數(shù)據(jù)在瀏覽器關閉后自動刪除 表單控件，calendar氨肌、date鸿秆、time、email怎囚、url卿叽、search 新的技術webworker, websocket, Geolocation - 移除的元素純表現(xiàn)的元素：basefont，big恳守，center考婴，font, s，strike井誉，tt蕉扮，u；對可用性產(chǎn)生負面影響的元素：frame颗圣，frameset喳钟，noframes；支持HTML5新標簽：
- IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標簽在岂， 可以利用這一特性讓這些瀏覽器支持HTML5新標簽奔则， 瀏覽器支持新標簽后，還需要添加標簽默認的樣式：
- 當然最好的方式是直接使用成熟的框架蔽午、使用最多的是html5shim框架 如何區(qū)分： DOCTYPE聲明\新增的結構元素\功能元素
8易茬、簡述一下你對HTML語義化的理解？
1、什么是HTML語義化抽莱？
<基本上都是圍繞著幾個主要的標簽范抓，像標題（H1~H6）、列表（li）食铐、強調(diào)（strong em）等等>
根據(jù)內(nèi)容的結構化（內(nèi)容語義化）匕垫，選擇合適的標簽（代碼語義化）便于開發(fā)者閱讀和寫出更優(yōu)雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
2虐呻、為什么要語義化象泵？
為了在沒有CSS的情況下，頁面也能呈現(xiàn)出很好地內(nèi)容結構斟叼、代碼結構:為了裸奔時好看偶惠；
用戶體驗：例如title、alt用于解釋名詞或解釋圖片信息朗涩、label標簽的活用忽孽；
有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標簽來確定上下文和各個關鍵字的權重馋缅；
方便其他設備解析（如屏幕閱讀器扒腕、盲人閱讀器、移動設備）以意義的方式來渲染網(wǎng)頁萤悴；
便于團隊開發(fā)和維護瘾腰，語義化更具可讀性，是下一步吧網(wǎng)頁的重要動向覆履，遵循W3C標準的團隊都遵循這個標準蹋盆，可以減少差異化。
3硝全、寫HTML代碼時應注意什么栖雾？
盡可能少的使用無語義的標簽div和span；
在語義不明顯時伟众，既可以使用div或者p時析藕，盡量用p, 因為p在默認情況下有上下間距，對兼容特殊終端有利凳厢；
不要使用純樣式標簽账胧，如：b、font先紫、u等治泥，改用css設置。
需要強調(diào)的文本遮精，可以包含在strong或者em標簽中（瀏覽器預設樣式居夹，能用CSS指定就不用他們），strong默認樣式是加粗（不要用b），em是斜體（不用i）准脂；
使用表格時劫扒，標題要用caption，表頭用thead意狠，主體部分用tbody包圍粟关，尾部用tfoot包圍。表頭和一般單元格要區(qū)分開环戈，表頭用th，單元格用td澎灸；
表單域要用fieldset標簽包起來院塞，并用legend標簽說明表單的用途；
每個input標簽對應的說明文本都需要使用label標簽性昭，并且通過為input設置id屬性拦止，在lable標簽中設置for=someld來讓說明文本和相對應的input關聯(lián)起來。
** 4糜颠、HTML5新增了哪些語義標簽汹族，詳述之。**
見這位前端大拿的blog其兴。
9顶瞒、HTML5的離線儲存怎么使用，工作原理能不能解釋一下元旬？
http://www.ibm.com/developerworks/cn/web/wa-offlinehtml/
10榴徐、瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
http://www.codeceo.com/article/html5-cache.html
11匀归、請描述一下 cookies坑资，sessionStorage 和 localStorage 的區(qū)別？
共同點：都是保存在瀏覽器端穆端，且同源的袱贮。區(qū)別：cookie數(shù)據(jù)始終在同源的中攜帶（即使不需要），即cookie在瀏覽器和服務器間來回傳遞体啰。而sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務器攒巍，僅在本地保存。cookie數(shù)據(jù)還有路徑（path）的概念狡赐，可以限制cookie只屬于某個路徑下窑业。存儲大小限制也不同，cookie數(shù)據(jù)不能超過4k枕屉，同時因為每次都會攜帶cookie常柄，所以cookie只適合保存很小的數(shù)據(jù)，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制西潘，但比cookie大得多卷玉，可以達到5M或更大。數(shù)據(jù)有效期不同喷市，sessionStorage：僅在當前瀏覽器窗口關閉前有效相种，自然也就不可能持久保持；localStorage：始終有效品姓，窗口或瀏覽器關閉也一直保存寝并，因此用作持久數(shù)據(jù)；cookie只在設置的cookie過期時間之前一直有效腹备，即使窗口或瀏覽器關閉衬潦。作用域不同，sessionStorage不在不同的瀏覽器窗口中共享植酥，即使是同一個頁面镀岛；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的友驮。Web Storage 支持事件通知機制漂羊，可以將數(shù)據(jù)更新的通知發(fā)送給監(jiān)聽者。Web Storage 的 api 接口使用更方便卸留。
12走越、iframe有那些缺點？
框架的優(yōu)點
重載頁面時不需要重載整個頁面艾猜，只需要重載頁面中的一個框架頁(減少了數(shù)據(jù)的傳輸买喧，增加了網(wǎng)頁下載速度)
方便制作導航欄
框架的缺點
會產(chǎn)生很多頁面，不容易管理
不容易打印
瀏覽器的后退按鈕無效
代碼復雜,無法被一些搜索引擎索引到
多數(shù)小型的移動設備（PDA 手機）無法完全顯示框架
多框架的頁面會增加服務器的http請求
由于上面諸多缺點匆赃，因此不符合標準網(wǎng)頁設計的理念,已經(jīng)被標準網(wǎng)頁設計拋棄
提示: 目前框架的所有優(yōu)點完全可以使用Ajax實現(xiàn)淤毛，因此已經(jīng)沒有必要使用框架了。
1.<span class="hljs-tag"><<span class="hljs-title">iframe</span>></span>優(yōu)點：
解決加載緩慢的第三方內(nèi)容如圖標和廣告等的加載問題
Security sandbox
并行加載腳本
2.<span class="hljs-tag"><<span class="hljs-title">iframe</span>></span>的缺點：
*iframe會阻塞主頁面的Onload事件
*即時內(nèi)容為空算柳，加載也需要時間
*沒有語意
13低淡、Label的作用是什么？是怎么用的瞬项？（加 for 或 包裹）
Label 中有兩個屬性是非常有用的,一個是FOR蔗蹋、另外一個就是ACCESSKEY了。 FOR屬性 功能：表示Label標簽要綁定的HTML元素囱淋，你點擊這個標簽的時候猪杭，所綁定的元素將獲取焦點。 用法：<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text"> ACCESSKEY屬性： 功能：表示訪問Label標簽所綁定的元素的熱鍵妥衣，當您按下熱鍵皂吮，所綁定的元素將獲取焦點戒傻。 用法：<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">局限性：accessKey屬性所設置的快捷鍵不能與瀏覽器的快捷鍵沖突，否則將優(yōu)先激活瀏覽器的快捷鍵蜂筹。 注釋 要將 LABEL 綁定到其它的控件需纳，請將 LABEL 元素的 FOR 屬性設置為與該控件的 ID 相同。將 LABEL 綁定到控件的 NAME 屬性毫無用處艺挪。但是不翩，要提交表單，你必須為 LABEL 元素所綁定到的控件指定 NAME麻裳。 有兩種方法給所指定的快捷鍵添加下劃線口蝠。LABEL 元素的 rich text 支持可以在 ACCESSKEY 屬性所指定的快捷鍵字符兩側加上 U 元素。如果你更愿意使用樣式表(CSS)來應用樣式津坑，可以將該字符包含在 SPAN 中亚皂，并設置樣式為“text-decoration: underline”。 如果用戶單擊 LABEL国瓮，則會先觸發(fā) LABEL 上的 onclick 事件，然后觸發(fā)由 htmlFor 屬性所指定的控件上的 onclick 事件狞谱。按下 LABEL 設定的快捷鍵將設置焦點但并不觸發(fā) onclick 事件乃摹。 標簽不允許嵌套。
