前端面試題大全html篇

1、- -1.XHTML 和 HTML 有什么區(qū)分HTML 是一種 根本的 WEB 網(wǎng)頁(yè)設(shè)計(jì)語言 ,XHTML 要的不同：1XHTML 元素必需被 正確地嵌套 2XHTML 元素必需被 關(guān)閉 3XHTML 標(biāo)簽名必需 用小寫字母 4XHTML 文檔必需擁有 根元素2.什么是語義化的 HTML. 是一個(gè) 基于 XML 的置標(biāo)語言 ；最主html5 的語義化是指用正確的標(biāo)簽包含正確的容,比方 nav 標(biāo)簽就應(yīng)當(dāng)包含導(dǎo)航條容1直觀的熟悉標(biāo)簽 對(duì)于搜尋引擎的抓取有好處,用正確的標(biāo)簽做正確的事情！2html 語義化 就是讓頁(yè)面的容構(gòu)造化,便于對(duì)瀏覽器、搜尋引擎解析3在沒有 CCS 樣式情形下也以一種文檔格式

2、顯示,并且是簡(jiǎn)潔閱讀的；搜尋引擎的爬蟲依靠于標(biāo)記來確定上下和各個(gè)關(guān)鍵字的權(quán)重,利于 SEO；4使閱讀源代碼的人更簡(jiǎn)潔將分塊,便于閱讀保護(hù)懂得；寫一段語義的 html 代碼 HTML5 中新增加的許多標(biāo)簽如： 、 、 和 等；就是基于語義化設(shè)計(jì)原那么 標(biāo)題 專心 Web 前端技術(shù) 語義 HTML 具有以下 特性 ：文字包裹在元素中,用以反映容；例如：段落包含在 元素中；次序表包含在 元素中；從其他來源引用的大型文字塊包含在 元素中；HTML 元素不能用作語義用途以外的其他目的；例如： 包含標(biāo)題,但并非用于放大文本； 包含大段引述,但并非用于文本縮進(jìn)；空白段落元素 并非用于跳行；文本并不直接包含任

3、何樣式信息；例如：不使用 或 等格式標(biāo)記；類或 ID 中不引用顏色或位置；3.常見的瀏覽器核有哪些？Trident 核：IE, Max Thon, TT, The World,360, 搜狗瀏覽器等；又稱 MSHTML Gecko 核：Netscape6及以上版本, FF, Mozilla Suite / Sea Monkey 等 Presto 核 ：Opera7 及以上； Opera 核原為： Presto,現(xiàn)為： Blink; Webkit 核：Safari, Chrome等； Chrome 的： Blink WebKit 的分支 - . word.zl- -4.HTML5 有哪些新特性、

4、移除了那些元素？如何區(qū)分 HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集；HTML 和 HTML5 ？主要是關(guān)于圖像,位置,儲(chǔ)備,多任務(wù)等功能的增加：1標(biāo)簽語義化 如 header,footer,nav,aside,article,section,新增許多表單元素,如 email,url 2音視頻元素 video, audio 不需要在依靠外部的插件就可以往網(wǎng)頁(yè)中參與音 / 視頻元素3新增許多 api 如獵取用戶地理位置的window.navigator.geoloaction 4webstorage 本地儲(chǔ)備,儲(chǔ)備在客戶端,包括 localeStorage和 sessionStorage5web

5、socket 一種協(xié)議,可以讓我們建立客戶端到效勞器端的全雙工通信,這就意味著效勞器端可以主動(dòng)推送數(shù)據(jù)到客戶端6webworker 是運(yùn)行在瀏覽器后臺(tái)的js 程序,是另開的一個(gè)線程,不影響主程序運(yùn)行可用 webworker 執(zhí)行復(fù)雜的數(shù)據(jù)操作,再把操作結(jié)果通過 postMessage傳遞給主線程這樣在進(jìn)展復(fù)雜且耗時(shí)的操作時(shí)就不會(huì)堵塞主線程了 7緩存 html5 答應(yīng)我們自己掌握哪些文件需要緩存,哪些不需要,詳細(xì)的做法如下 : 1 第一給 html 添加 manifest 屬性,并賦值為 cache.manifest 2 cache.manifest的容為 : CACHE MANIFEST #v

