最新前端面試題大全(html篇)(共8頁)_第1頁
最新前端面試題大全(html篇)(共8頁)_第2頁
最新前端面試題大全(html篇)(共8頁)_第3頁
最新前端面試題大全(html篇)(共8頁)_第4頁
最新前端面試題大全(html篇)(共8頁)_第5頁
已閱讀5頁，還剩3頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、1.XHTML和HTML有什么區(qū)別HTML是一種基本的WEB網(wǎng)頁設(shè)計語言，XHTML是一個基于XML的置標語言。最主要的不同：(1)XHTML元素必須被正確地嵌套(2)XHTML元素必須被關(guān)閉(3)XHTML標簽名必須用小寫字母(4)XHTML文檔必須擁有根元素2.什么是語義化的HTML?html5的語義化是指用正確的標簽包含正確的容，比如nav標簽就應(yīng)該包含導(dǎo)航條容(1)直觀的認識標簽 對于搜索引擎的抓取有好處，用正確的標簽做正確的事情！(2)html語義化就是讓頁面的容結(jié)構(gòu)化，便于對瀏覽器、搜索引擎解析(3)在沒有CCS樣式情況下也以一種文檔格式顯示，并且是容易閱讀的。搜索引擎的爬蟲依賴于

2、標記來確定上下和各個關(guān)鍵字的權(quán)重，利于SEO。(4)使閱讀源代碼的人更容易將分塊，便于閱讀維護理解。寫一段語義的html代碼(HTML5中新增加的很多標簽如：<article>、<nav>、<header>和<footer>等。就是基于語義化設(shè)計原則) < div id="header"> < h1>標題< /h1> < h2>專注Web前端技術(shù)< /h2> < /div>語義 HTML 具有以下特性：文字包裹在元素中，用以反映容。例如：段落包含在 <

3、;p> 元素中。順序表包含在<ol>元素中。從其他來源引用的大型文字塊包含在<blockquote>元素中。HTML 元素不能用作語義用途以外的其他目的。例如：<h1>包含標題，但并非用于放大文本。<blockquote>包含大段引述，但并非用于文本縮進?？瞻锥温湓?(<p></p>) 并非用于跳行。文本并不直接包含任何樣式信息。例如：不使用 <font> 或 <center> 等格式標記。類或 ID 中不引用顏色或位置。3.常見的瀏覽器核有哪些？Trident核：IE, Max Thon,

4、 TT, The World,360,搜狗瀏覽器等。又稱MSHTMLGecko核：Netscape6及以上版本，F(xiàn)F, Mozilla Suite / Sea Monkey等Presto核：Opera7及以上。Opera核原為：Presto，現(xiàn)為：Blink;Webkit核：Safari, Chrome等。 Chrome的：Blink（WebKit的分支）4.HTML5有哪些新特性、移除了那些元素？如何區(qū)分 HTML 和HTML5？HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集。主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加：(1)標簽語義化 (如header,footer,nav,aside,a

5、rticle,section)，新增很多表單元素，如email,url(2)音視頻元素 video, audio不需要在依賴外部的插件就可以往網(wǎng)頁中加入音/視頻元素(3)新增很多api 如獲取用戶地理位置的window.navigator.geoloaction(4) webstorage 本地存儲，存儲在客戶端，包括localeStorage和sessionStorage (5)websocket一種協(xié)議，可以讓我們建立客戶端到服務(wù)器端的全雙工通信，這就意味著服務(wù)器端可以主動推送數(shù)據(jù)到客戶端(6) webworker 是運行在瀏覽器后臺的js程序，是另開的一個線程，不影響主程序運行 可用we

6、bworker執(zhí)行復(fù)雜的數(shù)據(jù)操作，再把操作結(jié)果通過postMessage傳遞給主線程這樣在進行復(fù)雜且耗時的操作時就不會阻塞主線程了(7)緩存 html5允許我們自己控制哪些文件需要緩存，哪些不需要，具體的做法如下:1) 首先給html添加manifest屬性，并賦值為cache.manifest2) cache.manifest的容為: CACHE MANIFEST #v1.2 CACHE : /表示需要緩存的文件 a.js b.js NETWORK: /表示只在用戶在線的時候才需要的文件，不會緩存 c.js FALLBACK /表示如果找不到第一個資源就用第二個資源代替 index.html

7、移除的元素：純表現(xiàn)的元素 basefont，big，center，font, s，strike，tt，u；對可用性產(chǎn)生負面影響的元素 frame，frameset，noframes；多個頁面之間如何進行通信使用cookie，使用web worker，使用localeStorage和sessionStorage5.區(qū)分HTML和HTML5a在文檔類型聲明上, html有很長的一段代碼，html5卻只有簡單的聲明html:<!DOCTYPE html PUBLIC "" ""> <html xmlns="./1999/

