【前端面試題】01—42道常見的HTML5面試題(附答案)

2021-03-02 web前端開發

HTML5為我們提供了更多的語義化標籤、更豐富的元素屬性,以及更讓人欣喜的功能。但在面試中,HTML5部分的面試題主要考察應試者對HTML5API的掌握情況,這是HTML5的重點,也正是這些API推動了前端的發展。
有些人認為HTML5隻是新增了一些語義化HTML標籤,或者HTML5隻是對HTML做了拓展,我們只須了解HTML相關知識的觀點是不正確的。今天我們將跟大家分享42道HTML5的相關面試題。

拖放( Drag and drop)APIl

語義化更好的內容標籤( header、nav、 footer、 aside、 article、 section)

音頻、視頻( audio、 video)API

畫布( Canvas)API

地理( Geolocation)APl

本地離線存儲( localStorage),即長期存儲數據,瀏覽器關閉後數據不丟失。

會話存儲( sessionStorage),即數據在瀏覽器關閉後自動刪除

表單控制項包括 calendar、date、time、 email、url、 search。

新的技術包括 webwork、 websocket、 Geolocation

純表現的元素,包括 basefont,big、 center、font、s, strike,t、u

對可用性產生負面影響的元素,包括 frame、 frameset、 Noframes

IE8、IE7、IE6支持用 document. create Element產生標籤,可以利用這一特性讓這些瀏覽器支持HTML5新標籤。瀏覽器支持新標籤後,還需要添加標籤默認的樣式(最好的方式是直接使用成熟的框架,使用最多的是 html5shim框架),可以用 IE hack引入該框架
<!--[if 1t IE 9]><script>src="http://html5shim.googlecode.com/svn/trunk/htm15.js</script><![end if]-->

3、如何區別HTML和HTML5?

用 DOCTYPE聲明新增的結構元素和功能元素來區別它們。

4、什麼是HTML5?

HTML5是最新的HTML標準,它的主要目標是提供所有內容,而不需要任何Flash、 SilverLight等的額外插件,這些內容來自動畫、視頻、富GUI等

HTML5是全球資訊網聯盟(W3C)和網絡超文本應用技術工作組( WHATWG)合作輸出的。

5、新的HTML5文檔類型和字符集是什麼?

HTML5文檔類型是<!doctype html>。

HTML5使用的字符集< meta charset="UTF8">。

6、HTML5 Canvas元素有什麼作用?

Canvas元素用於在網頁上繪製圖形,該元素標籤的強大之處在於可以直接在HTML上進行圖形操作。

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的離線存儲有哪些?

有以下離線存儲localStorage,可長期存儲數據,即瀏覽器關閉後數據不丟失session Storage,數據在瀏覽器關閉後自動刪除,

9、HTML5的form如何關閉自動補全功能?

將不想要提示的frm元素下的 Input元素的 autocomplete屬性設置為off

10、如何在HTML5頁面中嵌入音頻?

HTML5包含了嵌入音頻文件的標準方式,支持的格式包括MP3、Wav和Ogg等,嵌入方式如下。

<audio controls><source src="icketang.mp3" type="audio/mpeg">Your browser does'nt support audio embedding feature.</audio>

11、如何在HTML5頁面中嵌入視頻?

和嵌入音頻文件一樣,HTML5定義了嵌入視頻的標準方式,支持的格式包括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、如何顯示我們自己畫的一個彈框?

可以用一個簡單的方法,在頁面上單擊一個按鈕,彈出一個彈框,而彈框也是自己寫的一個div。單擊前,先把彈框隱藏, onclick事件發生之後就會顯示出來

14、HTML5應用緩存和常規的HTML瀏覽器緩存有什麼差別?

HTML5應用緩存最關鍵的就是支持離線應用,可獲取少數或者全部網站內容,包括HTML、CSS、圖像和 JavaScript腳本並存在本地。該特性提升了網站的性能,可通過如下方式實現。

