常见的HTML5面试题(附答案)
常見的HTML5面試題(附答案)
1、HTML5有哪些新特性？移除了哪些元素？
HTML5的新特性如下：
1、拖放（ Drag and drop）APIl
2、語義化更好的內容標簽（ header、nav、 footer、 aside、 article、 section）
3、音頻、視頻（ audio、 video）API
4、畫布（ Canvas）API
5、地理（ Geolocation）APl
6、本地離線存儲（ localStorage），即長期存儲數據，瀏覽器關閉后數據不丟失。
7、會話存儲（ sessionStorage），即數據在瀏覽器關閉后自動刪除
8、表單控件包括 calendar、date、time、 email、url、 search。
9、新的技術包括 webwork、 websocket、 Geolocation
移除的元素如下：
1、純表現的元素，包括 basefont,big、 center、font、s, strike,t、u
2、對可用性產生負面影響的元素，包括 frame、 frameset、 Noframes
2、如何處理HTML5新標簽的瀏覽器兼容問題？
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 # version 1.0 /demo. css /demo. js /demo.png 所有 manifest文件都以” CACHE MANIFEST"語句開始。 #（散列標簽）有助于提供緩存文件的版本。 manifest文件的內容類型應是"text/ cache- manifest”。創建一個緩存 manifest文件后，在HTML頁面中提供 manifest鏈接，代碼如下所示。
第一次運行以上文件時，它會添加到瀏覽器應用緩存中，在服務器宕機時，頁面從應用緩存中獲取數據。
37、如何刷新瀏覽器的應用緩存？
應用緩存通過變更“#”標簽后的版本號來刷新，如下所示：
CACHE MANIFEST# version 2.0 /icketang.css /icketang.js /icketang. png NETWORK：login. php38、應用緩存中的回退是什么？
應用緩存中的回退會幫助你指定在服務器不可訪問時，顯示某文件。例如在下面的manifest文件中，如果用戶輸入了“/home”，同時服務器不可到達，“404htm”文件應送達。
FALLBACK： /home//404. html39、應用緩存中網絡命令的作用是什么？
網絡命令描述不需要緩存的文件，例如以下代碼中“ login.php”始終都不應該緩存或者離線訪問。
NETWORK login. php40、什么是 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"）；總結
以上是生活随笔為你收集整理的常见的HTML5面试题(附答案)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JavaScript最新手机号码、电话号
- 下一篇： HTML中通过CSS方式隐藏元素