8、xhtml">html5:<!doctype html>b在結(jié)構(gòu)語義上html沒有體現(xiàn)結(jié)構(gòu)語義化的標簽 通常都是<div id="header"></div>這樣來命名的，這樣表示的頭部。 Html5有體現(xiàn)結(jié)構(gòu)語義化的標簽(處理HTML5新標簽的瀏覽器兼容問題最好的方式是直接使用成熟的框架如html5shim)6.請描述一下 cookies，sessionStorage 和 localStorage 的區(qū)別？cookie存儲在客戶端大小受限，并且每次你請求一個新的頁面時Cookie都會被發(fā)送，浪費帶寬。需指定作用域，不可以

9、跨域調(diào)用。有一定的過期時間，過期后自動會消失作用是與服務(wù)器進行交互，作為HTTP規(guī)的一部分而存在web Storage存儲在客戶端是為更大容量存儲設(shè)計的(8M, cookie 4K)擁有setItem,getItem,removeItem,clear等方法(cookie需要開發(fā)者自己封裝setCookie，getCookie)作用是在本地“存儲”數(shù)據(jù)sessionStorage會話級別的存儲，僅用于在本地存儲一個會話(session)中的數(shù)據(jù)，這些數(shù)據(jù)只有在同一個會話中的頁面才能訪問并且當(dāng)會話結(jié)束后數(shù)據(jù)也隨之銷毀。localStorage用于持久化的本地存儲，除非主動刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠不

10、會過期的。7.如何實現(xiàn)瀏覽器多個標簽頁之間的通信?調(diào)用localstorge、cookies等本地存儲方式。8.HTML5 為什么只需要寫 !DOCTYPE HTML？HTML4.01基于SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的文檔類型HTML5 不基于SGML,因此不需對DTD進行引用，但需要doctype來規(guī)瀏覽器的行為(讓瀏覽器按照它們應(yīng)該的方式來運行)。9.Doctype作用？標準模式與兼容模式各有什么區(qū)別?!DOCTYPE聲明位于HTML文檔第一行，處于html 標簽之前。告知瀏覽器的解析器用什么文檔標準解析這個文檔。DOCTYPE不存在或格式不正確會導(dǎo)致文檔以

11、兼容模式呈現(xiàn)。標準模式的排版 和JS運作模式都是以該瀏覽器支持的最高標準運行。在兼容模式中，頁面以寬松的向后兼容的方式顯示,模擬老式瀏覽器的行為以防止站點無法工作。10.Doctype中區(qū)分嚴格模式與混雜模式有什么意義？ 嚴格模式：使用此類型的網(wǎng)頁，瀏覽器解析將相對嚴格，不允許使用任何表現(xiàn)樣式的標識和屬性，比如在元素中直接使用background-color背景色屬性?；祀s模式：瀏覽器對XHTML的解析較為寬松。允許使用4.01中的標簽，但必須符合XHTML的語法。 如何觸發(fā)這兩種模式？加入XMl聲明可觸發(fā)11.簡述一下src與href的區(qū)別href是指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素(錨點

12、)或當(dāng)前文檔()之間的(用于超)src 是指向外部資源所在位置，指向的容將會嵌入到文檔中當(dāng)前標簽所在位置 (在請求src資源時會將其指向的資源下載并應(yīng)用到文檔，例如js腳本, img圖片和frame等元素) (當(dāng)瀏覽器解析到該元素時，會暫停其他資源的下載和處理，直到將該資源加載、編譯、執(zhí)行完畢) (這就是為什么將js腳本放在底部而不是頭部)12、簡述同步和異步的區(qū)別同步是阻塞模式: 指一個進程在執(zhí)行某個請求的時候，若該請求需要一段時間才能返回信息，那么這個進程將會一直等待下去，直到收到返回信息才繼續(xù)執(zhí)行下去；異步是非阻塞模式: 指進程不需要一直等下去，而是繼續(xù)執(zhí)行下面的操作，不管其他進程的狀態(tài)