<!doctype html><html manifest="example. appcache">.</html>

與傳統的瀏覽器緩存比較,該特性並不強制要求用戶訪問網站。

15、為什麼HTML5裡面不需要DTD( Document Type Definition,文檔類型定義)?如果不放入<!doctype html>標籤,HTML5還會工作嗎?

HTML5沒有使用SGML或者 XHTML,它是一個全新的類型,因此不需要參考DTD。對於HTML5,僅須放置下面的文檔類型代碼,讓瀏覽器識別HTML5文檔。

如果不放入<!doctype html>標籤,HTML5不會工作。瀏覽器將不能識別出它是HTML文檔,同時HTML5的標籤將不能正常工作。

16、哪些瀏覽器支持HTML5?

幾乎所有的瀏覽器(如 Safari、 Chrome、 Firefox、 Opera、IE)都支持HTML5

17、本地存儲和會話(事務)存儲之間的區別是什麼?

本地存儲數據持續永久,但是會話存儲在瀏覽器打開時有效,在瀏覽器關閉時會話重置存儲數據。

18、HTML5中的應用緩存是什麼?

HTML5應用緩存的最終目的是幫助用戶離線瀏覽頁面。換句話說,如果網絡連接不可用,打開的頁面就來自瀏覽器緩存,離線應用緩存可以幫助用戶達到這個目的。

應用緩存可以幫助用戶指定哪些文件需要緩存,哪些不需要

19、如果把HTML5看成一個開放平臺,它的構建模塊有哪些?

如果把HTML5看成一個開放平臺,它的構建模塊至少包括以下幾個,如<nav><header><section><footer>。

≤nav>標籤用來將具有導航性質的連結劃分在一起,使代碼結構在語義化方面更加準確

< header>標籤用來定義文檔的頁眉。

< section>標籤用來描述文檔的結構。

< footer>標籤用來定義頁腳。在典型情況下,該元素會包含文檔作者的姓名、文檔的創作日期和聯繫信息

20、HTML5為什麼只需要寫<!doctype htm>?

HTML5不基於SGML,因此不需要對DTD進行引用,但是需要 DOCTYPE來規範瀏覽器的行為(讓瀏覽器按照它們的方式來運行)。而HTM4.01基於SGML,所以需要對DTD進行引用,才能告知瀏覽器文檔所使用的類型。

21、HTML5應用程式緩存為應用帶來什麼優勢?

應用程式緩存為應用帶來3個優勢。

(1)離線瀏覽,讓用戶可在應用離線時(網絡不可用時)使用它們。

(2)速度,讓已緩存資源加載得更快。

(3)減少伺服器負載,讓瀏覽器將只下載伺服器更新過的資源。

22、與HTML4比較,HTML5廢棄了哪些元素?

廢棄的元素包括 frame、frameset、 noframe、 applet、big、 center和 basefont。

23、HTML5標準提供了哪些新的API?

HTML5提供很多新的AP1,包括 Media APl、 Text Track API、 Application Cache API、 User InteractionAPI、 Data Transfer API、 Command APl、 Constraintion Validation API和 History API

24、請你說一下 Web Worker和 WebSocket的作用。

Web Worker的作用如下:

(1)通過 worker= new Worker(url)加載一個 JavaScript文件,創建一個 Worker,同時返回一個 Worker實例

(2)用 worker.postMessage(data)向 Worker發送數據

(3)綁定 worker.onmessage接收 Worker發送過來的數據

(4)可以使用 worker.terminate()終止一個 Worker的執行。

WebSocket的作用如下。

它是Web應用程式的傳輸協議,提供了雙向的、按序到達的數據流。它是HTML5新増的協議, WebSocket的連接是持久的,它在客戶端和伺服器之間保持雙工連接,伺服器的更新可以及時推送到客戶端,而不需要客戶端以一定的時間間隔去輪詢。

25、如何實現瀏覽器內多個標籤頁之間的通信?

