相關(guān)知識點
web標準、 web語義化、 瀏覽器內(nèi)核赐稽、 兼容性、 html5...
題目&答案
- Doctype作用浑侥？嚴格模式與混雜模式如何區(qū)分姊舵？它們有何意義?
（1）<!DOCTYPE>聲明位于HTML文檔中的第一行，處于<html>標簽之前寓落，用于告知瀏覽器的解析器用什么文檔標準解析這個文檔括丁。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)。
（2）標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行伶选。在兼容模式中史飞，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作仰税。
（3）如果HTML文檔包含形式完整的DOCTYPE构资，那么他一般以標準模式呈現(xiàn)。對于HTML4.01文檔陨簇，包含嚴格DTD的DOCTYPE常常導(dǎo)致頁面已標準模式呈現(xiàn)吐绵。DOCTYPE不存在或者格式不正確會導(dǎo)致文檔已混雜模式呈現(xiàn)。
- 請描述一個網(wǎng)頁從開始請求道最終顯示的完整過程河绽？
一個網(wǎng)頁從請求到最終顯示的完整過程一般可以分為如下7個步驟：
（1）在瀏覽器中輸入網(wǎng)址己单；
（2）發(fā)送至DNS服務(wù)器并獲得域名對應(yīng)的WEB服務(wù)器IP地址；
（3）與WEB服務(wù)器建立TCP連接耙饰；
（4）瀏覽器向WEB服務(wù)器的IP地址發(fā)送相應(yīng)的HTTP請求纹笼；
（5）WEB服務(wù)器響應(yīng)請求并返回指定URL的數(shù)據(jù)，或錯誤信息苟跪，如果設(shè)定重定向廷痘，則重定向到新的URL地址；
（6）瀏覽器下載數(shù)據(jù)后解析HTML源文件件已，解析的過程中實現(xiàn)對頁面的排版笋额，解析完成后在瀏覽器中顯示基礎(chǔ)頁面；
（7）分析頁面中的超鏈接并顯示在當前頁面拨齐，重復(fù)以上過程直至無超鏈接需要發(fā)送鳞陨，完成全部數(shù)據(jù)顯示。
- HTML5 為什么只需要寫 <!DOCTYPE HTML>？
（1）HTML5不基于SGML厦滤，因此不需要對DTD進行引用援岩，但是需要DOCTYPE來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運行）；
（2）HTML4.01基于SGML掏导，所以需要對DTD進行引用享怀，才能讓瀏覽器知道該文檔所使用的文檔類型。
- 行內(nèi)元素有哪些趟咆？塊級元素有哪些添瓷？ 空(void)元素有那些？
***行內(nèi)元素***：
a - 錨點值纱，em - 強調(diào)鳞贷，strong - 粗體強調(diào)，span - 定義文本內(nèi)區(qū)塊虐唠，i - 斜體,img - 圖片,b - 粗體搀愧，label - 表格標簽，select - 項目選擇疆偿，textarea - 多行文本輸入框咱筛，sub - 下標，
sup - 上標杆故，q - 短引用迅箩；
***塊元素***：
div - 常用塊級，dl - 定義列表处铛，dt饲趋，dd，ul- 非排序列表罢缸，li篙贸，ol-排序表單，p-段落枫疆，h1，h2敷鸦，h3息楔，h4，h5-標題扒披，table-表格值依，fieldset - form控制組，form - 表單碟案，
***空元素***：
br-換行愿险，hr-水平分割線；
- 介紹一下你對瀏覽器內(nèi)核的理解？
瀏覽器最重要或者說核心的部分是“Rendering Engine”辆亏，可大概譯為“渲染引擎”风秤，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”。負責(zé)對網(wǎng)頁語法的解釋（如標準通用標記語言下的一個應(yīng)用HTML扮叨、JavaScript）并渲染（顯示）網(wǎng)頁缤弦。 所以，通常所謂的瀏覽器內(nèi)核也就是瀏覽器所采用的渲染引擎彻磁，渲染引擎決定了瀏覽器如何顯示網(wǎng)頁的內(nèi)容以及頁面的格式信息碍沐。不同的瀏覽器內(nèi)核對網(wǎng)頁編寫語法的解釋也有不同，因此同一網(wǎng)頁在不同的內(nèi)核的瀏覽器里的渲染（顯示）效果也可能不同衷蜓，這也是網(wǎng)頁編寫者需要在不同內(nèi)核的瀏覽器中測試網(wǎng)頁顯示效果的原因累提。
- 常見的瀏覽器內(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的分支）]
EdgeHTML內(nèi)核：Microsoft Edge交洗。 [此內(nèi)核其實是從MSHTML fork而來骑科，刪掉了幾乎所有的IE私有特性]
- html5有哪些新特性、移除了那些元素构拳？如何處理HTML5新標簽的瀏覽器兼容問題咆爽？如何區(qū)分 ?
***新增了以下的幾大類元素***
內(nèi)容元素，article置森、footer斗埂、header、nav凫海、section呛凶。
表單控件，calendar行贪、date漾稀、time、email建瘫、url崭捍、search。
控件元素啰脚，webworker, websockt, Geolocation殷蛇。
***移出的元素有下列這些****
顯現(xiàn)層元素：basefont，big，center粒梦，font, s亮航，strike，tt谍倦，u塞赂。
性能較差元素：frame，frameset昼蛀，noframes宴猾。
HTML5已形成了最終的標準，概括來講叼旋，它主要是關(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恭陡。
控件元素，webworker, websockt, Geolocation上煤。
***移出的元素有下列這些***
顯現(xiàn)層元素：basefont休玩，big，center，font, s拴疤，strike永部，tt，u呐矾。
性能較差元素：frame苔埋，frameset，noframes蜒犯。
***新的技術(shù)***
canvas,svg,webworker, websocket, Geolocation......
- 簡述一下你對HTML語義化的理解组橄。
（1）HTML語義化讓頁面的內(nèi)容結(jié)構(gòu)化，結(jié)構(gòu)更清晰罚随，便于對瀏覽器玉工、搜索引擎解析；
（2）即使在沒有樣式CSS的情況下也能以一種文檔格式顯示淘菩，并且是容易閱讀的遵班；
（3）搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關(guān)鍵字的權(quán)重，有利于SEO潮改；
（4）使閱讀源代碼的人更容易將網(wǎng)站分塊狭郑，便于閱讀、維護和理解汇在。
- HTML5的離線存儲怎么使用翰萨？能否解釋一下工作原理？
在用戶沒有連接英特網(wǎng)時趾疚，可以正常訪問站點和應(yīng)用缨历；在用戶連接英特網(wǎng)時，更新用戶機器上的緩存文件糙麦。
`原理`：HTML5的離線存儲是基于一個新建的 `.appcache` 文件的緩存機制（并非存儲技術(shù)）辛孵，通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲下來赡磅。之后當網(wǎng)絡(luò)處于離線狀態(tài)下時魄缚，瀏覽器會通過被離線存儲的數(shù)據(jù)進行頁面展示。
使用方法：
(1) 在頁面頭部像下面一樣加入一個 manifest 的屬性焚廊；
(2) 在 cache.manifest 文件里編寫離線存儲資源冶匹；
CACHE MANIFEST
#v0.11
CACHE：
js/app.js
css/style.css
NETWORK:
resource/logo.png
FALLBACK：
/ /offline.html
(3) 在離線狀態(tài)時，操作 window.applicationCache 進行需求實現(xiàn)咆瘟；
詳細使用教程：有趣的HTML5：離線存儲——segmentfault
- 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢嚼隘？
在線情況下，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性袒餐，它會請求manifest文件飞蛹，如果是第一次訪問app谤狡，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進行離線存儲。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了卧檐，那么瀏覽器就會使用離線的資源加載頁面墓懂，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發(fā)生改變霉囚，就不做任何操作捕仔，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲盈罐。
離線情況下榜跌，瀏覽器就直接使用離線存儲的資源。
- 請描述一下 cookies暖呕，sessionStorage 和 localStorage 的區(qū)別斜做？
Web Storage有兩種形式：LocalStorage（本地存儲）和sessionStorage（會話存儲）。這兩種方式都允許開發(fā)者使用js設(shè)置的鍵值對進行操作湾揽，在在重新加載不同的頁面的時候讀出它們瓤逼。這一點與cookie類似。
（1）與cookie不同的是：Web Storage數(shù)據(jù)完全存儲在客戶端库物，不需要通過瀏覽器的請求將數(shù)據(jù)傳給服務(wù)器霸旗，因此x相比cookie來說能夠存儲更多的數(shù)據(jù)，大概5M左右戚揭。
（2）LocalStorage和sessionStorage功能上是一樣的诱告，但是存儲持久時間不一樣。
LocalStorage：瀏覽器關(guān)閉了數(shù)據(jù)仍然可以保存下來民晒，并可用于所有同源（相同的域名精居、協(xié)議和端口）窗口（或標簽頁）；
sessionStorage：數(shù)據(jù)存儲在窗口對象中潜必，窗口關(guān)閉后對應(yīng)的窗口對象消失靴姿，存儲的數(shù)據(jù)也會丟失。
注意：sessionStorage 都可以用localStorage 來代替磁滚，但需要記住的是佛吓，在窗口或者標簽頁關(guān)閉時，使用sessionStorage 存儲的數(shù)據(jù)會丟失垂攘。
（3）使用 local storage和session storage主要通過在js中操作這兩個對象來實現(xiàn)泳唠，分別為window.localStorage和window.sessionStorage. 這兩個對象均是Storage類的兩個實例疚沐，自然也具有Storage類的屬性和方法砸逊。
- iframe 有哪些缺點笼平？
（1）iframe會阻塞主頁面的Onload事件；
（2）搜索引擎的檢索程序無法解讀這種頁面陨仅，不利于SEO唁影；
（3）iframe和主頁面共享連接池耕陷，而瀏覽器對相同域的連接有限制掂名，所以會影響頁面的并行加載据沈。
（4）使用iframe之前需要考慮這兩個缺點。如果需要使用iframe饺蔑，最好通過JavaScript動態(tài)給iframe添加src屬性值锌介，這樣可以繞開以上兩個問題。
- Label的作用是什么猾警？如何使用孔祸？
label標簽來定義表單控制間的關(guān)系，當用戶選擇該標簽時发皿，瀏覽器會自動將焦點轉(zhuǎn)到和標簽相關(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)多個標簽頁之間的通信惶室？（阿里）
調(diào)用 localStorage、cookies 等本地存儲方式
- webSocket 如何兼容低瀏覽器玄货？（阿里）
Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 編碼發(fā)送 XHR
基于長輪詢的 XHR
- 頁面可見性（Page Visibility） API可以有哪些用途皇钞？
在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放松捉。
- 如何在頁面上實現(xiàn)一個圓形的可點擊區(qū)域夹界？
(1) map + area 或者 svg
(2) border-radius
(3) 純js實現(xiàn)，需要求一個點在不在圓上的簡單算法隘世、獲取鼠標坐標等等
- 實現(xiàn) 不使用 border 畫出 1px 高的線可柿，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果？
<div style="height:1px;overflow:hidden;background:#ccc"></div>
- 網(wǎng)頁驗證碼是干什么用的丙者？是為了解決什么安全問題复斥？
可以防止：惡意破解密碼、刷票蔓钟、論壇灌水永票，有效防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試，實際上用驗證碼是現(xiàn)在很多網(wǎng)站通行的方式滥沫，我們利用比較簡易的方式實現(xiàn)了這個功能侣集。這個問題可以由計算機生成并評判，但是必須只有人類才能解答兰绣。由于計算機無法解答CAPTCHA的問題世分，所以回答出問題的用戶就可以被認為是人類。
相關(guān)系列：
前端開發(fā)面試題總結(jié)之——CSS3
前端開發(fā)面試題總結(jié)之——JAVASCRIPT（一）
前端開發(fā)面試題總結(jié)之——JAVASCRIPT（二）
前端開發(fā)面試題總結(jié)之——JAVASCRIPT（三）
以上所有資料來源網(wǎng)絡(luò)缀辩，如有不對的地方希望及時告知臭埋，謝謝踪央！