13、。當(dāng)有消息返回時系統(tǒng)會通知進程進行處理，這樣可以提高執(zhí)行的效率。13、什么叫漸進增強和優(yōu)雅降級？漸進增強 progressive enhancement:針對低版本瀏覽器進行構(gòu)建頁面，保證最基本的功能，然后再針對高級瀏覽器進行效果、交互等改進和追加功能達到更好的用戶體驗。優(yōu)雅降級 graceful degradation：一開始就構(gòu)建完整的功能，然后再針對低版本瀏覽器進行兼容。區(qū)別:a. 優(yōu)雅降級是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗的供給b. 漸進增強則是從一個非?；A(chǔ)的，能夠起作用的版本開始，并不斷擴充，以適應(yīng)未來環(huán)境的需要c. 降級（功能衰減）意味著往回看；而漸進增強則意味著朝前看，同時

14、保證其根基處于安全地帶14.瀏覽器渲染原理（1）首先獲取html , HTML被解析成DOM Tree，CSS被解析成CSS Rule Tree（2）把DOM Tree和CSS Rule Tree經(jīng)過整合生成Render Tree（布局階段）（3）元素按照算出來的規(guī)則，把元素放到它該出現(xiàn)的位置，通過顯卡畫到屏幕上15.對WEB標準以及W3C的理解與認識標簽閉合、標簽小寫、不亂嵌套、使用外鏈css和js腳本結(jié)構(gòu)行為表現(xiàn)分離、加快文件下載與頁面速度更少的代碼和組件，容易維護、改版方便，提高易用性16.Restful API是什么Restful的意思就是（資源）表現(xiàn)層狀態(tài)轉(zhuǎn)化。"資源&qu

15、ot;: 就是網(wǎng)絡(luò)上的一個實體，或者說網(wǎng)絡(luò)上的一個具體信息。它可以是一段文本、一圖片、一首歌曲、一種服務(wù)，總之就是一個具體的實在，每一個URI代表一種資源(Resources)。"表現(xiàn)層": 其實指的是"資源"的"表現(xiàn)層"，把"資源"具體呈現(xiàn)出來的形式，叫做它的"表現(xiàn)層"（Representation）。如果客戶端想要操作服務(wù)器，必須通過某種手段，讓服務(wù)器端發(fā)生"狀態(tài)轉(zhuǎn)化"（State Transfer）。而這種轉(zhuǎn)化是建立在表現(xiàn)層之上的，所以就是"表現(xiàn)層狀態(tài)轉(zhuǎn)化&q

16、uot;。Restful就是客戶端和服務(wù)器之間，傳遞這種資源的某種表現(xiàn)層客戶端通過四個HTTP動詞，對服務(wù)器端資源進行操作，實現(xiàn)"表現(xiàn)層狀態(tài)轉(zhuǎn)化"Restful API就是符合Restful架構(gòu)的API設(shè)計。Restful API一些具體實踐：應(yīng)該盡量將API部署在專用域名之下。不應(yīng)該在URL中包含動詞或?qū)PI的版本號放入URL 17.<script>的defer、async的區(qū)別defer是在HTML解析完之后才會執(zhí)行，如果是多個，按照加載的順序依次執(zhí)行async是在加載完成后立即執(zhí)行，如果是多個，執(zhí)行順序和加載順序無關(guān)18.同源與跨域什么是同源策略？一段腳

17、本只能讀取來自于同一來源的窗口和文檔的屬性，這里的同一來源指的是主機名、協(xié)議和端口號的組合跨域通信的幾種方式j(luò)sonp跨域HashCORS跨源資源共享websocket跨域設(shè)置代理服務(wù)器postMessage跨域: 包含iframe的頁面向iframe傳遞消息JSONP原理：利用script標簽的異步加載特性實現(xiàn), 給服務(wù)端傳一個回調(diào)函數(shù), 服務(wù)器返回一個傳遞過去的回調(diào)函數(shù)名稱的JS代碼jsonp不是真正的ajax(ajax是頁面無刷新請求數(shù)據(jù)操作19.UTF-8和Unicode的區(qū)別29.UTF-8和Unicode的區(qū)別UTF-8是使用最廣的一種unicode的實現(xiàn)方式。Unicode用于統(tǒng)

18、一地區(qū)性文字編碼。UTF-8就是每次8個位傳輸數(shù)據(jù)，而UTF-16就是每次16個位20.一次完整的HTTP事務(wù)是怎樣的一個過程？基本流程：a. 域名解析b. 發(fā)起TCP的3次握手c. 建立TCP連接后發(fā)起http請求d. 服務(wù)器端響應(yīng)http請求，瀏覽器得到html代碼e. 瀏覽器解析html代碼，并請求html代碼中的資源f. 瀏覽器對頁面進行渲染呈現(xiàn)給用戶21.前端頁面有哪三層構(gòu)成，分別是什么?作用是什么?結(jié)構(gòu)層: HTML/XHTML(DOM節(jié)點)樣式層: CSS(頁面渲染)腳本層：JS/AS(頁面動畫效果)22.標簽上title與alt屬性的區(qū)別是什么?alt 當(dāng)圖片不顯示時，用文字代

19、表。title 為該屬性提供信息23.瀏覽器標準模式和怪異模式之間的區(qū)別是什么?盒子模型 渲染模式的不同使用 patMode 可顯示為什么模式24.來管理所有CSS文件、JS與圖片?所有的CSS文件都放入一個樣式表中,減少HTTP請求js文件也采用同樣的方法所有的背景圖像都放到一個圖片文件中，通過background-image和background-position屬性來顯示圖片的不同部分25. 前端優(yōu)化提高網(wǎng)頁的加載速度 1) 使用css sprites, 有效的減少http請求數(shù) 2) 使用緩存 3) 壓縮js, css文件, 減小文件體積 4) 使用cdn, 減小服務(wù)器負擔(dān) 5) 懶加