在標籤頁之間,調用 localstorge、 cookies等數據存儲,可以實現標籤頁之間的通信

26、如何讓 Websocket兼容低版本瀏覽器?

使用 Adobe Flash Socket、 ActiveX HTMLFile(E)、 multipart編碼發送XHR

與長輪詢發送XHR等,可以實現不支持 WebSocket API的瀏覽器對 Web Socket的兼容。

27、HTML5為瀏覽器提供了哪些數據存儲方案?

在較高版本的瀏覽器中,提供了 sessionStorage:和 globalStorage。在HTML5規範中,用 localStorage取代 globalStorage 。

HTML5中的 Web Storage包括兩種存儲方式,分別是 sessionStorage和 localStorage。

sessionStorage用於在本地存儲一個會話( session)中的數據,這些數據只有同一個會話中的頁面才能訪問,當會話結來後,數據也隨之銷毀。因此 sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。

localStorage用於持久化的本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。

localStorage和 sessionStorage都具有相同的操作方法,例如 setItem、 getItem和removeltem等

28、請描述一下 sessionStorage和 localStorage的區別。

sessionStorage用於在本地存儲一個會話中的數據,這些數據只有同一個會話中的頁面才能訪問,當會話結束後,數據也隨之銷毀。因此 sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。

而 localstorage用於持久化本地存儲,除非主動刪除數據,否則數據是永遠不會過期的。

29、localStorage和 cookie的區別是什麼?

localStorage的概念和cookie相似,區別是 localStorage是為了更大容量的存儲設計的。cookie的大小是受限的,並且每次請求一個新頁面時, cookie都會被發送過去,這樣無形中浪費了帶寬。另外, cookie還需要指定作用域,不可以跨域調用。

除此之外, localStorage擁有 setlten, getItem、 removeltem、 clear等方法, cookie則需要前端開發者自己封裝 setCookie和 get Cookie。但 cookie也是不可或缺的,因為 cookie的作用是與伺服器進行交互,並且還是HTP規範的一部分,而 localStorage僅因為是為了在本地「存儲」數據而已,無法跨瀏覽器使用。

30、請你談談 cookie的特點。

cookie雖然為持久保存客戶端數據提供了方便,分擔了伺服器存儲的負擔,但是有以下局限性。

(1)每個特定的域名下最多生成20個 cookie。

(2)IE6或更低版本最多有20個 cookie。

(3)IE7和之後的版本最多可以有50個 cookie。

(4) Firefox最多可以有50個 cookie。

(5) Chrome和 Safari沒有做硬性限制。

IE和 Opera會清理近期最少使用的 cookie, Firefox會隨機清理 cookie。

cookie最大為4096位元組,為了兼容性,一般不能超過4095位元組。

IE提供了一種存儲方式,可以讓用戶數據持久化,叫作 userdata,從IE5.0就開始支持此功能。每塊數據最多128KB,每個域名下最多1MB。這個持久化數據放在緩存中,如果緩存沒有被清理,就會一直存在。

優點如下:

(1)通過良好的編程,控制保存在 cookie中的 session對象的大小。

(2)通過加密和安全傳輸技術(SSL),降低 cookie被破解的可能性。

(3)只在 cookie中存放不敏感數據,即使被盜也不會有重大損失。

(4)控制 cookie的生命周期,使之不會永遠有效。數據偷盜者很可能得到一個過期的 cookie。

缺點如下:

(1)「 cookie」的數量和長度有限制。每個 domain最多只能有20條 cookie,每個cookie的長度不能超過4KB,否則會被截掉。

(2)安全性問題。如果 cookie被別人攔截了,就可以取得所有的 session信息。即使加密也於事無補,因為攔截者並不需要知道 cookie的意義,他只要原樣轉發 cookie就可以達到目的。

(3)有些狀態不可能保存在客戶端。例如,為了防止重複提交表單,我們需要在伺服器端保存一個計數器。如果把這個計數器保存在客戶端,那麼它起不到任何作用

