timg.jpg
題目&答案
- Doctype作用？嚴格模式與混雜模式如何區分？它們有何意義?
（1）<!DOCTYPE>聲明位于HTML文檔中的第一行，處于<html>標簽之前，用于告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導致文檔以兼容模式呈現。
（2）標準模式的排版和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示，模擬老式瀏覽器的行為以防止站點無法工作。
（3）如果HTML文檔包含形式完整的DOCTYPE，那么他一般以標準模式呈現。對于HTML4.01文檔，包含嚴格DTD的DOCTYPE常常導致頁面已標準模式呈現。DOCTYPE不存在或者格式不正確會導致文檔已混雜模式呈現。
- 請描述一個網頁從開始請求道最終顯示的完整過程？
一個網頁從請求到最終顯示的完整過程一般可以分為如下7個步驟：
（1）在瀏覽器中輸入網址；
（2）發送至DNS服務器并獲得域名對應的WEB服務器IP地址；
（3）與WEB服務器建立TCP連接；
（4）瀏覽器向WEB服務器的IP地址發送相應的HTTP請求；
（5）WEB服務器響應請求并返回指定URL的數據，或錯誤信息，如果設定重定向，則重定向到新的URL地址；
（6）瀏覽器下載數據后解析HTML源文件，解析的過程中實現對頁面的排版，解析完成后在瀏覽器中顯示基礎頁面；
（7）分析頁面中的超鏈接并顯示在當前頁面，重復以上過程直至無超鏈接需要發送，完成全部數據顯示。
- HTML5 為什么只需要寫 <!DOCTYPE HTML>？
1）HTML5不基于SGML，因此不需要對DTD進行引用，但是需要DOCTYPE來規范瀏覽器的行為（讓瀏覽器按照它們應該的方式來運行）；
（2）HTML4.01基于SGML，所以需要對DTD進行引用，才能讓瀏覽器知道該文檔所使用的文檔類型。
- 行內元素有哪些？塊級元素有哪些？ 空(void)元素有那些？
***行內元素***：
a - 錨點，em - 強調，strong - 粗體強調，span - 定義文本內區塊，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-水平分割線；
- 介紹一下你對瀏覽器內核的理解？
瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”，不過我們一般習慣將之稱為“瀏覽器內核”。負責對網頁語法的解釋（如標準通用標記語言下的一個應用HTML、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的分支）]
EdgeHTML內核：Microsoft Edge。 [此內核其實是從MSHTML fork而來，刪掉了幾乎所有的IE私有特性]
詳細文章：瀏覽器內核的解析和對比——依水間
- html5有哪些新特性、移除了那些元素？如何處理HTML5新標簽的瀏覽器兼容問題？如何區分 ?
***新增了以下的幾大類元素***
內容元素，article、footer、header、nav、section。
表單控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
***移出的元素有下列這些****
顯現層元素：basefont，big，center，font, s，strike，tt，u。
性能較差元素：frame，frameset，noframes。
HTML5已形成了最終的標準，概括來講，它主要是關于圖像，位置，存儲，多任務等功能的增加。
新增的元素有繪畫 canvas ，用于媒介回放的 video 和 audio 元素，本地離線存儲 localStorage 長期存儲數據，瀏覽器關閉后數據不丟失，而sessionStorage的數據在瀏覽器關閉后自動刪除，此外，還新增了以下的幾大類元素。
內容元素，article、footer、header、nav、section。
表單控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
***移出的元素有下列這些***
顯現層元素：basefont，big，center，font, s，strike，tt，u。
性能較差元素：frame，frameset，noframes。
***新的技術***
canvas,svg,webworker, websocket, Geolocation......
- 簡述一下你對HTML語義化的理解。
（1）HTML語義化讓頁面的內容結構化，結構更清晰，便于對瀏覽器、搜索引擎解析；
（2）即使在沒有樣式CSS的情況下也能以一種文檔格式顯示，并且是容易閱讀的；
（3）搜索引擎的爬蟲也依賴于HTML標記來確定上下文和各個關鍵字的權重，有利于SEO；
（4）使閱讀源代碼的人更容易將網站分塊，便于閱讀、維護和理解。
- HTML5的離線存儲怎么使用？能否解釋一下工作原理？
在用戶沒有連接英特網時，可以正常訪問站點和應用；在用戶連接英特網時，更新用戶機器上的緩存文件。
`原理`：HTML5的離線存儲是基于一個新建的 `.appcache` 文件的緩存機制（并非存儲技術），通過這個文件上的解析清單離線存儲資源，這些資源就會像cookie一樣被存儲下來。之后當網絡處于離線狀態下時，瀏覽器會通過被離線存儲的數據進行頁面展示。
使用方法：
(1) 在頁面頭部像下面一樣加入一個 manifest 的屬性；
(2) 在 cache.manifest 文件里編寫離線存儲資源；
CACHE MANIFEST
#v0.11
CACHE：
js/app.js
css/style.css
NETWORK:
resource/logo.png
FALLBACK：
/ /offline.html
(3) 在離線狀態時，操作 window.applicationCache 進行需求實現；
詳細使用教程：有趣的HTML5：離線存儲——segmentfault
- 瀏覽器是怎么對HTML5的離線儲存資源進行管理和加載的呢？
在線情況下，瀏覽器發現html頭部有manifest屬性，它會請求manifest文件，如果是第一次訪問app，那么瀏覽器就會根據manifest文件的內容下載相應的資源并且進行離線存儲。如果已經訪問過app并且資源已經離線存儲了，那么瀏覽器就會使用離線的資源加載頁面，然后瀏覽器會對比新的manifest文件與舊的manifest文件，如果文件沒有發生改變，就不做任何操作，如果文件改變了，那么就會重新下載文件中的資源并進行離線存儲。
離線情況下，瀏覽器就直接使用離線存儲的資源。
- 請描述一下 cookies，sessionStorage 和 localStorage 的區別？
Web Storage有兩種形式：LocalStorage（本地存儲）和sessionStorage（會話存儲）。這兩種方式都允許開發者使用js設置的鍵值對進行操作，在在重新加載不同的頁面的時候讀出它們。這一點與cookie類似。
（1）與cookie不同的是：Web Storage數據完全存儲在客戶端，不需要通過瀏覽器的請求將數據傳給服務器，因此x相比cookie來說能夠存儲更多的數據，大概5M左右。
（2）LocalStorage和sessionStorage功能上是一樣的，但是存儲持久時間不一樣。
LocalStorage：瀏覽器關閉了數據仍然可以保存下來，并可用于所有同源（相同的域名、協議和端口）窗口（或標簽頁）；
sessionStorage：數據存儲在窗口對象中，窗口關閉后對應的窗口對象消失，存儲的數據也會丟失。
注意：sessionStorage 都可以用localStorage 來代替，但需要記住的是，在窗口或者標簽頁關閉時，使用sessionStorage 存儲的數據會丟失。
（3）使用 local storage和session storage主要通過在js中操作這兩個對象來實現，分別為window.localStorage和window.sessionStorage. 這兩個對象均是Storage類的兩個實例，自然也具有Storage類的屬性和方法。
- iframe 有哪些缺點？
（1）iframe會阻塞主頁面的Onload事件；
（2）搜索引擎的檢索程序無法解讀這種頁面，不利于SEO；
（3）iframe和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。
（4）使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好通過JavaScript動態給iframe添加src屬性值，這樣可以繞開以上兩個問題。
- Label的作用是什么？如何使用？
label標簽來定義表單控制間的關系，當用戶選擇該標簽時，瀏覽器會自動將焦點轉到和標簽相關的表單控件上。
<label for="Name">Number:</label>
<input type="text" name="Name" id="Name" />
<label>Date:<input type="text" name="B" /></label>
- HTML5的form如何關閉自動完成功能？
給不想要提示的 form 或下面某個 input 設置為 `autocomplete = off`。
- 如何實現瀏覽器內多個標簽頁之間的通信？（阿里）
調用 localStorage、cookies 等本地存儲方式
- webSocket 如何兼容低瀏覽器？（阿里）
Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 編碼發送 XHR
基于長輪詢的 XHR
- 頁面可見性（Page Visibility） API可以有哪些用途？
在頁面被切換到其他后臺進程的時候，自動暫停音樂或視頻的播放。
- 如何在頁面上實現一個圓形的可點擊區域？
(1) map + area 或者 svg
(2) border-radius
(3) 純js實現，需要求一個點在不在圓上的簡單算法、獲取鼠標坐標等等
- 實現 不使用 border 畫出 1px 高的線，在不同瀏覽器的標準模式與怪異模式下都能保持一致的效果？
<div style="height:1px;overflow:hidden;background:#ccc"></div>
- 網頁驗證碼是干什么用的？是為了解決什么安全問題？
可以防止：惡意破解密碼、刷票、論壇灌水，有效防止某個黑客對某一個特定注冊用戶用特定程序暴力破解方式進行不斷的登陸嘗試，實際上用驗證碼是現在很多網站通行的方式，我們利用比較簡易的方式實現了這個功能。這個問題可以由計算機生成并評判，但是必須只有人類才能解答。由于計算機無法解答CAPTCHA的問題，所以回答出問題的用戶就可以被認為是人類。