6、1.2 CACHE : / 表示需要緩存的文件a.js b.js NETWORK: / 表示只在用戶在線的時(shí)候才需要的文件,不會(huì)緩存c.js FALLBACK / 表示假如找不到第一個(gè)資源就用其次個(gè)資源代替index.html 移除的元素：純表現(xiàn)的元素 basefont,big,center,font, s,strike,tt, u；對(duì)可用性產(chǎn)生負(fù)面影響的元素frame, frameset,noframes；多個(gè)頁(yè)面之間如何進(jìn)展通信 使用 cookie,使用 web worker,使用 localeStorage和 sessionStorage 5.區(qū)分 HTML 和 HTML5 a 在文檔類

7、型聲明 上, html 有很長(zhǎng)的一段代碼,html5 卻只有簡(jiǎn)潔的聲明html:html5: b 在構(gòu)造語義 上html 沒有表達(dá)構(gòu)造語義化的標(biāo)簽通常都是 這樣來命名的,這樣表示的頭部；Html5 有表達(dá)構(gòu)造語義化的標(biāo)簽處理 HTML5 新標(biāo)簽的瀏覽器兼容問題最好的方式是直接使用成熟的框架如html5shim . word.zl-6.請(qǐng)描述一下cookies,sessionStorage 和 localStorage 的區(qū)分？- - -cookie 儲(chǔ)備在客戶端大小受限 ,并且每次你懇求一個(gè)新的頁(yè)面時(shí)Cookie 都會(huì)被發(fā)送,鋪張帶寬；需指定作用域 ,不行以跨域調(diào)用；有肯定的過期時(shí)間,過期后自

8、動(dòng)會(huì)消逝作用是與效勞器進(jìn)展交互, 作為 規(guī)的一局部而存在web Storage儲(chǔ)備在客戶端是為更大容量?jī)?chǔ)備設(shè)計(jì)的 8M, cookie 4K擁有 setItem,getItem,removeItem,clear 等方法 cookie 需要開發(fā)者自己封裝 setCookie,getCookie 作用是在本地“ 儲(chǔ)備數(shù)據(jù)sessionStorage會(huì)話級(jí)別 的儲(chǔ)備, 僅用于在本地儲(chǔ)備一個(gè)會(huì)話session中的數(shù)據(jù) ,這些數(shù)據(jù)只有在同一個(gè)會(huì)話中的頁(yè)面才能拜訪并且當(dāng)會(huì)話完畢后數(shù)據(jù)也隨之銷毀；localStorage用于長(zhǎng)久化的本地儲(chǔ)備,除非主動(dòng)刪除數(shù)據(jù), 否那么數(shù)據(jù)是永久不會(huì)過期的；7.如何實(shí)現(xiàn)瀏覽器

9、多個(gè)標(biāo)簽頁(yè)之間的通信 . 調(diào)用 localstorge、cookies 等本地儲(chǔ)備方式；8.HTML5 為什么只需要寫 .DOCTYPE HTML ？型HTML4.01 基于 SGML,所以需要對(duì)DTD 進(jìn)展引用 ,才能告知瀏覽器文檔所使用的文檔類讓HTML5 不基于 SGML, 因此不需對(duì)DTD 進(jìn)展引用 ,但需要 doctype 來規(guī)瀏覽器的行為瀏覽器依據(jù)它們應(yīng)當(dāng)?shù)姆绞絹磉\(yùn)行 ；9.Doctype 作用？標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)分 . .DOCTYPE 聲明 位于 HTML 文檔第一行 ,處于 html 標(biāo)簽之前； 告知瀏覽器的解析器用什么文檔標(biāo)準(zhǔn)解析這個(gè)文檔；DOCTYPE 不存在或

10、格式不正確會(huì)導(dǎo)致文檔以兼容模式出現(xiàn)；標(biāo)準(zhǔn)模式的排版 和 JS運(yùn)作模式都是以該瀏覽器支持的最高標(biāo)準(zhǔn)運(yùn)行；在兼容模式中,頁(yè)面以寬松的向后兼容的方式顯示 無法工作；,模擬老式瀏覽器的行為以防止站點(diǎn)10.Doctype 中區(qū)分嚴(yán)格模式與混雜模式有什么意義？嚴(yán)格模式： 使用此類型的網(wǎng)頁(yè),瀏覽器解析將相對(duì)嚴(yán)格,不答應(yīng)使用任何表現(xiàn)樣式的標(biāo)識(shí)和屬性 ,比方在元素中直接使用background-color 背風(fēng)光屬性；混雜模式：瀏覽器對(duì)XHTML的解析較為寬松；答應(yīng)使用4.01 中的標(biāo)簽,但必需符合XHTML的語法 ；參與 XMl 聲明可觸發(fā). word.zl-如何觸發(fā)這兩種模式？- - -11.簡(jiǎn)述一下 sr