31、cookie和 session的區別是什麼?

區別如下:

(1) cookie數據存放在客戶的瀏覽器上, session數據存放在伺服器上。

(2) cookie不是很安全,別人可以分析存放在本地的 cookie並進行 cookie欺騙。考慮到安全問題應當使用 session。

(3) session會在一定時間內保存在伺服器上。當訪問增多時,會佔用較多伺服器的資源。為了減輕伺服器的負擔,應當使用 cookie。

(4)單個 cookie保存的數據不能超過4KB,很多瀏覽器都限制一個站點最多保存20個 cookie。

所以個人建議可以將登錄信息等重要信息存放在 session中,其他信息(如果需要保留)可以存放在 cookie中。

32、什麼是SVG?

SVG即可縮放失量圖形( Scalable Vector Graphics)。它是基於文本的圖形語言,使用文本、線條、點等來繪製圖像,這使得它輕便、顯示迅速。

33、Canvas和SvG的區別是什麼?

兩者的區別如下:

(1)一旦 Canvas繪製完成將不能訪問像素或操作它;任何使用SVG繪製的形狀都能被記憶和操作,可以被瀏覽器再次顯示。

(2) Canvas對繪製動畫和遊戲非常有利;SVG對創建圖形(如CAD)非常有利。

(3)因為不需要記住以後事情,所以 Canvas運行更快;因為為了之後的操作,SVG需要記錄坐標,所以運行比較緩慢。

(4)在 Canvas中不能為繪製對象綁定相關事件;在SVG中可以為繪製對象綁定相關事件。

(5) Canvas繪製出的是位圖,因此與解析度有關;SvG繪製出的是矢量圖,因此與解析度無關。

34、如何使用 Canvas和HTML5中的SVG畫一個矩形?

使用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、本地存儲的數據有生命周期嗎?

本地存儲的數據沒有生命周期,它將一直存儲數據,直到用戶從瀏覽器清除或者使用 JavaScript代碼移除。

36、HTML5中如何實現應用緩存?

首先,需要指定「 manifest」文件," manifest」文件幫助你定義緩存如何工作以下是「 manifest」文件的結構。

CACHE MANTEEST /demo. css/demo. js/demo.png所有 manifest文件都以」 CACHE MANIFEST"語句開始。#(散列標籤)有助於提供緩存文件的版本。manifest文件的內容類型應是"text/ cache- manifest」。

創建一個緩存 manifest文件後,在HTML頁面中提供 manifest連結,代碼如下所示。

<html manifest="icketang. appcache">

第一次運行以上文件時,它會添加到瀏覽器應用緩存中,在伺服器宕機時,頁面從應用緩存中獲取數據。

37、如何刷新瀏覽器的應用緩存?

應用緩存通過變更「#」標籤後的版本號來刷新,如下所示:

CACHE  MANIFEST /icketang.css/icketang.js/icketang. pngNETWORK: login. php

38、應用緩存中的回退是什麼?

應用緩存中的回退會幫助你指定在伺服器不可訪問時,顯示某文件。例如在下面的manifest文件中,如果用戶輸入了「/home」,同時伺服器不可到達,「404htm」文件應送達。

39、應用緩存中網絡命令的作用是什麼?

網絡命令描述不需要緩存的文件,例如以下代碼中「 login.php」始終都不應該緩存或者離線訪問。

40、什麼是 Websql?

Websql是一個在瀏覽器客戶端的結構關係資料庫,是瀏覽器內的本地 RDBMS(關係型資料庫管理系統),可以使用SQL查詢。

41、Websql是HTML5的一個規範嗎?

不是,許多人把它標記為HTML5,但是它不是HTML5規範的一部分,這個規範是基於 SQLite的

42、HTML5如何實現跨域?

在伺服器端設置允許在其他域名下訪問,例如允許所有域名訪問以下內容。

