前端面試題及其總結

HTML部分

一、Doctype做用？標準模式與兼容模式有什麼區別？

• 聲明位於HTML文檔的第一行，處於標籤以前。用來告知瀏覽器的解析器用什麼文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會致使文檔以兼容模式呈現
• 標準模式：排版和js運做方式都是以該瀏覽器支持的最高標準運行。
• 兼容模式：頁面以寬鬆的向後兼容的方式顯示，模擬老式瀏覽器的行爲以防止站點沒法運行。
• 例子：一、width不一樣 在嚴格模式中，width是內容寬度(content)，可是在兼容模式中，width是(元素的實際寬度),(怪異盒模型是margin以外是width的範圍)

二、html5爲何只須要寫<!DOCTYPE>

HTML5不基於SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲

因此，html5只有一種：<!DOCTYPE> 可是html4.01有三種，分別是strict（不包含展現性和棄用元素，不容許框架集）、transitional（包含展現性和棄用元素，不容許框架集）、frameset（容許框架集）

三、行內元素有哪些？塊級元素有哪些？空（void）元素有哪些？

常見的行內元素有：a，b，span，img（我曾覺得是block），input，strong，select

常見的塊級元素有：div、ul（無序）、ol（有序）、li、p等

常見的空元素：<br><hr><link><script>

空元素定義：html元素的內容就是其兩個標籤之間的content，因此，標籤之間沒有內容的就是空元素

四、頁面導入樣式時，使用link和@import有什麼區別

寫法上：

<link rel="stylesheet" href="路徑" />

<style type="text/css">
    @import '路徑'
</style>
複製代碼

本質上：link屬於XHTML標籤，除了加載css以外，還能定義RSS，定義rel鏈接屬性等做用。而@import是css提供的，只能用於加載css

解析上：link是跟着頁面加載同時加載的，可是@import會等到頁面加載完再加載

兼容上：@import IE5以上才能識別，無限制

五、介紹一下你對瀏覽器內核的理解？

主要分爲兩部分：

• 渲染引擎
• JS引擎

渲染引擎：取得網頁的內容（html、xml、圖片）、構造cssom樹、計算網頁的顯示方式，好比各元素寬高，而後輸出至顯示器或打印機。

js引擎：解析和執行javascript來實現網頁的動態效果

六、常見的瀏覽器內核有哪些（背記）？

• Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
• Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
• Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
• Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

*Blink是Chrome使用的，webkit的簡化版本，可是效率等都較以前有了提高

詳細文章：瀏覽器內核的解析和對比

七、html5有哪些新特性、移除了那些元素？如何處理HTML5新標籤的瀏覽器兼容問題？如何區分 HTML 和 HTML5？

實現上：h5再也不是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；
複製代碼

處理兼容性： IE8/IE7/IE6支持經過document.createElement方法產生的標籤，能夠利用這一特性讓這些瀏覽器支持HTML5新標籤，瀏覽器支持新標籤後，還須要添加標籤默認的樣式。

也可使用html5shim，可讓IE9或更低版本能支持html5

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
複製代碼

如何區分HTML5： DOCTYPE聲明\新增的結構元素\功能元素

八、對html語義化的理解（瞭解）

• 用正確的標籤作正確的事情。
• html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
• html語義化讓頁面的內容結構化，結構更清晰，便於對瀏覽器、搜索引擎解析;
• 搜索引擎的爬蟲也依賴於HTML標記來肯定上下文和各個關鍵字的權重，利於SEO;
• 使閱讀源代碼的人對網站更容易將網站分塊，便於閱讀維護理解。

九、HTML5的離線儲存怎麼使用，工做原理能不能解釋一下？

在用戶沒有與因特網鏈接時，能夠正常訪問站點或應用，在用戶與因特網鏈接時，更新用戶機器上的緩存文件。 原理：HTML5的離線存儲是基於一個新建的.appcache文件的緩存機制(不是存儲技術)，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。

如何使用：

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

二、在cache.manifest文件的編寫離線存儲的資源； CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html

三、在離線狀態時，操做window.applicationCache進行需求實現。