11、c與 href 的區(qū)分href 是指向網(wǎng)絡(luò)資源所在位置,建立和當(dāng)前元素錨點(diǎn) 或當(dāng)前文檔 之間的用于超 src 是指向外部資源所在位置,指向的容將會(huì)嵌入到文檔中當(dāng)前標(biāo)簽所在位置在懇求 src 資源時(shí)會(huì)將其指向的資源下載并應(yīng)用到文檔,例如 js 腳本 , img 圖片和 frame 等元素 當(dāng)瀏覽器解析到該元素時(shí),會(huì)暫停其他資源的下載和處理,直到將該資源加載、編譯、執(zhí)行完畢 這就是為什么將 js 腳本放在底部而不是頭部 12、簡(jiǎn)述同步和異步的區(qū)分同步是堵塞模式 : 指一個(gè)進(jìn)程在執(zhí)行某個(gè)懇求的時(shí)候,假設(shè)該懇求需要一段時(shí)間才能返回信息,那么這個(gè)進(jìn)程將會(huì)始終等待下去,直到收到返回信息才連續(xù)執(zhí)行下去；異步

12、是非堵塞模式 :指進(jìn)程不需要始終等下去,而是連續(xù)執(zhí)行下面的操作,不管其他進(jìn)程的狀態(tài)； 當(dāng)有消息返回時(shí)系統(tǒng)會(huì)通知進(jìn)程進(jìn)展處理13、什么叫漸進(jìn)增強(qiáng)和文雅降級(jí)？漸進(jìn)增強(qiáng) progressive enhancement: ,這樣可以提高執(zhí)行的效率；針對(duì)低版本瀏覽器進(jìn)展構(gòu)建頁(yè)面,保證最根本的功能,然后再 針對(duì)高級(jí)瀏覽器進(jìn)展成效、交互等改良和追加功能 到達(dá)更好的用戶體驗(yàn)；文雅降級(jí) graceful degradation：一開場(chǎng)就構(gòu)建完整的功能,然后再針對(duì)低版本瀏覽器進(jìn)展兼容；區(qū)分 : a. 文雅降級(jí)是從 復(fù)雜 的現(xiàn)狀開場(chǎng),并試圖削減 用戶體驗(yàn)的供應(yīng)b. 漸進(jìn)增強(qiáng)那么是從一個(gè)特別根底 的,能夠起作用的版本

13、開場(chǎng),并不斷擴(kuò)大 ,以適應(yīng)將來環(huán)境的需要c. 降級(jí)功能衰減意味著往回看 ；而漸進(jìn)增強(qiáng)那么意味著朝前看 ,同時(shí)保證其根基處于平安地帶14.瀏覽器渲染原理1第一獵取html , HTML被解析成 DOM Tree ,CSS被解析成 CSS Rule Tree 2把 DOM Tree 和 CSS Rule Tree經(jīng)過整合生成Render Tree布局階段3元素依據(jù)算出來的規(guī)那么,把元素放到它該顯現(xiàn)的位置,通過顯卡畫到屏幕上15.對(duì) WEB 標(biāo)準(zhǔn)以及 W3C 的懂得與熟悉標(biāo)簽閉合、標(biāo)簽小寫、不亂嵌套、使用外鏈css和 js 腳本. word.zl- - -構(gòu)造行為表現(xiàn)別離、加快文件下載與頁(yè)面速度更少

14、的代碼和組件,簡(jiǎn)潔保護(hù)、改版便利,提高易用性16.Restful API 是什么Restful 的意思就是資源表現(xiàn)層狀態(tài)轉(zhuǎn)化；資源 : 就是網(wǎng)絡(luò)上的一個(gè)實(shí)體,或者說網(wǎng)絡(luò)上的一個(gè)詳細(xì)信息；它可以是一段文本、一圖片、一首歌曲、一種效勞,總之就是一個(gè)詳細(xì)的實(shí)在,每一個(gè) URI 代表一種資源 Resources；表現(xiàn)層 : 其實(shí)指的是 資源 的 表現(xiàn)層 ,把 資源 詳細(xì)出現(xiàn)出來的形式,叫做它的 表現(xiàn)層Representation；假如客戶端想要操作效勞器,必需通過某種手段,讓效勞器端發(fā)生 狀態(tài)轉(zhuǎn)化 State Transfer；而這種轉(zhuǎn)化是建立在表現(xiàn)層之上的,所以就是 表現(xiàn)層狀態(tài)轉(zhuǎn)化 ；Restful

