timg.jpg
題目&答案
- Doctype作用逆日？嚴(yán)格模式與混雜模式如何區(qū)分肯骇？它們有何意義?
（1）<!DOCTYPE>聲明位于HTML文檔中的第一行徒像，處于<html>標(biāo)簽之前张足，用于告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔愤钾。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以兼容模式呈現(xiàn)瘟滨。
（2）標(biāo)準(zhǔn)模式的排版和JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行。在兼容模式中绰垂，頁面以寬松的向后兼容的方式顯示室奏，模擬老式瀏覽器的行為以防止站點(diǎn)無法工作。
（3）如果HTML文檔包含形式完整的DOCTYPE劲装，那么他一般以標(biāo)準(zhǔn)模式呈現(xiàn)胧沫。對于HTML4.01文檔，包含嚴(yán)格DTD的DOCTYPE常常導(dǎo)致頁面已標(biāo)準(zhǔn)模式呈現(xiàn)占业。DOCTYPE不存在或者格式不正確會導(dǎo)致文檔已混雜模式呈現(xiàn)绒怨。
- 請描述一個(gè)網(wǎng)頁從開始請求道最終顯示的完整過程？
一個(gè)網(wǎng)頁從請求到最終顯示的完整過程一般可以分為如下7個(gè)步驟：
（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ù)六剥，或錯(cuò)誤信息，如果設(shè)定重定向峰伙，則重定向到新的URL地址疗疟；
（6）瀏覽器下載數(shù)據(jù)后解析HTML源文件，解析的過程中實(shí)現(xiàn)對頁面的排版瞳氓，解析完成后在瀏覽器中顯示基礎(chǔ)頁面策彤；
（7）分析頁面中的超鏈接并顯示在當(dāng)前頁面，重復(fù)以上過程直至無超鏈接需要發(fā)送，完成全部數(shù)據(jù)顯示店诗。
- HTML5 為什么只需要寫 <!DOCTYPE HTML>裹刮？
1）HTML5不基于SGML，因此不需要對DTD進(jìn)行引用庞瘸，但是需要DOCTYPE來規(guī)范瀏覽器的行為（讓瀏覽器按照它們應(yīng)該的方式來運(yùn)行）捧弃；
（2）HTML4.01基于SGML，所以需要對DTD進(jìn)行引用恕洲，才能讓瀏覽器知道該文檔所使用的文檔類型塔橡。
- 行內(nèi)元素有哪些？塊級元素有哪些霜第？ 空(void)元素有那些？
***行內(nèi)元素***：
a - 錨點(diǎn)户辞，em - 強(qiáng)調(diào)泌类，strong - 粗體強(qiáng)調(diào)，span - 定義文本內(nèi)區(qū)塊底燎，i - 斜體,img - 圖片,b - 粗體刃榨，label - 表格標(biāo)簽，select - 項(xiàng)目選擇双仍，textarea - 多行文本輸入框枢希，sub - 下標(biāo)，
sup - 上標(biāo)朱沃，q - 短引用苞轿；
***塊元素***：
div - 常用塊級，dl - 定義列表逗物，dt搬卒，dd，ul- 非排序列表翎卓，li契邀，ol-排序表單，p-段落失暴，h1坯门，h2，h3逗扒，h4古戴，h5-標(biāo)題，table-表格缴阎，fieldset - form控制組允瞧，form - 表單，
***空元素***：
br-換行，hr-水平分割線述暂；
- 介紹一下你對瀏覽器內(nèi)核的理解痹升？
瀏覽器最重要或者說核心的部分是“Rendering Engine”，可大概譯為“渲染引擎”畦韭，不過我們一般習(xí)慣將之稱為“瀏覽器內(nèi)核”疼蛾。負(fù)責(zé)對網(wǎng)頁語法的解釋（如標(biāo)準(zhǔn)通用標(biāo)記語言下的一個(gè)應(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)核其實(shí)是從MSHTML fork而來眶熬，刪掉了幾乎所有的IE私有特性]
詳細(xì)文章：瀏覽器內(nèi)核的解析和對比——依水間
- html5有哪些新特性妹笆、移除了那些元素？如何處理HTML5新標(biāo)簽的瀏覽器兼容問題聋涨？如何區(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已形成了最終的標(biāo)準(zhǔn)练湿，概括來講，它主要是關(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標(biāo)記來確定上下文和各個(gè)關(guān)鍵字的權(quán)重炫贤，有利于SEO；
（4）使閱讀源代碼的人更容易將網(wǎng)站分塊付秕，便于閱讀兰珍、維護(hù)和理解。
- HTML5的離線存儲怎么使用询吴？能否解釋一下工作原理掠河？
在用戶沒有連接英特網(wǎng)時(shí)，可以正常訪問站點(diǎn)和應(yīng)用猛计；在用戶連接英特網(wǎng)時(shí)唠摹，更新用戶機(jī)器上的緩存文件。
`原理`：HTML5的離線存儲是基于一個(gè)新建的 `.appcache` 文件的緩存機(jī)制（并非存儲技術(shù)）奉瘤，通過這個(gè)文件上的解析清單離線存儲資源勾拉，這些資源就會像cookie一樣被存儲下來。之后當(dāng)網(wǎng)絡(luò)處于離線狀態(tài)下時(shí)毛好，瀏覽器會通過被離線存儲的數(shù)據(jù)進(jìn)行頁面展示望艺。
使用方法：
(1) 在頁面頭部像下面一樣加入一個(gè) 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)時(shí)找默，操作 window.applicationCache 進(jìn)行需求實(shí)現(xiàn)；
詳細(xì)使用教程：有趣的HTML5：離線存儲——segmentfault
- 瀏覽器是怎么對HTML5的離線儲存資源進(jìn)行管理和加載的呢吼驶？
在線情況下惩激，瀏覽器發(fā)現(xiàn)html頭部有manifest屬性店煞，它會請求manifest文件，如果是第一次訪問app风钻，那么瀏覽器就會根據(jù)manifest文件的內(nèi)容下載相應(yīng)的資源并且進(jìn)行離線存儲顷蟀。如果已經(jīng)訪問過app并且資源已經(jīng)離線存儲了，那么瀏覽器就會使用離線的資源加載頁面骡技，然后瀏覽器會對比新的manifest文件與舊的manifest文件鸣个，如果文件沒有發(fā)生改變，就不做任何操作布朦，如果文件改變了囤萤，那么就會重新下載文件中的資源并進(jìn)行離線存儲。
離線情況下是趴，瀏覽器就直接使用離線存儲的資源涛舍。
- 請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別唆途？
Web Storage有兩種形式：LocalStorage（本地存儲）和sessionStorage（會話存儲）富雅。這兩種方式都允許開發(fā)者使用js設(shè)置的鍵值對進(jìn)行操作，在在重新加載不同的頁面的時(shí)候讀出它們肛搬。這一點(diǎn)與cookie類似没佑。
（1）與cookie不同的是：Web Storage數(shù)據(jù)完全存儲在客戶端，不需要通過瀏覽器的請求將數(shù)據(jù)傳給服務(wù)器温赔，因此x相比cookie來說能夠存儲更多的數(shù)據(jù)图筹，大概5M左右。
（2）LocalStorage和sessionStorage功能上是一樣的让腹，但是存儲持久時(shí)間不一樣。
LocalStorage：瀏覽器關(guān)閉了數(shù)據(jù)仍然可以保存下來扣溺，并可用于所有同源（相同的域名骇窍、協(xié)議和端口）窗口（或標(biāo)簽頁）；
sessionStorage：數(shù)據(jù)存儲在窗口對象中锥余，窗口關(guān)閉后對應(yīng)的窗口對象消失腹纳，存儲的數(shù)據(jù)也會丟失。
注意：sessionStorage 都可以用localStorage 來代替驱犹，但需要記住的是嘲恍，在窗口或者標(biāo)簽頁關(guān)閉時(shí)，使用sessionStorage 存儲的數(shù)據(jù)會丟失雄驹。
（3）使用 local storage和session storage主要通過在js中操作這兩個(gè)對象來實(shí)現(xiàn)佃牛，分別為window.localStorage和window.sessionStorage. 這兩個(gè)對象均是Storage類的兩個(gè)實(shí)例，自然也具有Storage類的屬性和方法医舆。
- iframe 有哪些缺點(diǎn)俘侠？
（1）iframe會阻塞主頁面的Onload事件象缀；
（2）搜索引擎的檢索程序無法解讀這種頁面，不利于SEO爷速；
（3）iframe和主頁面共享連接池央星，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載惫东。
（4）使用iframe之前需要考慮這兩個(gè)缺點(diǎn)莉给。如果需要使用iframe，最好通過JavaScript動態(tài)給iframe添加src屬性值廉沮，這樣可以繞開以上兩個(gè)問題颓遏。
- Label的作用是什么？如何使用废封？
label標(biāo)簽來定義表單控制間的關(guān)系州泊，當(dāng)用戶選擇該標(biāo)簽時(shí)，瀏覽器會自動將焦點(diǎn)轉(zhuǎn)到和標(biāo)簽相關(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 或下面某個(gè) input 設(shè)置為 `autocomplete = off`。
- 如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁之間的通信刽漂？（阿里）
調(diào)用 localStorage演训、cookies 等本地存儲方式
- webSocket 如何兼容低瀏覽器？（阿里）
Adobe Flash Socket
ActiveX HTMLFile（IE）
基于 multipart 編碼發(fā)送 XHR
基于長輪詢的 XHR
- 頁面可見性（Page Visibility） API可以有哪些用途贝咙？
在頁面被切換到其他后臺進(jìn)程的時(shí)候样悟，自動暫停音樂或視頻的播放。
- 如何在頁面上實(shí)現(xiàn)一個(gè)圓形的可點(diǎn)擊區(qū)域庭猩？
(1) map + area 或者 svg
(2) border-radius
(3) 純js實(shí)現(xiàn)窟她，需要求一個(gè)點(diǎn)在不在圓上的簡單算法、獲取鼠標(biāo)坐標(biāo)等等
- 實(shí)現(xiàn) 不使用 border 畫出 1px 高的線蔼水，在不同瀏覽器的標(biāo)準(zhǔn)模式與怪異模式下都能保持一致的效果震糖？
<div style="height:1px;overflow:hidden;background:#ccc"></div>
- 網(wǎng)頁驗(yàn)證碼是干什么用的？是為了解決什么安全問題趴腋？
可以防止：惡意破解密碼吊说、刷票、論壇灌水优炬，有效防止某個(gè)黑客對某一個(gè)特定注冊用戶用特定程序暴力破解方式進(jìn)行不斷的登陸嘗試颁井，實(shí)際上用驗(yàn)證碼是現(xiàn)在很多網(wǎng)站通行的方式，我們利用比較簡易的方式實(shí)現(xiàn)了這個(gè)功能蠢护。這個(gè)問題可以由計(jì)算機(jī)生成并評判雅宾，但是必須只有人類才能解答。由于計(jì)算機(jī)無法解答CAPTCHA的問題糊余，所以回答出問題的用戶就可以被認(rèn)為是人類秀又。
