Web前端筆試115道題帶答案及解析

1、Web前端筆試115道題（帶答案及解析）lshtml5 為什么只需要寫? 答： html5不是基于sgml （標(biāo)準(zhǔn)通用標(biāo)記語言），不需要對dtd 文件進行引用，但是需要doctype來規(guī)范瀏覽器的行為，否那么瀏覽器將開啟怪異模式，而html4.01基于sgml. 需要弓I入dtd,才能告知瀏覽器文檔使用的文檔類型2、行內(nèi)元素有哪些？塊級元素有哪些？空（void）元素有哪 些？ 行內(nèi)元素有：a b span img input select strong （強 調(diào)的語氣）塊級元素有：div ul ol li dl dt dd hl h2 h3 h4p知名的空元素: 3、鏈接導(dǎo)航問題。使用框架結(jié)構(gòu)

2、時，你必須 保證正確設(shè)置所有的導(dǎo)航鏈接，如不然，會給訪問者帶來很 大的麻煩。比方被鏈接的頁面出現(xiàn)在導(dǎo)航框架內(nèi)，這種情 況下訪問者便被陷住了，因為此時他沒有其他地方可去。7、label的作用是什么？是怎么使用的？ Label中有兩 個屬性是非常有用的，一個是FOR、另外一個就是ACCESSKEY 了。FOR屬性功能：表示Label標(biāo)簽要綁定的HTML元素，你點擊這 個標(biāo)簽的時候，所綁定的元素將獲取焦點。用法:姓名ACCESSKEY 屬性：功能：表示訪問Label標(biāo)簽所綁定的元素的熱鍵，當(dāng)您 按下熱鍵，所綁定的元素將獲取焦點。用法：姓名局限性：accessKey屬性所設(shè)置的快捷鍵不能與瀏覽器 的快

3、捷鍵沖突，否那么將優(yōu)先激活瀏覽器的快捷鍵。8、實現(xiàn)不使用border,畫出lpx高的線，在不同瀏覽器下 的Quirksmode和CSSCompat模式下都能保持一致的效果？ & lt;/div9、網(wǎng)頁驗證碼是干嘛的？是為了解決什么平安問題？網(wǎng)頁驗證碼介紹：“驗證碼的英文表示為CAPTCHA (Completely Automated Public Turing test to tellComputers and Humans Apart),翻譯過來就是“全自動區(qū) 分計算機和人類的圖靈測試”，顧名思義，它是用來區(qū)分計 算機和人類的。在CAPTCHA測試中，作為服務(wù)器的計算機 會自動生成一個問題由

4、用戶來解答。這個問題可以由計算機 生成并評判，但是必須只有人類才能解答。由于計算機無法 解答CAPTCHA的問題，所以回答出問題的用戶就可以被認 為是人類。CAPTCHA是由計算機來考人類，而不是標(biāo)準(zhǔn)圖 靈測試中那樣由人類來考計算機，因此人們有時稱CAPTCHA是一種反向圖靈測試。驗證碼的原理：服務(wù)器端隨機生成驗證碼字符串，保存在內(nèi) 存中，并寫入圖片，發(fā)送給瀏覽器端顯示，瀏覽器端輸入驗 證碼圖片上字符，然后提交服務(wù)器端，提交的字符和服務(wù)器 端保存的該字符比擬是否一致，一致就繼續(xù)，否那么返回提示。 攻擊者編寫的robot程序，很難識別驗證碼字符，順利的完 成自動注冊，登錄；而用戶可以識別填寫，所

5、以這就實現(xiàn)了 阻擋攻擊的作用。而圖片的字符識別，就是看圖片上的干擾 強度了。就實際的效果來說，驗證碼只是增加攻擊者的難度, 而不可能完全的防止。10、介紹一下標(biāo)準(zhǔn)的css的盒子模型？與低版本IE的盒子模 型有什么不同？ 盒子模型有兩種，分別是ie盒子模型 和標(biāo)準(zhǔn)w3c盒子模型W3C盒子模型的范圍包括margin、border、padding、 content,并且content局部不包含其他局部IE盒子模型的范圍也包括margin、border、padding、 content,和標(biāo)準(zhǔn)W3C盒子模型不同的是：IE盒子模型的 content 局部包含了 border 和 pading11、如何居

