又到了年初換工作的高峰期，這里總結(jié)一下在網(wǎng)上發(fā)現(xiàn)的前端面試題，做個記錄，第一部分先寫HTML5相關(guān)，以后陸續(xù)添加~
HTML
Doctype作用？
<!DOCTYPE>聲明位于位于HTML文檔中的第一行，處于 <html> 標(biāo)簽之前。告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
HTML5的Doctype是<!DOCTYPE html>，現(xiàn)在的瀏覽器都支持這個寫法，不需要再像HTML4一樣區(qū)分三種Doctype（嚴(yán)格、松散、框架）了。因?yàn)镠TML4基于SGML,所以需要對DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的文檔類型，而HTML5 不基于 SGML，因此不需要引用DTD，但是需要doctype來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）。常見的行內(nèi)元素有哪些，塊級元素有哪些，空(void)元素有那些，行內(nèi)元素和塊級元素的區(qū)別是什么？
行內(nèi)元素：a b i span img input select strong（強(qiáng)調(diào)的語氣）textarea等
塊級元素：div ul ol li dl dt dd h1 h2 h3 h4…p section table等
空元素：<br> <hr> <img> <input> <link> <meta>等
行內(nèi)元素和塊級元素的區(qū)別：
行內(nèi)元素----css的display屬性是inline，不會獨(dú)占一行，相鄰行內(nèi)元素會排列在同一行里，直到一行排不下，才會換行，其寬度隨元素的內(nèi)容而變化，設(shè)置高度和寬度的話會不起作用，水平方向的padding-left、padding-right、margin-left、margin-right都產(chǎn)生邊距效果，但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產(chǎn)生邊距效果。
塊級元素----css的display屬性是block，會獨(dú)占一行。默認(rèn)情況下，其寬度自動填滿其父元素寬度，寬高可以設(shè)置，但設(shè)置了寬度還是獨(dú)占一行。
注：
修改display為block，可以把行內(nèi)元素變成塊級元素，修改display為inline，可以把塊級元素變成行內(nèi)元素。
display為inline-block時，可以使行內(nèi)元素保持在一行內(nèi)，但具有塊級元素的特點(diǎn)。css引入的方式？頁面導(dǎo)入樣式時，使用link和@import有什么區(qū)別？
css有三種引入方式：在頁面上用<link>標(biāo)簽引用文件，頁面上在<style>標(biāo)簽里寫css樣式，在標(biāo)簽的style屬性里寫樣式，對于代碼管理的考慮，第一種是比較好的。
link和@import的區(qū)別：
(1)link寫在html頁面中，只能存在于 head 部分，而@import寫在CSS文件中。
(2)link屬于XHTML標(biāo)簽，除了加載CSS外，還能用于定義RSS, 定義rel連接屬性等作用，而@import是CSS提供的，只能用于加載CSS;
(3)一般情況下，開發(fā)時把css樣式文件的引用放在頁面頂部，link會按照順序加載，而@import引用的CSS會等到頁面被加載完再加載;
(4)import是CSS2.1 提出的，只在IE5以上才能被識別，而link是XHTML標(biāo)簽，無兼容問題;
注：
在html頁面中，link標(biāo)簽引用css文件，script標(biāo)簽引用js文件，對于新的HTML5規(guī)范，由于現(xiàn)代瀏覽器默認(rèn)的script標(biāo)簽里是js代碼，script的type屬性默認(rèn)是text/javascript，因此如果一個script標(biāo)簽里是js代碼或引用的是js文件，那么標(biāo)簽里不需要寫type=text/javascript，但是如果不是js那就需要添加type。type這個東西是表示標(biāo)簽中腳本的類型的。html5有哪些新特性？
新特性：
繪畫 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, websockt, Geolocation
注：
html5還有其他的一些改變，比如增加和刪除了一些元素，還改變了對某些元素的屬性的支持，這些在html5手冊中可以很方便的查到。HTML5的應(yīng)用程序緩存、客戶端存儲數(shù)據(jù)？
（1）應(yīng)用程序緩存：
通過創(chuàng)建 cache manifest 文件，可以輕松地創(chuàng)建 web 應(yīng)用的離線版本。所有主流瀏覽器均支持應(yīng)用程序緩存，除了 Internet Explorer。
（2）客戶端存儲數(shù)據(jù)：
HTML5 提供了兩種在客戶端存儲數(shù)據(jù)的新方法：localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失； sessionStorage 數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除。
之前，這些都是由 cookie 完成的。但是 cookie 不適合大量數(shù)據(jù)的存儲，因?yàn)樗鼈冇擅總€對服務(wù)器的請求來傳遞，這使得 cookie 速度很慢而且效率也不高。在 HTML5 中，數(shù)據(jù)不是由每個服務(wù)器請求傳遞的，而是只有在請求時使用數(shù)據(jù)它使在不影響網(wǎng)站性能的情況下存儲大量數(shù)據(jù)成為可能。對于不同的網(wǎng)站，數(shù)據(jù)存儲于不同的區(qū)域，并且一個網(wǎng)站只能訪問其自身的數(shù)據(jù)。HTML5 使用 JavaScript 來存儲和訪問數(shù)據(jù)。
注：
（1）cookies，sessionStorage 和 localStorage 的區(qū)別：
cookie在瀏覽器和服務(wù)器間來回傳遞。 sessionStorage和localStorage不會 sessionStorage和localStorage的存儲空間更大； sessionStorage和localStorage有更多豐富易用的接口； sessionStorage和localStorage各自獨(dú)立的存儲空間
（2）客戶端存儲的一些使用場景：
localStorage 、cookies等本地存儲方式實(shí)現(xiàn)瀏覽器內(nèi)多個標(biāo)簽頁之間的通信，不論在哪個瀏覽器的標(biāo)簽頁里訪問了 localStorage，所有其它的標(biāo)簽頁都能通過 window對象監(jiān)聽到這個事件。不過在某些情況下，譬如無痕模式下的 Safari在設(shè)置值時會拋出 QuotaExceededError 的異常iframe的缺點(diǎn)
iframe會阻塞主頁面的Onload事件；iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。使用iframe之前需要考慮這兩個缺點(diǎn)。如果需要使用iframe，最好是通過javascript動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。
