<div class="example" data-subject="physics" data-level="complex">
 ...</div>

TML稱為超文本標記語言，是一種標識性的語言。在前端開發中離不開HTML，支持不同數據格式的文件鑲入，前端工程師在面試過程中涉及到一些基礎知識，常見的前端HTML5面試題有哪些呢？

本文，千鋒武漢Web前端培訓小編分享一些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、什么是<!DOCTYPE >？是否需要在HTML5中使用？

<!DOCTYPE>是關于頁面寫入了什么版本的HTML的指令。<!DOCTYPE>標記沒有結束標記，它不區分大小寫。<!DOCTYPE>聲明必須是HTML5文檔中的第一行，在標記之前。如HTML 4.01，全部<!DOCTYPE>聲明需要引用文檔類型定義(DTD)，因為HTML 4.01是基于標準通用標記語言(SGML)的。而HTML5并不基于SGML，因此不需要對文檔類型定義(DTD)的引用。

3、HTML5有哪些的新特性？

HTML5中最有趣的新特性：

* 二維畫圖中的<canvas>元素

* 媒體播放的<video> 和<audio>元素

* 支持本地存儲

* 新的內容特定元素，如<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前端培訓小編僅介紹了部分Web前端HTML面試題及答案，如果想要在眾多競爭者中脫穎而出，除了專業技能還需要掌握一些求職面試的技巧，在面試過程中爭取更多的主動權。關注“武漢千鋒”微信公眾號，會定期為大家分享最新Web前端面試題、發展趨勢、學習資料，助力大家學好Web前端。

如果你也想快速學好Web前端，可以來千鋒武漢Web前端培訓，更可以申請兩周免費試聽課程，讓你親身實地感受高品質面授教學。

千鋒武漢Web前端培訓課程以實戰項目驅動教學，結合時下流行技術，加入大數據可視化內容，同時深化了PHP+MySQL開發內容，精準匹配企業線下及未來需求，除了培養學員的開發技術，著力培養學員的大前端視角與全棧思維，深度貫穿前端后端開發，緊貼主流企業一線需求，助力千鋒學員畢業即高薪就業。