6、中div,如何居中一個浮動元素？如何讓絕對定 位的 div 居中？ a.margin:xpx auto;b.確定容器的寬高，這里寬度是必須的，高度可以不設(shè), 設(shè)置外層的上外邊距和左外邊距分別是寬高的一半。實現(xiàn)居中關(guān)鍵在于margin設(shè)置與position:relative.div width:500px ;height:300px;margin: -150px 0 0 -250px;position:relative;left:50%;top:50%;c.position:absolute;top: 50%;left: 50%;只能把div定位在以紅色圈為起點的位 置，加上 margin:-1

7、00px Opx Opx -10012、display有哪些值？說明他們的作用？block :塊對象的默認值。用該值為對象之后添加新行none:隱藏對象。與visibility屬性的hidden值不同，其 不為被隱藏的對象保存其物理空間inline :內(nèi)聯(lián)對象的默認值。用該值將從對象中刪除行compact :分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象marker:指定內(nèi)容在容器對象之前或之后。要使用此參 數(shù)，對象必須和:after及before偽元素一起使用inline-table .將表格顯示為無前后換行的內(nèi)聯(lián)對象或內(nèi)聯(lián)容器list-item :將塊對象指定為列表工程。并可以添加可選項 目標(biāo)志

8、run-in :分配對象為塊對象或基于內(nèi)容之上的內(nèi)聯(lián)對象table :將對象作為塊元素級的表格顯示13、position的值relative和absolute的定位原點是什么?Absolute, CSS 中的寫法是：position:absolute;他的意思是 絕對定位，他是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT（下面簡稱TRBL）進行定位，在沒有設(shè)定TRBL, 默認依據(jù)父級的做標(biāo)原始點為原始點。如果設(shè)定TRBL并且 父級沒有設(shè)定position屬性，那么當(dāng)前的absolute那么以瀏覽 器左上角為原始點進行定位，位置將由TRBL決定。Relative, CSS中

9、的寫法是：position:relative;他的意思是絕 對相對定位，他是參照父級的原始點為原始點，無父級那么以 BODY的原始點為原始點，配合TRBL進行定位，當(dāng)父級內(nèi)有 padding等CSS屬性時，當(dāng)前級的原始點那么參照父級內(nèi)容區(qū) 的原始點進行定位。14、display設(shè)置為inline-block時，li 與li之間有看不見的空白間隔是什么原因引起的？有什么解決方法？ 行框的排列會受到中間空白（回車空格等等） 的影響，這些空白也會被應(yīng)用樣式，占據(jù)空間，所以會有間 隔解決:設(shè)置解決:設(shè)置ul的font-size為0,解決:設(shè)置ul的font-size為解決:設(shè)置ul的font-size

10、為0,缺陷是必須重新在H清除浮動的方式？ a.添加 鮮為人知的是： 3、頁面導(dǎo)入樣式時，使用link和import有什么區(qū)別？ 兩者都是外部引用CSS的方式，但是存在一定的區(qū)別：區(qū)另|J1 ink是XHTML標(biāo)簽，除了加載CSS外，還可以 定義RSS等其他事務(wù)；import屬于CSS范疇，只能加載 CSSo區(qū)別2 : link引用CSS時，在頁面載入時同時加載；import需要頁面網(wǎng)頁完全載入以后加載。區(qū)別3 ： link是XHTML標(biāo)簽，無兼容問題；import是 在CSS2.1提出的，低版本的瀏覽器不支持。區(qū)別4 link支持使用Javascript控制DOM去改變樣式； 而import不

