HTML * Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義? 1.<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範 2. 所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則 ...
HTML * Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義? 1.<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範 2. 所謂的標準模式是指，瀏覽器按 W3C 標準解析執行代碼；怪異模式則是使用瀏覽器自己的方式解析執行代碼，因為不同瀏覽器解析執行的方式不一樣，所以我們稱之為怪異模式。 3. 瀏覽器解析時到底使用標準模式還是怪異模式，與你網頁中的 DTD 聲明直接相關， DTD 聲明定義了標準文檔的類型（標準模式解析）文檔類型，會使瀏覽器使用相應的方式載入網頁並顯示，忽略 DTD 聲明 , 將使網頁進入怪異模式。 * HTML5 為什麼只需要寫 <!DOCTYPE HTML>？ doctype是document type（文檔類型）的簡寫，在頁面中，用來指定頁面所使用的xhtml（或者html）的版本。要想製作符合標準的頁面，一個必不可少的關鍵組成部分就 是doctype聲明。只有確定了一個正確的doctype，xhtml里的標識和css才能正常生效。html 告訴瀏覽器這個文件是html格式網頁文件. 兩個合起來就是 html5標準網頁聲明,原先的是一串很長的字元串,現在是這個簡潔形式,支持html5標準的主流瀏覽器都認識這個聲明。 * 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？ 行內元素有：a b span img input select strong（強調的語氣） 塊級元素有：div ul ol li dl dt dd h1-h6 p 知名的空元素：<br> <hr> <img> <input> <link> <meta> 鮮為人知的是：<area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 常見塊元素(block element) address - 地址 blockquote - 塊引用 center - 居中對齊塊 dir - 目錄列表 div - 常用塊級容器，也是css layout的主要標簽 dl - 定義列表 fieldset - form控制組 form - 交互表單 h1 - 大標題 h2 - 副標題 h3 - 3級標題 h4 - 4級標題 h5 - 5級標題 h6 - 6級標題 hr - 水平分隔線 isindex - input prompt menu - 菜單列表 noframes - frames可選內容，（對於不支持frame的瀏覽器顯示此區塊內容） noscript - 可選腳本內容（對於不支持script的瀏覽器顯示此內容） ol - 排序表單 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表（無序列表） 常見行內元素(inline element) a - 錨點 abbr - 縮寫 acronym - 首字 b - 粗體(不推薦) bdo - bidi override big - 大字體 br - 換行 cite - 引用 code - 電腦代碼(在引用源碼的時候需要) dfn - 定義欄位 em - 強調 font - 字體設定(不推薦) i - 斜體 img - 圖片 input - 輸入框 kbd - 定義鍵盤文本 label - 表格標簽 q - 短引用 s - 中劃線(不推薦) samp - 定義範例電腦代碼 select - 項目選擇 small - 小字體文本 span - 常用內聯容器，定義文本內區塊 strike - 中劃線 strong - 粗體強調 sub - 下標 sup - 上標 textarea - 多行文本輸入框 tt - 電傳文本 u - 下劃線 var - 定義變數 可變元素 可變元素由上下文語境來決定是塊元素還是內聯元素[1] 。 applet - java applet button - 按鈕 del - 刪除文本 iframe - inline frame ins - 插入的文本 map - 圖片區塊（map） object - object對象 script - 客戶端腳本 空元素 由於HTML元素的內容是開始標簽與結束標簽之間的內容。而某些 HTML 元素具有空內容。（empty content），那些含有空內容的HTML元素，就是空元素。空元素[2] 是在開始標簽中關閉的。 例子 <br> 就是沒有關閉標簽的空元素。 * 頁面導入樣式時，使用link和@import有什麼區別？ （1）link屬於XHTML標簽，除了載入CSS外，還能用於定義RSS, 定義rel連接屬性等作用；而@import是CSS提供的，只能用於載入CSS; （2）頁面被載入的時，link會同時被載入，而@import引用的CSS會等到頁面被載入完再載入; （3）import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標簽，無相容問題; （4 ）：使用dom控制樣式時的差別。當使用javascript控制dom去改變樣式的時候，只能使用link標簽，因為@import不是dom可以控制的。 （5）：@import可以在css中再次引入其他樣式表，比如可以創建一個主樣式表，在主樣式表中再引入其他的樣式表. * 介紹一下你對瀏覽器內核的理解？ 主要分成兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。 渲染引擎：負責取得網頁的內容(HTML、XML、圖像等等)、整理訊息(例如加入CSS等)，以及計算網頁的顯示方式，然後會輸出至顯示器或列印 機。瀏覽器的內核的不同對於網頁的語法解釋會有不同，所以渲染的效果也不相同。所有網頁瀏覽器、電子郵件客戶端以及其它需要編輯、顯示網路內容的應用程式都需要內核。 JS引擎則：解析和執行javascript來實現網頁的動態效果。 最開始渲染引擎和JS引擎並沒有區分的很明確，後來JS引擎越來越獨立，內核就傾向於只指渲染引擎。 * 常見的瀏覽器內核有哪些？ 常見的有四大內核: Trident： IE瀏覽器使用的內核，該內核程式在1997年的IE4中首次被採用，是微軟在Mosaic代碼的基礎之上修改而來的，並沿用到目前的IE9。Trident實際上是一款開放的內核，其介面內核設計的相當成熟，因此才有許多採用IE內核而非IE的瀏覽器涌現（如 Maxthon、The World 、TT、GreenBrowser、AvantBrowser等）。 Gecko： Netscape6開始採用的內核，後來的Mozilla FireFox (火狐瀏覽器) 也採用了該內核，Gecko的特點是代碼完全公開，因此，其可開發程度很高，全世界的程式員都可以為其編寫代碼，增加功能。Gecko引擎的由來跟IE不無關係，前面說過IE沒有使用W3C的標準，這導致了微軟內部一些開發人員的不滿；他們與當時已經停止更新了的 Netscape的一些員工一起創辦了Mozilla，以當時的Mosaic內核為基礎重新編寫內核，於是開發出了Geckos。不過事實上，Gecko 內核的瀏覽器仍然還是Firefox (火狐) 用戶最多，所以有時也會被稱為Firefox內核。此外Gecko也是一個跨平臺內核，可以在Windows、 BSD、Linux和Mac OS X中使用。 Presto： 目前Opera採用的內核，該內核在2003年的Opera7中首次被使用，該款引擎的特點就是渲染速度的優化達到了極致，也是目前公認網頁瀏覽速度最快的瀏覽器內核，然而代價是犧牲了網頁的相容性。實際上這是一個動態內核，與前面幾個內核的最大的區別就在腳本處理上，Presto有著天生的優勢，頁面的全部或者部分都能夠在回應腳本事件時等情況下被重新解析。此外該內核在執行Javascrīpt的時候有著最快的速度，根據在同等條件下的測試，Presto內核執行同等Javascrīpt所需的時間僅有Trident和Gecko內核的約1/3（Trident內核最慢，不過兩者相差沒有多大）。只可惜Presto是商業引擎，這很大程度上限制了Presto的發展。 Webkit：蘋果公司自己的內核，也是蘋果的Safari瀏覽器使用的內核。 Webkit引擎包含WebCore排版引擎及JavaScriptCore解析引擎，均是從KDE的KHTML及KJS引擎衍生而來，它們都是自由軟體，在GPL條約下授權，同時支持BSD系統的開發。所以Webkit也是自由軟體，同時開放源代碼。在安全方面不受IE、Firefox的制約，所以Safari瀏覽器在國內還是很安全的。google的chrome也使用webkit作為內核。WebKit 內核在手機上的應用也十分廣泛，例如 Google 的手機 Gphone、 Apple 的 iPhone， 等所使用的 Browser 內核引擎，都是基於 WebKit。win 10 的IE edge也是....... * html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器相容問題？如何區分 HTML 和 HTML5？ HTML5 現在已經不是 SGML 的子集，主要是關於圖像，位置，存儲，多任務等功能的增加。 繪畫 canvas; 用於媒介回放的 video 和 audio 元素; 本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉後數據不丟失; sessionStorage 的數據在瀏覽器關閉後自動刪除; 語意化更好的內容元素，比如 article、footer、header、nav、section; 表單控制項，calendar、date、time、email、url、search; 新的技術webworker, websocket, Geolocation; 移除的元素： 純表現的元素：basefont，big，center，font, s，strike，tt，u; 對可用性產生負面影響的元素：frame，frameset，noframes； --相容:1.IE8/IE7/IE6支持通過document.createElement方法產生的標簽，利用這一特性讓這些瀏覽器支持HTML5新標簽。2.使用是html5shim框架 --區分:DOCTYPE聲明的方式是區分HTML和HTML5標誌的一個重要因素，此外，還可以根據新增的結構、功能元素來加以區分。 * 簡述一下你對HTML語義化的理解？ 語義化的HTML就是寫出的HTML代碼，符合內容的結構化（內容語義化），選擇合適的標簽（代碼語義化），能夠便於開發者閱讀和寫出更優雅的代碼的同時讓瀏覽器的爬蟲和機器很好地解析。
1.語義化有利於SEO，有利於搜索引擎爬蟲更好的理解我們的網頁，從而獲取更多的有效信息，提升網頁的權重。
2.在沒有CSS的時候能夠清晰的看出網頁的結構，增強可讀性。
3.便於團隊開發和維護，語義化的HTML可以讓開發者更容易的看明白，從而提高團隊的效率和協調能力。 4.支持多終端設備的瀏覽器渲染。 * HTML5的離線儲存怎麼使用，工作原理能不能解釋一下？ HTML5的一個重要特性就是離線存儲，所謂的離線存儲就是將一些資源文件保存在本地，這樣後續的頁面重新載入將使用本地資源文件，在離線情況下可以繼續訪問web應用，同時通過一定的手法(更新相關文件或者使用相關API)，可以更新、刪除離線存儲等操作; 如何使用：上面提到的HTML5的離線存儲是基於一個新建的.appcache文件的，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲了下來。之後當網路在處於離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。 （1）頁面頭部像下麵一樣加入一個manifest的屬性； （2）在cache.manifest文件的編寫離線存儲的資源； CACHEMANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: //offline.html （3）在離線狀態時，操作window.applicationCache進行需求實現。
* 瀏覽器是怎麼對HTML5的離線儲存資源進行管理和載入的呢？
線上的情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源並且進行離線存儲。如果已經訪問過app並且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源載入頁面，然後瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那麼就會重新下載文件中的資源併進行離線存儲。 離線的情況下，瀏覽器就直接使用離線存儲的資源。 * 請描述一下 cookies，sessionStorage 和 localStorage 的區別？ 共同點：都是保存在瀏覽器端，且同源的。 區別：cookie數據始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把數據發給伺服器，僅在本地保存。cookie數據還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。存儲大小限制也不同，cookie數據不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合保存很小的數據，如會話標識。sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大。數據有效期不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直保存，因此用作持久數據；cookie只在設置的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。作用域不同，sessionStorage不在不同的瀏覽器視窗中共用，即使是同一個頁面；localStorage 在所有同源視窗中都是共用的；cookie也是在所有同源視窗中都是共用的。Web Storage 支持事件通知機制，可以將數據更新的通知發送給監聽者。Web Storage 的 api 介面使用更方便。 * iframe有那些優缺點？ iframe的優點：1.iframe能夠原封不動的把嵌入的網頁展現出來。
2.如果有多個網頁引用iframe，那麼你只需要修改iframe的內容，就可以實現調用的每一個頁面內容的更改，方便快捷。
3.網頁如果為了統一風格，頭部和版本都是一樣的，就可以寫成一個頁面，用iframe來嵌套，可以增加代碼的可重用。
4.如果遇到載入緩慢的第三方內容如圖標和廣告，這些問題可以由iframe來解決。
iframe的缺點：
1.會產生很多頁面，不容易管理。
2.iframe框架結構有時會讓人感到迷惑，如果框架個數多的話，可能會出現上下、左右滾動條，會分散訪問者的註意力，用戶體驗度差。
3.代碼複雜，無法被一些搜索引擎索引到，這一點很關鍵，現在的搜索引擎爬蟲還不能很好的處理iframe中的內容，所以使用iframe會不利於搜索引擎優化。
4.很多的移動設備（PDA 手機）無法完全顯示框架，設備相容性差。
5.iframe框架頁面會增加伺服器的http請求，對於大型網站是不可取的。 分析了這麼多，現在基本上都是用Ajax來代替iframe，所以iframe已經漸漸的退出了前端開發。 * Label的作用是什麼？是怎麼用的？（加 for 或 包裹） label 標簽為 input 元素定義標註（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控制項。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控制項上。
Label 中有兩個屬性是非常有用的,一個是FOR、另外一個就是ACCESSKEY了。
FOR屬性 :
功能：表示Label標簽要綁定的HTML元素，你點擊這個標簽的時候，所綁定的元素將獲取焦點。
ACCESSKEY屬性： 功能：表示訪問Label標簽所綁定的元素的熱鍵，當您按下熱鍵，所綁定的元素將獲取焦點。 * HTML5的form如何關閉自動完成功能？ autocomplete 屬性規定表單是否應該啟用自動完成功能。
自動完成允許瀏覽器預測對欄位的輸入。當用戶在欄位開始鍵入時，瀏覽器基於之前鍵入過的值，應該顯示出在欄位中填寫的選項。
<form autocomplete="on/off">on 預設。規定啟用自動完成功能。 off 規定禁用自動完成功能。 * 如何實現瀏覽器內多個標簽頁之間的通信? (阿裡) 即將到來的 SharedWorker API 能夠在 iframe 甚至瀏覽器標簽或視窗中傳輸數據。它在幾年前就已在 Chrome 中得以實現，不久前也在 Firefox 上實現了，不過它在 IE 和 Safari 中仍然難覓蹤影。
(需要對以下應用情景找到一個優雅的解決方案：假設有個人訪問了你的網站。他依次登錄，打開第二個標簽頁併在那個標簽頁里選擇了註銷。這時，他所打開的第一個標簽頁看起來仍然保留著「已登錄」的狀態，但這時他的所有操作要麼會重定向到登錄頁面，要麼會直接讓他抓狂。更吸引人的解決方式則是判斷用戶是否已註銷，並對頁面做相應的改變。譬如可以顯示一個對話框來提示用戶需要重新驗證，或者顯示原本的登錄視圖。)
這個功能可以通過 WebSocket API 來實現，不過這就有些小題大做了。畢竟殺雞焉用牛刀，於是我開始尋找一些其它的跨標簽頁通信方式。我首先想到的就是使用 cookies ，來周期性地通過 setInterval 檢查用戶是否登錄。對這個方案我並不滿意，因為這樣會把許多 CPU 周期耗費在檢查一個可能自始至終都不會滿足的條件上。這時候我就覺得還不如就直接用 “comet”（又名輪詢）、伺服器端事件或者 WebSockets 算了呢。
當我發現自己是在騎驢找驢的時候還是很吃驚，因為答案就是一直以來的 localStorage！ 你知道 localStorage 會觸發一個事件嗎？具體地說，不論其中的哪一項在另一個瀏覽上下文里被添加、修改或刪除時，它都會觸發一個事件。實際上，這就意味著不論在哪個瀏覽器的標簽頁里訪問了 localStorage，所有其它的標簽頁都能通過 window 對象監聽到這個事件.不論某個標簽頁在何時修改了 localStorage，都會對其餘的所有標簽觸發事件。這就意味著我們只要為 localStorage 賦值，就能夠跨瀏覽器標簽通信了。 * webSocket如何相容低瀏覽器？(阿裡) (WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通信(full-duplex)。在瀏覽器中通過http僅能實現單向的通信,comet可以一定程度上模擬雙向通信,但效率較低,並需要伺服器有較好的支持; flash中的socket和xmlsocket可以實現真正的雙向通信,通過 flex ajax bridge,可以在javascript中使用這兩項功能. 可以預見,如果websocket一旦在瀏覽器中得到實現,將會替代上面兩項技術,得到廣泛的使用.)
WebSocket是目前"唯一"的一個瀏覽器下的Socket的標準, 它是通過瀏覽器內部提供的API來實現訪問的. 低版本的瀏覽器沒有WebSocket這個標準, 就意味這些瀏覽器不允許用戶通過它們來實現Socket通訊. 解決相容性的辦法就是準備一套Ajax + Server-side Script的後備方案. 比如Ajax + PHP Socket.
其他方案:Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基於 multipart 編碼 發送 XHR 、基於長輪詢的 XHR. * 頁面可見性（Page Visibility）API 可以有哪些用途？ 通過visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等; 在頁面被切換到其他後臺進程的時候，自動暫停音樂或視頻的播放； * 如何在頁面上實現一個圓形的可點擊區域？ （1）map+area或者svg （2）border-radius （3）純js實現需要求一個點在不在圓上簡單演算法、獲取滑鼠坐標等等 * 實現不使用 border 畫出1px高的線，在不同瀏覽器的Quirksmode和CSSCompat模式下都能保持同一效果。 <divstyle="height:1px;overflow:hidden;background:red"></div> * 網頁驗證碼是幹嘛的，是為瞭解決什麼安全問題？ 防止惡意註冊和暴力破解 所謂惡意註冊和暴力破解都是用軟體進行的。 人工註冊再快，也需要一項一項輸入資料，速度很慢，對伺服器基本沒有影響。如果沒有驗證碼可以使用軟體註冊的話，可以同時運行成千上萬個線程，一次能註冊成千上萬個用戶，讓伺服器的資料庫很快變得臃腫不堪，運行效率下降。 如果一個無聊的人或競爭對手對某網站懷有敵意，那麼這種方法很容易就能讓對方癱瘓。 * tite與h1的區別、b與strong的區別、i與em的區別？ tilte與h1的區別 從搜索引擎角度來說，title標簽是用來描述這個頁面的主題的，是一個網頁權重的最高點。但title標簽並不出現在文章的正文中。而h1標簽一般出現在文章的正文中，是展示給訪問者的文章的標題。所以說這兩個標簽不僅不衝突的，而是合作的關係。一篇文章既要有title又要有h1標簽，既突出了文章的主題，又突出了標題和關鍵字，達到雙重優化網站的效果。一般會把title和h1標簽的內容寫成一樣，而且一般情況下一篇文章最好只用一個h1標簽，過多的h1標簽反而會讓搜索引擎迷糊，認不清文章的主題。 b與strong的區別、i與em的區別 其實這兩對標簽最大區別就是一個給搜索引擎看的，一個是給用戶看的。就用b和strong標簽做例子吧。 b標簽和strong標簽給我們的主觀感受都是加粗，但對搜索引擎來說b標簽和普通的文字並沒有什麼區別，而strong標簽卻是起強調作用的。也就是說如果你想讓搜索引擎認為你的某句話很重要時那就用strong標簽。如果只是想讓用戶看到加粗的效果，那就用b標簽。同理如em標簽也是針對搜索引擎來起作用的，i標簽只是讓用戶看到展示的是斜體。
