【前端面試題】01—42道常見的HTML5面試題(附答案)
時(shí)間：2023-10-02 04:42:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-10-02 04:42:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)
【前端面試題】01—42道常見的HTML5面試題(附答案)：HTML5為我們提供了更多的語(yǔ)義化標(biāo)簽、更豐富的元素屬性，以及更讓人欣喜的功能。但在面試中，HTML5部分的面試題主要考察應(yīng)試者對(duì)HTML5API的掌握情況，這是HTML5的重點(diǎn)，也正是這些API推動(dòng)了前端的發(fā)展。
這些新技術(shù)早已應(yīng)用在很多大型項(xiàng)目中。有些人認(rèn)為HTML5只是新增了一些語(yǔ)義化HTML標(biāo)簽，或者HTML5只是對(duì)HTML做了拓展，我們只須了解HTML相關(guān)知識(shí)的觀點(diǎn)是不正確的。
今天我們將跟大家分享42道HTML5的相關(guān)面試題。
1、HTML5有哪些新特性？移除了哪些元素？HTML5的新特性如下：- 拖放（ Drag and drop）APIl
- 語(yǔ)義化更好的內(nèi)容標(biāo)簽（ header、nav、 footer、 aside、 article、 section）
- 音頻、視頻（ audio、 video）API
- 畫布（ Canvas）API
- 地理（ Geolocation）APl
- 本地離線存儲(chǔ)（ localStorage），即長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失。
- 會(huì)話存儲(chǔ)（ sessionStorage），即數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除
- 表單控件包括 calendar、date、time、 email、url、 search。
- 新的技術(shù)包括 webwork、 websocket、 Geolocation
移除的元素如下：- 純表現(xiàn)的元素，包括 basefont,big、 center、font、s, strike,t、u
- 對(duì)可用性產(chǎn)生負(fù)面影響的元素，包括 frame、 frameset、 Noframes
2、如何處理HTML5新標(biāo)簽的瀏覽器兼容問(wèn)題？IE8、IE7、IE6支持用 document. create Element產(chǎn)生標(biāo)簽，可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽。瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式（最好的方式是直接使用成熟的框架，使用最多的是 html5shim框架），可以用 IE hack引入該框架
<！--[if 1t IE 9]><script>src="http://html5shim.googlecode.com/svn/trunk/htm15.js</script><！[end if]-->3、如何區(qū)別HTML和HTML5？用 DOCTYPE聲明新增的結(jié)構(gòu)元素和功能元素來(lái)區(qū)別它們。
4、什么是HTML5？HTML5是最新的HTML標(biāo)準(zhǔn)，它的主要目標(biāo)是提供所有內(nèi)容，而不需要任何Flash、 SilverLight等的額外插件，這些內(nèi)容來(lái)自動(dòng)畫、視頻、富GUI等
HTML5是萬(wàn)維網(wǎng)聯(lián)盟（W3C）和網(wǎng)絡(luò)超文本應(yīng)用技術(shù)工作組（ WHATWG）合作輸出的。
5、新的HTML5文檔類型和字符集是什么？HTML5文檔類型是<！doctype html>。
HTML5使用的字符集< meta charset="UTF8">。
6、HTML5 Canvas元素有什么作用？Canvas元素用于在網(wǎng)頁(yè)上繪制圖形，該元素標(biāo)簽的強(qiáng)大之處在于可以直接在HTML上進(jìn)行圖形操作。
7、HTML5新增了哪些功能AP？新增的功能API包括 Media APl、 Text Track API、 Application Cache API、User Interaction、 Data Transfer API、 Command API、 Constraint Validation API、 History API
8、HTML5的離線存儲(chǔ)有哪些？有以下離線存儲(chǔ)localStorage，可長(zhǎng)期存儲(chǔ)數(shù)據(jù)，即瀏覽器關(guān)閉后數(shù)據(jù)不丟失session Storage，數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除，
9、HTML5的form如何關(guān)閉自動(dòng)補(bǔ)全功能？將不想要提示的frm元素下的 Input元素的 autocomplete屬性設(shè)置為off
10、如何在HTML5頁(yè)面中嵌入音頻？HTML5包含了嵌入音頻文件的標(biāo)準(zhǔn)方式，支持的格式包括MP3、Wav和Ogg等，嵌入方式如下。
<audio controls><source src="icketang.mp3" type="audio/mpeg">Your browser does'nt support audio embedding feature.</audio>11、如何在HTML5頁(yè)面中嵌入視頻？和嵌入音頻文件一樣，HTML5定義了嵌入視頻的標(biāo)準(zhǔn)方式，支持的格式包括MP4、WebM和Ogg等，嵌入方式如下。
< video width=”450” height=”340” contro1s><source src="icketang.mp4" type="video/mp4">Your browser does'nt support video embedding feature.</video>12、HTML5引入了哪些新的表單屬性？新增表單屬性包括 datalist、 datetime、 output、 keygen、date、 month、week、time、 number、 range、 emailurl
13、如何顯示我們自己畫的一個(gè)彈框？可以用一個(gè)簡(jiǎn)單的方法，在頁(yè)面上單擊一個(gè)按鈕，彈出一個(gè)彈框，而彈框也是自己寫的一個(gè)div。單擊前，先把彈框隱藏， onclick事件發(fā)生之后就會(huì)顯示出來(lái)
14、HTML5應(yīng)用緩存和常規(guī)的HTML瀏覽器緩存有什么差別？HTML5應(yīng)用緩存最關(guān)鍵的就是支持離線應(yīng)用，可獲取少數(shù)或者全部網(wǎng)站內(nèi)容，包括HTML、CSS、圖像和 JavaScript腳本并存在本地。該特性提升了網(wǎng)站的性能，可通過(guò)如下方式實(shí)現(xiàn)。
<！doctype html><html manifest="example. appcache">......</html>與傳統(tǒng)的瀏覽器緩存比較，該特性并不強(qiáng)制要求用戶訪問(wèn)網(wǎng)站。
15、為什么HTML5里面不需要DTD（ Document Type Definition，文檔類型定義）？如果不放入<！doctype html>標(biāo)簽，HTML5還會(huì)工作嗎？HTML5沒有使用SGML或者 XHTML，它是一個(gè)全新的類型，因此不需要參考DTD。對(duì)于HTML5，僅須放置下面的文檔類型代碼，讓瀏覽器識(shí)別HTML5文檔。
如果不放入<！doctype html>標(biāo)簽，HTML5不會(huì)工作。瀏覽器將不能識(shí)別出它是HTML文檔，同時(shí)HTML5的標(biāo)簽將不能正常工作。
16、哪些瀏覽器支持HTML5？幾乎所有的瀏覽器（如 Safari、 Chrome、 Firefox、 Opera、IE）都支持HTML5
17、本地存儲(chǔ)和會(huì)話（事務(wù)）存儲(chǔ)之間的區(qū)別是什么？本地存儲(chǔ)數(shù)據(jù)持續(xù)永久，但是會(huì)話存儲(chǔ)在瀏覽器打開時(shí)有效，在瀏覽器關(guān)閉時(shí)會(huì)話重置存儲(chǔ)數(shù)據(jù)。
18、HTML5中的應(yīng)用緩存是什么？HTML5應(yīng)用緩存的最終目的是幫助用戶離線瀏覽頁(yè)面。換句話說(shuō)，如果網(wǎng)絡(luò)連接不可用，打開的頁(yè)面就來(lái)自瀏覽器緩存，離線應(yīng)用緩存可以幫助用戶達(dá)到這個(gè)目的。
應(yīng)用緩存可以幫助用戶指定哪些文件需要緩存，哪些不需要
19、如果把HTML5看成一個(gè)開放平臺(tái)，它的構(gòu)建模塊有哪些？如果把HTML5看成一個(gè)開放平臺(tái)，它的構(gòu)建模塊至少包括以下幾個(gè)，如<nav><header><section><footer>。
≤nav>標(biāo)簽用來(lái)將具有導(dǎo)航性質(zhì)的鏈接劃分在一起，使代碼結(jié)構(gòu)在語(yǔ)義化方面更加準(zhǔn)確
< header>標(biāo)簽用來(lái)定義文檔的頁(yè)眉。
< section>標(biāo)簽用來(lái)描述文檔的結(jié)構(gòu)。
< footer>標(biāo)簽用來(lái)定義頁(yè)腳。在典型情況下，該元素會(huì)包含文檔作者的姓名、文檔的創(chuàng)作日期和聯(lián)系信息
20、HTML5為什么只需要寫<！doctype htm>？HTML5不基于SGML，因此不需要對(duì)DTD進(jìn)行引用，但是需要 DOCTYPE來(lái)規(guī)范瀏覽器的行為（讓瀏覽器按照它們的方式來(lái)運(yùn)行）。而HTM4.01基于SGML，所以需要對(duì)DTD進(jìn)行引用，才能告知瀏覽器文檔所使用的類型。
21、HTML5應(yīng)用程序緩存為應(yīng)用帶來(lái)什么優(yōu)勢(shì)？應(yīng)用程序緩存為應(yīng)用帶來(lái)3個(gè)優(yōu)勢(shì)。
（1）離線瀏覽，讓用戶可在應(yīng)用離線時(shí)（網(wǎng)絡(luò)不可用時(shí)）使用它們。
（2）速度，讓已緩存資源加載得更快。
（3）減少服務(wù)器負(fù)載，讓瀏覽器將只下載服務(wù)器更新過(guò)的資源。
22、與HTML4比較，HTML5廢棄了哪些元素？廢棄的元素包括 frame、frameset、 noframe、 applet、big、 center和 basefont。
23、HTML5標(biāo)準(zhǔn)提供了哪些新的API？HTML5提供很多新的AP1，包括 Media APl、 Text Track API、 Application Cache API、 User InteractionAPI、 Data Transfer API、 Command APl、 Constraintion Validation API和 History API
24、請(qǐng)你說(shuō)一下 Web Worker和 WebSocket的作用。Web Worker的作用如下：
（1）通過(guò) worker= new Worker（url）加載一個(gè) JavaScript文件，創(chuàng)建一個(gè) Worker，同時(shí)返回一個(gè) Worker實(shí)例
（2）用 worker.postMessage（data）向 Worker發(fā)送數(shù)據(jù)
（3）綁定 worker.onmessage接收 Worker發(fā)送過(guò)來(lái)的數(shù)據(jù)
（4）可以使用 worker.terminate()終止一個(gè) Worker的執(zhí)行。
WebSocket的作用如下。
它是Web應(yīng)用程序的傳輸協(xié)議，提供了雙向的、按序到達(dá)的數(shù)據(jù)流。它是HTML5新増的協(xié)議， WebSocket的連接是持久的，它在客戶端和服務(wù)器之間保持雙工連接，服務(wù)器的更新可以及時(shí)推送到客戶端，而不需要客戶端以一定的時(shí)間間隔去輪詢。
25、如何實(shí)現(xiàn)瀏覽器內(nèi)多個(gè)標(biāo)簽頁(yè)之間的通信？在標(biāo)簽頁(yè)之間，調(diào)用 localstorge、 cookies等數(shù)據(jù)存儲(chǔ)，可以實(shí)現(xiàn)標(biāo)簽頁(yè)之間的通信
26、如何讓 Websocket兼容低版本瀏覽器？使用 Adobe Flash Socket、 ActiveX HTMLFile（E）、 multipart編碼發(fā)送XHR
與長(zhǎng)輪詢發(fā)送XHR等，可以實(shí)現(xiàn)不支持 WebSocket API的瀏覽器對(duì) Web Socket的兼容。
27、HTML5為瀏覽器提供了哪些數(shù)據(jù)存儲(chǔ)方案？在較高版本的瀏覽器中，提供了 sessionStorage：和 globalStorage。在HTML5規(guī)范中，用 localStorage取代 globalStorage 。
HTML5中的 Web Storage包括兩種存儲(chǔ)方式，分別是 sessionStorage和 localStorage。
sessionStorage用于在本地存儲(chǔ)一個(gè)會(huì)話（ session）中的數(shù)據(jù)，這些數(shù)據(jù)只有同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)，當(dāng)會(huì)話結(jié)來(lái)后，數(shù)據(jù)也隨之銷毀。因此 sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
localStorage用于持久化的本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
localStorage和 sessionStorage都具有相同的操作方法，例如 setItem、 getItem和removeltem等
28、請(qǐng)描述一下 sessionStorage和 localStorage的區(qū)別。sessionStorage用于在本地存儲(chǔ)一個(gè)會(huì)話中的數(shù)據(jù)，這些數(shù)據(jù)只有同一個(gè)會(huì)話中的頁(yè)面才能訪問(wèn)，當(dāng)會(huì)話結(jié)束后，數(shù)據(jù)也隨之銷毀。因此 sessionStorage不是一種持久化的本地存儲(chǔ)，僅僅是會(huì)話級(jí)別的存儲(chǔ)。
而 localstorage用于持久化本地存儲(chǔ)，除非主動(dòng)刪除數(shù)據(jù)，否則數(shù)據(jù)是永遠(yuǎn)不會(huì)過(guò)期的。
29、localStorage和 cookie的區(qū)別是什么？localStorage的概念和cookie相似，區(qū)別是 localStorage是為了更大容量的存儲(chǔ)設(shè)計(jì)的。cookie的大小是受限的，并且每次請(qǐng)求一個(gè)新頁(yè)面時(shí)， cookie都會(huì)被發(fā)送過(guò)去，這樣無(wú)形中浪費(fèi)了帶寬。另外， cookie還需要指定作用域，不可以跨域調(diào)用。
除此之外， localStorage擁有 setlten, getItem、 removeltem、 clear等方法， cookie則需要前端開發(fā)者自己封裝 setCookie和 get Cookie。但 cookie也是不可或缺的，因?yàn)?cookie的作用是與服務(wù)器進(jìn)行交互，并且還是HTP規(guī)范的一部分，而 localStorage僅因?yàn)槭菫榱嗽诒镜亍按鎯?chǔ)”數(shù)據(jù)而已，無(wú)法跨瀏覽器使用。
30、請(qǐng)你談?wù)?cookie的特點(diǎn)。cookie雖然為持久保存客戶端數(shù)據(jù)提供了方便，分擔(dān)了服務(wù)器存儲(chǔ)的負(fù)擔(dān)，但是有以下局限性。
（1）每個(gè)特定的域名下最多生成20個(gè) cookie。
（2）IE6或更低版本最多有20個(gè) cookie。
（3）IE7和之后的版本最多可以有50個(gè) cookie。
（4） Firefox最多可以有50個(gè) cookie。
（5） Chrome和 Safari沒有做硬性限制。
IE和 Opera會(huì)清理近期最少使用的 cookie, Firefox會(huì)隨機(jī)清理 cookie。
cookie最大為4096字節(jié)，為了兼容性，一般不能超過(guò)4095字節(jié)。
IE提供了一種存儲(chǔ)方式，可以讓用戶數(shù)據(jù)持久化，叫作 userdata，從IE5.0就開始支持此功能。每塊數(shù)據(jù)最多128KB，每個(gè)域名下最多1MB。這個(gè)持久化數(shù)據(jù)放在緩存中，如果緩存沒有被清理，就會(huì)一直存在。
優(yōu)點(diǎn)如下：
（1）通過(guò)良好的編程，控制保存在 cookie中的 session對(duì)象的大小。
（2）通過(guò)加密和安全傳輸技術(shù)（SSL），降低 cookie被破解的可能性。
（3）只在 cookie中存放不敏感數(shù)據(jù)，即使被盜也不會(huì)有重大損失。
（4）控制 cookie的生命周期，使之不會(huì)永遠(yuǎn)有效。數(shù)據(jù)偷盜者很可能得到一個(gè)過(guò)期的 cookie。
缺點(diǎn)如下：
（1）“ cookie”的數(shù)量和長(zhǎng)度有限制。每個(gè) domain最多只能有20條 cookie，每個(gè)cookie的長(zhǎng)度不能超過(guò)4KB，否則會(huì)被截掉。
（2）安全性問(wèn)題。如果 cookie被別人攔截了，就可以取得所有的 session信息。即使加密也于事無(wú)補(bǔ)，因?yàn)閿r截者并不需要知道 cookie的意義，他只要原樣轉(zhuǎn)發(fā) cookie就可以達(dá)到目的。
（3）有些狀態(tài)不可能保存在客戶端。例如，為了防止重復(fù)提交表單，我們需要在服務(wù)器端保存一個(gè)計(jì)數(shù)器。如果把這個(gè)計(jì)數(shù)器保存在客戶端，那么它起不到任何作用
31、cookie和 session的區(qū)別是什么？區(qū)別如下：
（1） cookie數(shù)據(jù)存放在客戶的瀏覽器上， session數(shù)據(jù)存放在服務(wù)器上。
（2） cookie不是很安全，別人可以分析存放在本地的 cookie并進(jìn)行 cookie欺騙?？紤]到安全問(wèn)題應(yīng)當(dāng)使用 session。
（3） session會(huì)在一定時(shí)間內(nèi)保存在服務(wù)器上。當(dāng)訪問(wèn)增多時(shí)，會(huì)占用較多服務(wù)器的資源。為了減輕服務(wù)器的負(fù)擔(dān)，應(yīng)當(dāng)使用 cookie。
（4）單個(gè) cookie保存的數(shù)據(jù)不能超過(guò)4KB，很多瀏覽器都限制一個(gè)站點(diǎn)最多保存20個(gè) cookie。
所以個(gè)人建議可以將登錄信息等重要信息存放在 session中，其他信息（如果需要保留）可以存放在 cookie中。
32、什么是SVG？SVG即可縮放失量圖形（ Scalable Vector Graphics）。它是基于文本的圖形語(yǔ)言，使用文本、線條、點(diǎn)等來(lái)繪制圖像，這使得它輕便、顯示迅速。
33、Canvas和SvG的區(qū)別是什么？兩者的區(qū)別如下：
（1）一旦 Canvas繪制完成將不能訪問(wèn)像素或操作它；任何使用SVG繪制的形狀都能被記憶和操作，可以被瀏覽器再次顯示。
（2） Canvas對(duì)繪制動(dòng)畫和游戲非常有利；SVG對(duì)創(chuàng)建圖形（如CAD）非常有利。
（3）因?yàn)椴恍枰涀∫院笫虑?，所?Canvas運(yùn)行更快；因?yàn)闉榱酥蟮牟僮?，SVG需要記錄坐標(biāo)，所以運(yùn)行比較緩慢。
（4）在 Canvas中不能為繪制對(duì)象綁定相關(guān)事件；在SVG中可以為繪制對(duì)象綁定相關(guān)事件。
（5） Canvas繪制出的是位圖，因此與分辨率有關(guān)；SvG繪制出的是矢量圖，因此與分辨率無(wú)關(guān)。
34、如何使用 Canvas和HTML5中的SVG畫一個(gè)矩形？使用SVG繪制矩形的代碼如下：
<svg xmlns=http://www.w3.org/2000/svg version="1.1"><rect style="fill:rgb（255,100，0）；"height=200" width="400"></rect></svg>使用 Canvas繪制矩形的代碼如下。
<canvas id="myCanvas" width=500" height="500"></canvas>var canvas=document.getElementById（'mycanvas'）；var ctx= canvas.getContext（'2d'）； ctx.rect（100,100,300,200）；ctx fillstyle = 'pink 'ctx. fill()35、本地存儲(chǔ)的數(shù)據(jù)有生命周期嗎？本地存儲(chǔ)的數(shù)據(jù)沒有生命周期，它將一直存儲(chǔ)數(shù)據(jù)，直到用戶從瀏覽器清除或者使用 JavaScript代碼移除。
36、HTML5中如何實(shí)現(xiàn)應(yīng)用緩存？首先，需要指定“ manifest”文件，" manifest”文件幫助你定義緩存如何工作以下是“ manifest”文件的結(jié)構(gòu)。
CACHE MANTEEST # version 1.0/demo. css/demo. js/demo.png所有 manifest文件都以” CACHE MANIFEST"語(yǔ)句開始。#（散列標(biāo)簽）有助于提供緩存文件的版本。manifest文件的內(nèi)容類型應(yīng)是"text/ cache- manifest”。創(chuàng)建一個(gè)緩存 manifest文件后，在HTML頁(yè)面中提供 manifest鏈接，代碼如下所示。
<html manifest="icketang. appcache">
第一次運(yùn)行以上文件時(shí)，它會(huì)添加到瀏覽器應(yīng)用緩存中，在服務(wù)器宕機(jī)時(shí)，頁(yè)面從應(yīng)用緩存中獲取數(shù)據(jù)。
37、如何刷新瀏覽器的應(yīng)用緩存？應(yīng)用緩存通過(guò)變更“#”標(biāo)簽后的版本號(hào)來(lái)刷新，如下所示：
CACHE MANIFEST # version 2.0/icketang.css/icketang.js/icketang. pngNETWORK： login. php38、應(yīng)用緩存中的回退是什么？應(yīng)用緩存中的回退會(huì)幫助你指定在服務(wù)器不可訪問(wèn)時(shí)，顯示某文件。例如在下面的manifest文件中，如果用戶輸入了“/home”，同時(shí)服務(wù)器不可到達(dá)，“404htm”文件應(yīng)送達(dá)。
FALLBACK：/home//404. html39、應(yīng)用緩存中網(wǎng)絡(luò)命令的作用是什么？網(wǎng)絡(luò)命令描述不需要緩存的文件，例如以下代碼中“ login.php”始終都不應(yīng)該緩存或者離線訪問(wèn)。
NETWORK login. php40、什么是 Websql？Websql是一個(gè)在瀏覽器客戶端的結(jié)構(gòu)關(guān)系數(shù)據(jù)庫(kù)，是瀏覽器內(nèi)的本地 RDBMS（關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)），可以使用SQL查詢。
41、Websql是HTML5的一個(gè)規(guī)范嗎？不是，許多人把它標(biāo)記為HTML5，但是它不是HTML5規(guī)范的一部分，這個(gè)規(guī)范是基于 SQLite的
42、HTML5如何實(shí)現(xiàn)跨域？在服務(wù)器端設(shè)置允許在其他域名下訪問(wèn)，例如允許所有域名訪問(wèn)以下內(nèi)容。
response.setHeader（"Access-Control-Allow-Origin"，"*"）；response.setHeader （"Access-Control-Allow-Methods"，"POST"）；response.setHeader（"Access-Control-Allow-Headers"，"x-requested-with, content-type"）；面試題資料我已經(jīng)給大家打包好了！??！
在線咨詢
