更多課程 選擇中心

Web培訓
美國上市教育機構

400-111-8989

Web培訓

Web前端面試之HTML5相關面試題及答案匯總

  • 發布:Web前端培訓
  • 來源:web前端面試
  • 時間:2019-12-16 16:40

今天小編要跟大家分享的文章是關于Web前端面試之HTML5相關面試題及答案匯總。準備參加web前端面試的小伙伴們來看一看吧,希望能夠對大家有所幫助!

Web前端面試之HTML5相關面試題及答案匯總

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 地理定位用于定位用戶的位置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前端面試之HTML5相關面試題及答案匯總的文章,希望本篇文章能夠對正準備參加web前端面試的小伙伴們有所幫助。想要了解更多web前端相關知識記得關注達內web培訓官網。最后祝愿小伙伴們工作順利,成為一名優秀的web前端工程師

【免責聲明:本文圖片及文字信息均由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除。】

預約申請免費試聽課

填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

上一篇:Web前端面試題之JavaScript部分
下一篇:Web前端面試總結-http、html和瀏覽器面試題匯總

Web前端面試之HTML5相關面試題及答案匯總

Web前端面試題之JavaScript部分

Web前端面試題之HTML/CSS部分

Web前端工程師參加面試要會的JavaScript測試題

選擇城市和中心
黑龍江省

吉林省

河北省

貴州省

云南省

廣西省

海南省

开心激情五月天