11、支持。補充：import最優(yōu)寫法import的寫法一般有以下幾種：import style.css /Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 不識別import style.css /Windows IE4/ NS4, MacintoshIE4/NS4不識別import url(style.css) /Windows NS4, Macintosh NS4 不識別import url( style.css ) /Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4 不識別import

12、url( style.css ) /Windows NS4, Macintosh NS4不識別由上分析知道，import url(style.css)和import url( style.css”)是最優(yōu)的選擇，兼容的瀏覽器最多。從字節(jié)優(yōu)化的角度來看inAport url(style.css)最值得推薦。4、常見的瀏覽器內(nèi)核有哪些？使用Trident內(nèi)核的瀏覽 器：IE、Maxthons TT、The World 等；使用Gecko內(nèi)核的瀏覽器：Netcape6及以上版本、FireFoxs MozillaSuite/SeaMonkey ；使用Presto內(nèi)核的瀏覽器：Opera7及以上版本；使

13、用Webkit內(nèi)核的瀏覽器:Safaris Chromeo5、html5有哪些新特性?移除了哪些元素？如何處理HTML5 新標(biāo)簽的瀏覽器兼容性問題？如何區(qū)分html和html5 ?新增的元素有繪畫canvas ,用于媒介回放的video和 audio元素，本地離線存儲localstorage長期存儲數(shù)據(jù)，瀏 覽器關(guān)閉后數(shù)據(jù)不喪失，sessionstorage的數(shù)據(jù)在瀏覽器 關(guān)閉后自動刪除，此外，還新增了以下的幾大類元素。內(nèi)容元素,article、footers header、nav、sectiono表單控件，calendar、date、time、emaik urk searcho控件元素， w

14、ebworker, websockt, Geolocationo移出的元素有以下這些：顯現(xiàn)層元素：basefont, big, center, font, s, strike,tt, Uo性能較差元素：frame, frameset, noframeso如何處理HTML5新標(biāo)簽的瀏覽器兼容問題？如何區(qū)分 HTML 和 HTML5 ?處理兼容問題有兩種方式：1.IE8/IE7/IE6支持通過document.方法產(chǎn)生的標(biāo)簽，利用 這一特性讓這些瀏覽器支持HTML5新標(biāo)簽。2.使用是html5shim框架另夕卜，DOCTYPE聲明的方式是區(qū)分HTML和HTML5標(biāo) 志的一個重要因素，此外，還可以根

15、據(jù)新增的結(jié)構(gòu)、功能元 素來加以區(qū)分。6、iframe有哪些優(yōu)缺點？ 優(yōu)點：.用來實現(xiàn)長連接，在websocket不可用的時 候作為一種替代,最開始由google創(chuàng)造。Comet :基于HTTP 長連接的“服務(wù)器推”技術(shù).跨域通信。JavaScript跨域總結(jié)與解決方法， 類似的還有瀏覽器多頁面通信，比方音樂播放器，用戶如果 翻開了多個tab頁，應(yīng)該只有一個在播放。.歷史記錄管理，解決ajax化網(wǎng)站響應(yīng)瀏覽器 前進后退按鈕的方案，在html5的history api不可用時作為 一種替代。.純前端的utf8和gbk編碼互轉(zhuǎn)。比方在utf8 頁面需要生成一個gbk的encodeURIComponent字符串，可 以通過頁面加載一個gbk的iframe,然后主頁面與子頁面通 信的方式實現(xiàn)轉(zhuǎn)換，這樣就不用在頁面上插入一個非常巨大 的編碼映射表文件了1s在網(wǎng)頁中使用框架結(jié)構(gòu)最大的弊病是搜 索引擎的“蜘蛛“程序無法解讀這種頁面。當(dāng)“蜘蛛”程序 遇到由數(shù)個框架組成的網(wǎng)頁時，它們只看到框架而無法找 到鏈接，因此它們會以為該網(wǎng)站是個死站點，并且很快轉(zhuǎn)身 離去。對一個網(wǎng)站來說這無異于一場災(zāi)難。如果你想銷售產(chǎn)品，你需要客戶;如想得到客