HTML稱爲超文本標記語言，是一種標識性的語言。在前端開發中離不開HTML，支持不同數據格式的文件鑲入，前端工程師在面試過程中涉及到一些基礎知識，常見的前端HTML5面試題有哪些呢？
本文，分享一些HTML5面試題及答案。準備參加web前端面試的小夥伴們來看一看吧，希望能夠對大家有所幫助！
1、 什麼是 HTML5？
HTML5是HTML(超文本標記語言)的最新版本。它是一種爲萬維網構建和顯示內容的語言，萬維網是互聯網的核心技術。WHATWG(Web超文本應用技術工作組)另一次W3C個人聚會認爲，W3C沒有認真考慮當前方言的現實改進需求，它已經開始處理HTML-HTML5的新確定。因此，HTML5是HTML 4.01和XHTML 1.0的另一種改編，它集中於Web應用程序設計者的必要性上，並且還傾向於在當前細節中發現的問題。
具體而言，HTML5包含許多新的句法特徵。新元素，如section, article, header和nav，是文檔語義實質的重要組成部分。它們還包含section, article, header和canvas標記，以及SVG內容的集成。這些組件旨在簡化合並和處理網絡上的交互式媒體和圖形內容，而無需訴諸限制性模塊和API。少數成分和性狀已被排出。一些組件，例如，video, audio和menu已經被更改、重新定義或標準化。API和DOM不再被重新考慮，而是HTML5規範的基本部分。
2、什麼是？是否需要在HTML5中使用？
是關於頁面寫入了什麼版本的HTML的指令。標記沒有結束標記，它不區分大小寫。聲明必須是HTML5文檔中的第一行，在標記之前。如HTML 4.01，全部聲明需要引用文檔類型定義(DTD)，因爲HTML 4.01是基於標準通用標記語言(SGML)的。而HTML5並不基於SGML，因此不需要對文檔類型定義(DTD)的引用。3、HTML5有哪些的新特性？
HTML5中最有趣的新特性：
-
二維畫圖中的元素
-
媒體播放的 和元素
-
支持本地存儲
-
新的內容特定元素，如
<section>，<article>，<footer>，<header>，<nav>，<menu>
4、HTML5的優勢有哪些？
一些網絡研究的前5名似乎提供了以下HTML5特性;
-
相關性
-
標記/代碼簡潔
-
語義清晰
-
簡明的表單和網絡應用程序
-
緩存式離線應用程序
5、Canvas是什麼？怎樣寫Canvas？
Canvas是HTML5的一個元素，它使用JavaScript在網頁上繪製圖形。Canvas是一個矩形區域。它的每一個像素都可以由HTML5語言來控制。使用Canvas繪製路徑、框、圓、字符和添加圖像有幾種方法。如果要在我們的HTML文檔中添加Canvas標籤，我們需要ID、寬度和高度。下面是如何將基本Canvas標籤寫入HTML文檔的示例。
<canvas id="myFirstCanvas" width="100" height="100"> </canvas>
6、HTML5地理定位是什麼？如何使用？
HTML5 地理定位用於定位用戶的位置HTML5 地理定位API用於獲取用戶的地理位置。由於這會侵犯用戶隱私，除非用戶批准，否則該位置不可用。使用 getCurrentPosition() 方法獲取用戶的位置。下面的示例是返回用戶位置的緯度和經度的簡單地理定位示例：
<script> var x=document.getElementById("demo"); function getLocation() { if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition); } else{x.innerHTML="Geolocation is not supported by this browser.";} } function showPosition(position) { x.innerHTML="Latitude: " + position.coords.latitude +"Longitude: " + position.coords.longitude; } </script>
7、使用HTML5需要遵守哪些規則？
-
新的特性應該基於HTML、CSS、DOM和JavaScript
-
減少對外部插件的需求(如Flash)
-
更好的錯誤處理
-
更多的替換腳本的標記
-
HTML5應與設備無關
-
開發過程必須可視化
8、HTML5中的Session storage存儲對象是什麼？如何創建和訪問？
Session storage 存儲對象存儲一個會話的數據。當用戶關閉瀏覽器窗口時，數據將被刪除。如下所示，我們可以在這裏創建“blogName”作爲會話並訪問Session storage<script type="text/javascript"> sessionStorage.blogName="OnlineInterviewQuestions"; document.write(sessionStorage.name); </script>
9、Html5應用程序緩存和Html瀏覽器緩存有什麼區別？
新的HTML5規範允許瀏覽器在連接客戶端時預取一些或全部網站資產，如HTML文件、圖像、CSS、JavaScript等。對於獲取此內容，用戶以前沒有必要訪問此內容。換句話說，應用程序緩存可以預取完全未被訪問的頁面，從而在常規瀏覽器緩存中不可用。預取文件可以加速站點的性能，儘管您最初使用帶寬下載這些文件。
10、簡要描述下最新的HTML5標準中的API是什麼？
下面是HTML 5標準提供的新API列表。* Canvas ：Canvas 由HTML代碼中定義的具有高度和寬度屬性的可繪製區域組成。JavaScript代碼可以通過一組完整的繪圖函數訪問該區域，這與其他常見的2DAPI類似，因此允許動態生成圖形。Canvas 的一些預期用途包括構建圖形、動畫、遊戲和圖像合成。
-
定時媒體回放
-
離線存儲數據庫
-
文檔編輯
-
拖放
-
跨文檔消息傳遞
-
瀏覽器歷史管理
-
MIME類型和協議處理程序註冊
11、LocalStorage本地存儲在HTML5中有什麼用途？
LocalStores 本地存儲就是一個輕量級的sqllite數據庫。可以在客戶端本地存儲數據，用於在斷開網絡連接的情況下讀取本地緩存cookies，LocalStores可以將數據長期保存在客戶端，直至人工清除爲止，接下來演示下實例：
1、使用localStorage對象保存數據：
localStorage.setItem(key , value)
2、使用localStorage獲取保存的數據：
localStorage.getItem(key)
3、清除localStorage保存的數據：
localStorage.removeItem(key)
4、清除全部localStorage對象保存的數據：
localStorage.clear( )
12、你能列出HTML5中新的輸入類型屬性嗎？
search：用於搜索域，比如站點搜索或 Google 搜索，域顯示爲常規的文本域。
url ：用於應該包含 URL 地址的輸入域在提交表單時，會自動驗證 url 域的值。
email：用於應該包含 e-mail 地址的輸入域，在提交表單時，會自動驗證 email 域的值。
datetime：選取時間、日、月、年(UTC 時間)
date：選取日、月、年
month：選取月、年
week：選取周和年
time：選取時間(小時和分鐘)
datetime-local：選取時間、日、月、年(本地時間)
number：用於應該包含數值的輸入域，您還能夠設定對所接受的數字的限定。
range：用於應該包含一定範圍內數字值的輸入域，類型顯示爲滑動條。
以上僅介紹了部分Web前端HTML面試題及答案，如果想要在衆多競爭者中脫穎而出，除了專業技能還需要掌握一些求職面試的技巧，在面試過程中爭取更多的主動權。關注我，會定期爲大家分享最新Web前端面試題、發展趨勢、學習資料，助力大家學好Web前端。