15、 就是客戶端和效勞器之間,傳遞這種資源的某種表現(xiàn)層客戶端通過四個(gè)動(dòng)詞,對(duì)效勞器端資源進(jìn)展操作,實(shí)現(xiàn) 表現(xiàn)層狀態(tài)轉(zhuǎn)化 Restful API 就是符合 Restful 架構(gòu)的 API 設(shè)計(jì)；Restful API 一些詳細(xì)實(shí)踐：應(yīng)當(dāng)盡量將API 部署在專用域名之下；不應(yīng)當(dāng)在 URL 中包含動(dòng)詞 或?qū)?API 的版本號(hào) 放入 URL 17. 的 defer、async的區(qū)分defer 是在 HTML 解析完之后才會(huì)執(zhí)行,假如是多個(gè),依據(jù)加載的次序依次執(zhí)行async是在加載完成后立刻執(zhí)行,假如是多個(gè),執(zhí)行次序和加載次序無關(guān)18.同源與跨域什么是同源策略？一段腳本只能讀取來自于同一來源的窗口和文檔的屬

16、性 機(jī)名、協(xié)議和端口號(hào)的組合跨域通信的幾種方式 jsonp 跨域 Hash CORS 跨源資源共享 websocket跨域設(shè)置代理效勞器,這里的同一來源指的是主postMessage跨域 : 包含 iframe 的頁(yè)面對(duì) iframe 傳遞消息JSONP 原理：利用 script 標(biāo)簽的異步加載特性實(shí)現(xiàn) , 給效勞端傳一個(gè)回調(diào)函數(shù) , 效勞器返回一個(gè)傳遞過去的回調(diào)函數(shù)名稱的 JS代碼jsonp 不是真正的 ajaxajax是頁(yè)面無刷新懇求數(shù)據(jù)操作- . word.zl- -19.UTF-8 和 Unicode 的區(qū)分29.UTF-8 和 Unicode 的區(qū)分UTF-8 是使用最廣的一種uni

17、code 的實(shí)現(xiàn)方式；8 個(gè)位傳輸數(shù)據(jù),而UTF-16 就是Unicode 用于統(tǒng)一地區(qū)性文字編碼；UTF-8 就是每次每次 16 個(gè)位20.一次完整的 事務(wù)是怎樣的一個(gè)過程？根本流程：a. 域名解析b. 發(fā)起 TCP 的 3 次握手c. 建立 TCP 連接后發(fā)起 懇求d. 效勞器端響應(yīng) 懇求,瀏覽器得到 html 代碼e. 瀏覽器解析 html 代碼,并懇求 html 代碼中的資源f. 瀏覽器對(duì)頁(yè)面進(jìn)展渲染出現(xiàn)給用戶21.前端頁(yè)面有哪三層構(gòu)成,分別是什么 .作用是什么 . 構(gòu)造層 : HTML/XHTMLDOM 節(jié)點(diǎn) 樣式層 : CSS頁(yè)面渲染 腳本層： JS/AS頁(yè)面動(dòng)畫成效 22.標(biāo)簽上

18、 title 與 alt 屬性的區(qū)分是什么 . alt 當(dāng)圖片不顯示時(shí),用文字代表；title 為該屬性供應(yīng)信息23.瀏覽器標(biāo)準(zhǔn)模式和怪異模式之間的區(qū)分是什么 . 盒子模型 渲染模式的不同使用 window.top.document.patMode 可顯示為什么模式24.來治理全部 CSS文件、 JS與圖片 . 全部的 CSS文件都放入一個(gè)樣式表 中,削減 懇求js 文件也采納同樣的方法全部的背景圖像都放到一個(gè)圖片文件中,通過background-image和 background-position 屬性來顯示圖片的不同局部25.前端優(yōu)化提高網(wǎng)頁(yè)的加載速度1 使用 css sprites, 有