十、瀏覽器是怎麼對HTML5的離線儲存資源進行管理和加載的呢？（這個比上面重要）

在線的狀況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，若是是第一次訪問app，那麼瀏覽器就會根據manifest文件的內容下載相應的資源而且進行離線存儲。若是已經訪問過app而且資源已經離線存儲了，那麼瀏覽器就會使用離線的資源加載頁面，而後瀏覽器會對比新的manifest文件與舊的manifest文件，若是文件沒有發生改變，就不作任何操做，若是文件改變了，那麼就會從新下載文件中的資源並進行離線存儲。

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

十一、請描述一下 cookies，sessionStorage 和 localStorage 的區別？

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

• cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞。
• sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

存儲大小：

• cookie數據大小不能超過4k。
• sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：

• localStorage 存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；
• sessionStorage 數據在當前瀏覽器窗口關閉後自動刪除。
• cookie 設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉

十二、iframe有那些缺點？

• iframe會阻塞主頁面的Onload事件；
• 搜索引擎的檢索程序沒法解讀這種頁面，不利於SEO;
• iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
• 使用iframe以前須要考慮這兩個缺點。若是須要使用iframe，最好是經過javascript
• 動態給iframe添加src屬性值，這樣能夠繞開以上兩個問題。

1三、Label的做用是什麼？是怎麼用的？

用來關聯某個標籤，能夠是表單標籤，也能夠是button，這樣就能夠直接點擊label的範圍來觸發綁定標籤的事件

用法：

1四、HTML5的form如何關閉自動完成功能？

自動完成：當你給輸入框輸入內容時，瀏覽器會從以前同名輸入框的歷史記錄中查找出相似的內容並列在輸入框下面。

給form或者該input設置autocomplete=off。

通過實驗，提交以後，歷史記錄纔會存儲，固然，必須是name相同的input纔會共享歷史記錄

1五、如何實現瀏覽器內多個標籤頁以前的通訊（阿里）？

WebSocket、SharedWorder（須要實現試試）

也能夠調用localstorage、cookies等本地存儲方式

1六、webSocket如何兼容低瀏覽器？(阿里)（暫時沒有實現）

Adobe Flash Socket 、ActiveX HTMLFile (IE) 、基於 multipart 編碼發送 XHR 、基於長輪詢的 XHR

1七、頁面可見性（Page Visibility API） 能夠有哪些用途？

頁面可見性：該網頁是否處於可見狀態。好比網頁最小化，或是一個非前置的網頁卡，那麼visibilityState 的值就是hidden，若是是可見狀態，則是visible。

用途：

• 經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等;
• 在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

詳細可見：Page Visibility(頁面可見性) API介紹、微拓展

1八、如何在頁面上實現一個圓形的可點擊區域？（只有第二個會，其他須要實現）

一、map+area或者svg

二、border-radius

三、純js實現 須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

1九、實現不使用 border 畫出1px高的線，在不一樣瀏覽器的標準模式與怪異模式下都能保持一致的效果。

<div style="height:1px;overflow:hidden;background:red"></div>

20、網頁驗證碼是幹嗎的，是爲了解決什麼安全問題。

區分用戶是計算機仍是人的公共全自動程序。能夠防止惡意破解密碼、刷票、論壇灌水；

有效防止黑客對某一個特定註冊用戶用特定程序暴力破解方式進行不斷的登錄嘗試。

簡單的歸總，就是爲了分清楚操做者是人仍是惡意程序

title與h1的區別、b與strong的區別、i與em的區別？

這個問題涉及到語義化的問題

title屬性沒有明確意義只表示是個標題，H1則表示層次明確的標題，主要影響的頁面爬蟲與SEO

strong是標明重點內容，有語氣增強的含義，使用閱讀設備閱讀網絡時：<strong>會重讀，而<B>是展現強調內容。

i內容展現爲斜體，em表示強調的文本

Physical Style Elements -- 天然樣式標籤: b, i, u, s, pre

Semantic Style Elements -- 語義樣式標籤:strong, em, ins, del, code

若是不能肯定時首選使用天然樣式標籤。

（。。。未完待續）