response.setHeader("Access-Control-Allow-Origin","*");response.setHeader ("Access-Control-Allow-Methods","POST");response.setHeader("Access-Control-Allow-Headers","x-requested-with, content-type");

本文完~

相關焦點

  • 答對這40道經典web前端面試題,想不拿到offer都難!
    想成功就業web前端工程師,想要能高薪就業,那麼除了好的web前端技能以外,還得有好的面試技巧,如果提前就了解更多企業的面試要求及面試題目,那麼可以讓我們的面試成功的機率大大的提高。今天小編就整理了一些經典的web前端面試題,希望可以祝大家一臂之力。一、HTML常見題目01、Doctype作用?嚴格模式與混雜模式如何區分?它們有何意義?02、HTML5為什麼只需要寫?
  • 2020Web前端開發常見面試題及答案全解析-開課吧Web前端
    Web前端開發問題一:前端如何進行seo優化,以下說法錯誤的是:A.爬蟲依賴於標籤來確定上下文和各個關鍵字的權重;C語義化是為了利於人的閱讀不管html還是html5或者是xml都可儘量做到語義化。解析:title 指圖片的信息(滑鼠移到圖片上顯示)、alt 指圖片不顯示時顯示的文字以上就是小科今天整理提供的Web前端開發面試題,希望為Web前端同學提供了有用的面試素材,以後酷仔每日均會提供Python及Web相關的習題。
  • 2020Web前端常見經典面試題及答案-開課吧
    Web前端常見面試題及答案問題:js有哪些類型?本文收錄了一些在Web前端開發面試中經常會遇到的面試題及答案,希望對大家有所幫助,若有所疏漏歡迎指正。
  • 開課吧:2020Web前端開發常見面試題及答案,提高面試通過率!
    Web前端開發面試題及答案問題:實現節流函數(throttle)解析:防抖函數原理:規定在個單位時間內,只能觸發次函數。以上就是小科今天整理提供的Web前端開發面試題,希望為Web前端同學提供了有用的面試素材,以後小科每日均會提供Python、Web及MySQL資料庫相關的習題。學習沒有捷徑,希望大家都能少走一些彎路,順利找到工作!
  • 2020Web前端開發常見面試題匯總-開課吧
    2020Web前端面試題了解一些面試題及答案,可以幫助自己順利通過面試哦。以下是小編為大家整理的web前端面試題及答案,供各位參考。Web前端面試題:異步請求適合在哪個生命周期調?解析:官實例的異步請求是在mounted命周期中調的,實際上也可以在created命周期中調。Web前端面試題:各個生命周期的作用是什麼?
  • web前端開發工程師面試題大全
    最近看到web群裡的人,特別關心面試web前端開發工程師時,面試官都會問那些問題,今天我整理了一份,web前端開發工程師崗位面試題的大全,大家可看看
  • 2020 前端面試|第二波面試題總結
    前言哈,看樣子年後跳槽還是大家比較關心的一件事情了,繼第一波面試題匯總的反響和評論,觀看和點讚的朋友們很多,我繼續將後續面試的一些內容寫出來,有很多面試題答案我自己寫的比較含糊,但是在面試的過程中是描述的表較多的。畢竟寫文字要寫出來太多了。我也只是寫了一個大概,如果對答案不太滿意的同學可以自行查詢標準答案哈。
  • 34道常見的HTML+CSS面試題,附答案
    源 /  web前端開發接上《33道前端開發理論面試題,附答案
  • 2020最新Web前端經典面試題試題及答案(持續更新)-開課吧
    Web前端面試題Web前端面試題:說說你對webpack的看法解析:webpack是一個模塊打包工具,可以使用webpack可以將代碼切割成不同的chunk,實現按需加載,降低了初始化時間支持sourceUrls和sourceMaps,易於調試具有強大的plugin接口,大多是內部插件,使用起來比較靈活webpack使用異步IO並具有多級緩存,在增亮編譯上更加快Web前端面試題
  • 每日一學:2020Web前端面試題匯總,提高面試成功機率-開課吧
    本文收錄了一些在Web前端開發面試中經常會遇到的面試題及答案,希望對大家有所幫助,若有所疏漏歡迎指正。2020Web前端面試題Web前端面試題:怎樣查找字符串中出現最多的字符和個數?{ num= $0.length;char = $1;}});console.log(`字符最多的是${char},出現了${num}次`);Web前端面試題題
  • 【別笑】手撕吊打面試官系列面試題
    必備面試題js基礎1. 9*3=27 9*4=36 9*5=45 9*6=54 9*7=63 9*8=72 9*9=81`)斐波那契數列函數(30以內)斐波那契數列,就是數列的每一個數字,都是前兩個數字相加的和,常見面試題斐波那契數列是一個可難可簡單的題目,從暴力遞歸,到動態規劃
  • 2020Web前端面試題匯總-開課吧
    Web前端面試題說說前端中的事件流?以上就是小科今天整理提供的Web前端開發面試題,希望為Web前端同學提供了有用的面試素材,以後小科每日均會提供Python、Web及MySQL資料庫相關的習題。學習沒有捷徑,希望大家都能少走一些彎路,順利找到工作!
  • 500道Java 必備面試題答案(過後即刪)
    其實,很多面試者在搜集面試資料的時候都踩過一些「坑」,你是不是也遇到過:免費搜索的面試題,內容不全面,這就算了,有時候答案都不準確;很多培訓機構提供的面試寶典內容雖然不少,但深度不夠,且面試題過於老舊脫離了企業實際需要;還有很多付費的面試題存在濫竽充數,提供了很多沒有價值的面試題,錢花了,乾貨沒學到;
  • 前端知識點、面試題,附答案(下)
    01, b) { return a - b; }); console.log(input); normalize(input); console.log(input);全部完相關內容【端午節免費送書活動】前端知識點
  • 2020 前端面試 | 第一波面試題總結
    前言 先介紹一下自己的情況吧 內蒙古呼和浩特某大學畢業,專科,計算機多媒體專業畢業 16年出來工作,工作經驗四年,之前主要做平面相關,自己喜歡瞎折騰,從17年開始研究前端
  • 【前端面試題】02—59道CSS面試題(附答案)
    CSS部分的面試題主要考察應試者對CSS基礎概念模型的理解,例如文檔流、盒模型、浮動、定位、選擇器權重、樣式繼承等。
  • 常見結構化面試經典100題及答案查看
    常見結構化面試經典100題及答案查看由北京教師招聘考試網提供:更多關於結構化面試經典100題的內容請關注教師資格考試網/北京教師招聘考試網!或關注北京華圖微信公眾號(bjhuatu),北京教師考試培訓諮詢電話:400-010-1568。
  • Google人工智慧面試·真·題(附參考答案+攻略)
    Google的技術面試流程就是各家的標配而已,先遠程後現場。面試以強度聞名,可能看看問題就想回家了。這些題目全部由Glassdoor收集統計。不過,順便看下參考答案也是好的。1、求導1/x。答:-1/x2
  • 前端面試題集合
    內存洩露的排除定位和解決方法垃圾回收機制websocket實現原理http狀態碼301 302的區別,304是啥緩存機制,協商協議定時器setTimeout的運行機制事件循環機制 eventloop異步es5 es6 es7分別怎麼樣解決js的繼承的實現方法清除浮動的方法常見布局的方法
  • 2020Web前端面試題:如何預防XSS?-開課吧
    2020Web前端面試題解析:XSS 攻擊有兩大要素:1. 攻擊者提交惡意代碼。2.輸入過濾在用戶提交時,由前端過濾輸,然後提交到後端。這樣做是否可行呢?答案是不可行。旦攻擊者繞過前端過濾,直接構造請求,就可以提交惡意代碼了。那麼,換個過濾時機:後端在寫資料庫前,對輸進行過濾,然後把「安全的」內容,返回給前端。