20、載圖片 6) 預(yù)加載css, js文件 7) 避免dom結(jié)構(gòu)的深層次嵌套 8) 給DOM元素添加樣式時, 把樣式放到類中, 直接給元素添加類, 減少重構(gòu)和回流26. 你怎么來實現(xiàn)頁面設(shè)計圖，你認為前端應(yīng)該如何高質(zhì)量完成工作?頁面設(shè)計圖:首先劃分成頭部、body、腳部. 高質(zhì)量完成工作:1) 實現(xiàn)效果圖是最基本的工作，精確到2px 2) 與設(shè)計師，產(chǎn)品經(jīng)理的溝通和項目的參與 3) 做好的頁面結(jié)構(gòu)，頁面重構(gòu)和用戶體驗 4) 處理hack，兼容、寫出優(yōu)美的代碼格式 5) 針對服務(wù)器的優(yōu)化、擁抱 HTML5。27.iframe有那些缺點？ *iframe會阻塞主頁面的onload事件； *iframe

21、和主頁面共享連接池，而瀏覽器對相同域的連接有限制，所以會影響頁面的并行加載。 使用iframe之前需要考慮這兩個缺點。如果需要使用iframe，最好是通過javascript 動態(tài)給iframe添加src屬性值，這樣可以可以繞開以上兩個問題。28.WEB應(yīng)用從服務(wù)器主動推送Data到客戶端有那些方式？ html5 websoket WebSocket通過Flash XHR長時間連接 XHR Multipart Streaming 不可見的Iframe <script>標簽的長時間連接(可跨域)29.JSON的了解JSON(JavaScript Object Notation)是一種

22、輕量級的數(shù)據(jù)交換格式。它是基于JavaScript的一個子集。數(shù)據(jù)格式簡單, 易于讀寫, 占用帶寬小'age':'12', 'name':'back'30.異步加載的方式 (1) defer（只支持IE） (2) async (3) 動態(tài)創(chuàng)建DOM（用得最多）(4) 創(chuàng)建script，插入到DOM中，加載完畢后進行回調(diào)31 xss、csrf的概念以及防方法大公司如bat在面試的時候，web安全問題是必問的問題，所以一定要懂要徹底理解xss和csrf的概念和防方式，最好在項目中有用到對這兩種攻擊的防，這樣會給你的面試加很多分由xss

23、和csrf涉及的東西比較多，我就不具體給出了，詳情請看網(wǎng)頁: XSS攻擊及防御，CSRF攻擊32.談?wù)剬η岸四K化的理解模塊化是把js程序劃分成獨立命名、可獨立訪問的模塊,每個模塊完成一個子功能,把這些模塊集成起來構(gòu)成一個整體,可以完成指定的功能意義: 組件復(fù)用，降低開發(fā)成本和維護成本組件單獨開發(fā)，方便分工合作模塊化遵循標準，方便自動化依賴管理，代碼優(yōu)化，部署這樣會導(dǎo)致模塊間的依賴問題, 于是有了CommonJS, AMD, CMD規(guī), 最后出現(xiàn)webpackwebpack就是前端模塊話的一種解決方案33.CommonJs，AMD，CMD規(guī)通行的js模塊規(guī)主要有2種: 瀏覽器端使用AMD、服務(wù)器端使用CommonJS34.對MVC、MVVM的理解MVC是比較直觀的架構(gòu)模式，用戶操作->View（負責(zé)接收用戶的輸入操作）->Controller（業(yè)務(wù)邏輯處理）->Model（數(shù)據(jù)持久化）->View（將結(jié)果反饋給View）MVVM是將“數(shù)據(jù)-模型-數(shù)據(jù)雙向綁定”的思想作為核心，因此在View和Model

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論