19、效的削減 懇求數(shù)2 使用緩存3 壓縮 js, css文件 , 減小文件體積4 使用 cdn, 減小效勞器負(fù)擔(dān)5 懶加載圖片6 預(yù)加載 css, js文件7 防止 dom 構(gòu)造的深層次嵌套8 給 DOM 元素添加樣式時(shí) , 把樣式放到類中 , 直接給元素添加類 , 削減重構(gòu)和回流26. 你怎么來實(shí)現(xiàn)頁(yè)面設(shè)計(jì)圖,你認(rèn)為前端應(yīng)當(dāng)如何高質(zhì)量完成工作 . - . word.zl- -頁(yè)面設(shè)計(jì)圖 :第一劃分成頭部、body、腳部 . 高質(zhì)量完成工作 : 1 實(shí)現(xiàn)成效圖 是最根本的工作,精確到 2px 2 與設(shè)計(jì)師,產(chǎn)品經(jīng)理的溝通和工程的參與3 做好的頁(yè)面構(gòu)造,頁(yè)面重構(gòu)和用戶體驗(yàn)4 處理 hack,兼容、寫

20、出美麗的代碼格式5 針對(duì)效勞器的優(yōu)化、擁抱 HTML5 ；27.iframe 有那些缺點(diǎn)？*iframe 會(huì)堵塞主頁(yè)面的 onload 大事；*iframe 和主頁(yè)面共享連接池,而瀏覽器對(duì)一樣域的連接有限制,所以會(huì)影響頁(yè)面的并行加載；使用 iframe 之前需要考慮這兩個(gè)缺點(diǎn)；假如需要使用iframe,最好是通過javascript 動(dòng)態(tài)給 iframe 添加 src 屬性值,這樣可以可以繞開以上兩個(gè)問題；28.WEB 應(yīng)用從效勞器主動(dòng)推送 html5 websoket WebSocket通過 Flash XHR 長(zhǎng)時(shí)間連接 XHR Multipart Streaming 不行見的 Ifram

21、e Data 到客戶端有那些方式？ 標(biāo)簽的長(zhǎng)時(shí)間連接 可跨域 29.JSON 的明白JSONJavaScript Object Notation是一種輕量級(jí)的數(shù)據(jù)交換格式；它是基于 JavaScript的一個(gè)子集；數(shù)據(jù)格式簡(jiǎn)潔 age:12, name:back 30.異步加載的方式 1 defer只支持 IE 2 async 3 動(dòng)態(tài)創(chuàng)立 DOM 用得最多, 易于讀寫 , 占用帶寬小4 創(chuàng)立 script,插入到 DOM 中,加載完畢后進(jìn)展回調(diào) 31 xss、csrf 的概念 以及防方法大公司如 bat 在面試的時(shí)候,web 平安問題是必問的問題,所以肯定要懂 要完全懂得 xss和 csrf

22、 的概念和防方式,最好在工程中有用到對(duì)這兩種攻擊的防,這樣 會(huì)給你的面試加許多分 由 xss 和 csrf 涉及的東西比擬多,我就不詳細(xì)給出了,詳情請(qǐng)看網(wǎng)頁(yè) : XSS攻擊及防備,CSRF攻擊 32.談?wù)剬?duì)前端模塊化的懂得模塊化是 把 js 程序劃分成獨(dú)立命名、可獨(dú)立拜訪的模塊,每個(gè)模塊完成一個(gè)子功能,把這些模塊集成起來構(gòu)成一個(gè)整體 ,可以完成指定的功能- . word.zl- -意義 : 組件復(fù)用,降低開發(fā)本錢和保護(hù)本錢組件單獨(dú)開發(fā),便利分工合作模塊化遵循標(biāo)準(zhǔn),便利自動(dòng)化依靠治理,代碼優(yōu)化,部署這樣會(huì)導(dǎo)致模塊間的依靠問題 , 于是有了 monJS, AMD, CMD 規(guī), 最終顯現(xiàn) webp

23、ack webpack就是前端模塊話的一種解決方案33.monJs, AMD ,CMD 規(guī)通行的 js 模塊規(guī)主要有2 種:瀏覽器端使用AMD 、效勞器端使用monJS 34.對(duì) MVC 、MVVM 的懂得MVC 是比擬直觀的架構(gòu)模式,用戶操作 -View負(fù)責(zé)接收用戶的輸入操作-Controller業(yè)務(wù)規(guī)律處理 -Model 數(shù)據(jù)長(zhǎng)久化-View 將結(jié)果反響給 ViewMVVM 是 將“ 數(shù)據(jù) -模型 -數(shù)據(jù)雙向綁定的思想作為核心,因此 在 View 和 Model 之間沒有聯(lián)系, 通過 ViewModel 進(jìn)展交互 ,而且 Model 和 ViewModel 之間的交互是雙向的,因此視圖的數(shù)據(jù)的變化會(huì)同時(shí)